SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering Li's within a UL

    Hi there,

    I have a horizontal list where I wish for the li's to be centered within the ul.
    Up until this point, I haven't found a fix, even through Googling.

    HTML:-
    Code:
    <table class="login" width="800" border="0" cellpadding="0" cellspacing="0" align="center">
      <tr><td>
    
    <ul class="nav-bar">
    <li class="navs-bar">Hello</li>
    <li class="navs-bar">Hello</li>
    </ul>
    
    
    </td>
    </tr></table>
    CSS:-
    Code:
    ul.nav-bar{
    list-style:none;
    font-family:Verdana, Arial,Helvetica;
    font-size:12px;
    color:#ffffff;
    height:28px;
    padding:0px;
    margin:0px;
    font-weight:bold;
    letter-spacing:2px;
    background:url(navbar.jpg);
    }
    
    li.navs-bar{
    float:left;
    line-height:24px;
    
    }
    If anyone can help, that would be greatly appreciated

    Kind Regards

    James

  2. #2
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Move the background to the li style and specify padding to the li style too. Take out height to the nav class.

  3. #3
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rob,

    However, I am unsure as to how this method will actually automatically center the li's? Can you pleas explain some more?

    Cheers

    James

  4. #4
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This simple example should clear things up for you:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    
    <head>
    
      <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
      <title>Centered Nav</title>
    
      <style type="text/css">
    * { margin: 0; padding: 0; list-style-type: none; }
    body { margin: 4em; font-size: 100%; font-family: sans-serif; }
    ul { margin: 0 auto; text-align: center; width: 30em; }
    li { border: 1px solid black; float: left; width: 10em; background-color: gray; padding: 4px; }
      </style>
    
    </head>
    
    <body>
    
    <ul>
    
      <li>Nav item 1</li>
    
      <li>Nav item 2</li>
    
    </ul>
    
    </body>
    
    </html>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you have floated widthless elements that you want to center then its quite complicate to do but it can be done like this:

    http://www.pmob.co.uk/temp/centered-floats2.htm

    You would need an extra wrapper to hold the background image though as it can't be put on the ul.

    An alternative simpler method would be to not float the list items and just let them be inline elements (li {display:inline}) which can be centred with text-align:center on the parent ul. However inline elements can be awkward to style and of course means you can't apply dimensions to them (John ).

  6. #6
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK.

    The problem is that you have the lis in a table of fixed width and then you are floating them to the left to get them to display horizontally.

    Let me think about this...

  7. #7
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    If you have floated widthless elements that you want to center then its quite complicate to do but it can be done like this:

    http://www.pmob.co.uk/temp/centered-floats2.htm

    You would need an extra wrapper to hold the background image though as it can't be put on the ul.

    An alternative simpler method would be to not float the list items and just let them be inline elements (li {display:inline}) which can be centred with text-align:center on the parent ul. However inline elements can be awkward to style and of course means you can't apply dimensions to them (John ).
    Indeed - sorry about leaving in display: inline - meant to swap that back for a float when I was fiddling with it - I updated the code - it works fine and is valid.

    Thanks again my eagle-eyed friend.

    Your widthless centered float example is hot sh#t! Very cool.


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
  •