Results 1 to 4 of 4

Thread: Horizontal Accordion Script Center

  1. #1
    Join Date
    Jan 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizontal Accordion Script Center

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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,893
    Thanks
    3
    Thanked 966 Times in 954 Posts
    Blog Entries
    15

    Default

    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>
    DD Admin

  3. #3
    Join Date
    Jan 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Jan 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •