Horizontal Accordion Script Center

**surferdude** · 01-14-2011, 08:33 PM

1) Script Title: Horizontal Accordion Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...haccordion.htm

3) Describe problem: I have been working with this accordion and got all my content customized how I want it. I can't figure out how to center this accordion on a web page. Anytime I think I get a center tag working, it messes everything up. Is this possible? Can anyone please help?

Thanks!!!

**ddadmin** · 01-15-2011, 12:01 AM

Try giving the outermost DIV of your accordion an explicit width that reflects the total width of the actual contents inside, then use CSS's margin:auto property to center the entire DIV on the page:

Code:

<div id="hc1" class="haccordion" style="width:800px;margin:auto">
	<ul>

	<li>
		<div class="hpanel">
		<img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
		</div>
	</li>

	<li>
		<div class="hpanel">
		<img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited.
		</div>
	</li>

	<li>
		<div class="hpanel">
		<img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
		</div>
	</li>

	<li>
		<div class="hpanel">
		<img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy.
		</div>
	</li>

	<li>
		<div class="hpanel">
		<img src="http://img408.imageshack.us/img408/5751/langkawi.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia.
		</div>
	</li>

	</ul>
</div>

Note that in IE, your page needs to contain a valid doctype at the very top in order for the changes to have any effect, ie:

Code:

<!DOCTYPE HTML>

**surferdude** · 01-15-2011, 12:29 AM

Thanks very much for the response. I've been going crazy over this. That got it to center properly. But now things are all messed up. It's a similar problem when I got it partially center before but not as bad. Here is a link to what happens when I center it.
http://www.prolinestudio.com/testproline/accordion.html

**surferdude** · 01-15-2011, 12:36 AM

I'm sorry!!! It works if I put in the right size duh. My size was just too small. I use the 8oopx when the actual content was 950px.

Thanks so much!!!

Thread: Horizontal Accordion Script Center

Thread Tools

Search Thread

Horizontal Accordion Script Center

Bookmarks

Bookmarks

Posting Permissions