Home › Designing Your Website › HTML, CSS, and Javascript

Problems with centering lists...

andy206uk posted this at 17:18 — 13th August 2006.

He has: 1,758 posts

Joined: Jul 2002

Hi all,

I have the following list in HTML:

  <ul id="nav">
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
    <li><a href="">Link 4</a></li>
    <li><a href="">Link 5</a></li>
  </ul>
'

Pretty simple huh? well... not quite. You see, I want to style that list so that it's horizontal for a tabbed navigation bar. That in itself is quite easy as well. Just make each

  • a block element and float it to the left.

    • The problem I'm having is that I need the list to be horizontally centred but for the list to stay centred and all on one line even if the size of the font changes. I can force the list to be centred if I fix the width of the

      and set the margins to auto, but then the navigation breaks up. Oh... and the
    • 's can't be made inline elements either because that ruins the background image...

    If possible I want to keep the markup clean and not add any unnecessary 's but I've gotten stuck with this. There are a couple of ways I could get round this, but not without compromising the markup and reverting to 1996 style markup Wink

    Does anyone have any suggestions on how I can do this? Confused

    Thanks!

    Andy

    Jack Michaelson posted this at 19:42 — 13th August 2006.

    Jack Michaelson's picture

    He has: 1,733 posts

    Joined: Dec 1999

    I've had the same problem about a year ago. It was driving me nuts. Eventually (the project deadline approached) I ended up with a '1996 style markup ;)': a table with one single table cell with the

      in it. I added the Html4 attribute align="center" to the table to center it.

    Keeping this topic under my attention for better solutions Wink

    Shakespeare: onclick || !(onclick)

    Renegade posted this at 19:48 — 13th August 2006.

    Renegade's picture

    He has: 3,022 posts

    Joined: Oct 2002

    Is the navigation in it's own DIV? If so, you could always try the ugly "IE centering hack" which is to apply "text-align:center;" to the navigation DIV and then to have "text-align:left;" applied to the LI.

    What this should do, is centre the UL but leave the LI contents left aligned.

    Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.