PDA

View Full Version : 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/dynamicindex17/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:


<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:


<!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!!!