centering horizontal list

Discussion in 'CSS' started by mnymkr, Apr 21, 2006.

0
  1. #1
    i would like to center this list that makes my top menu, could you please take a look? I have tried almost every margin and textcenter combo i can think of.

    bj.dreamhosters.com/joomla
     
    mnymkr, Apr 21, 2006 IP
  2. Jboo

    Jboo Active Member

    Messages:
    229
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #2
    Try putting the menu in a div e.g <div align="center">, that should work ok.

    Hope this helps,
    Justin.
     
    Jboo, Apr 21, 2006 IP
  3. mnymkr

    mnymkr Well-Known Member

    Messages:
    2,328
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    120
    #3
    thats like inline stying right. what is the code for a stylesheet that is separate.
     
    mnymkr, Apr 21, 2006 IP
  4. mnymkr

    mnymkr Well-Known Member

    Messages:
    2,328
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    120
    #4
    i colored the background of the division it is in so u can see it better. see the div that contains it is centered what i need is the li items to be centered in the container.
     
    mnymkr, Apr 21, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    Lose the tables and extra divs and what-not. In its simplest form, it's just a list; 
    
<ul id="hor">
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
</ul>
    Code (markup):
    presented in line 
    
#hor {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    }

#hor li {
    display: inline;
    padding: 0 15px;
    }
    Code (markup):
    When you put actual links in, move the padding from the lis to the as.

    cheers,

    gary
     
    kk5st, Apr 21, 2006 IP
  6. mnymkr

    mnymkr Well-Known Member

    Messages:
    2,328
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    120
    #6
    the problem is have like 20 something settings in joomla and i pick the one with tables. ok i have one without now. please look again.

    i am trying to create a very simple styled menu that stays centered as i add links in joomla.....

    this is the code joomla generates

    <ul id="mainlevel"><li><a href="http://www.bj.dreamhosters.com/joomla/" class="mainlevel" >Home</a></li><li><a href="http://www.bj.dreamhosters.com/joomla/component/option,com_contact/Itemid,3/" class="mainlevel" >Contact Us</a></li><li><a href="http://www.bj.dreamhosters.com/joomla/content/section/1/2/" class="mainlevel" >News</a></li><li><a href="http://www.bj.dreamhosters.com/joomla/component/option,com_weblinks/Itemid,23/" class="mainlevel" >Links</a></li><li><a href="http://www.bj.dreamhosters.com/joomla/content/view/13/28/" class="mainlevel" >About Us</a></li><li><a href="http://www.bj.dreamhosters.com/joomla/component/option,com_joomlaboard/Itemid,34/" class="mainlevel" >Forum</a></li><li><a href="http://www.bj.dreamhosters.com/joomla/component/option,com_docman/Itemid,35/" class="mainlevel" >Downloads</a></li></ul> </div>
     
    mnymkr, Apr 22, 2006 IP
  7. mnymkr

    mnymkr Well-Known Member

    Messages:
    2,328
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    120
    #7
    ok i tried the one trick and it worked awesome. i read somewhere that i would need to use auto margin to get it to work. now to try implement the joomla code into it. now i am curious as to why my original menu messed up?
     
    mnymkr, Apr 22, 2006 IP