Using a list for navigation, can you center a list?

[tonyb]

I'm trying to raise my game and stop using tables for layout! I was given the impetus recently to improve my CSS and markup practices (thanks for your comment Welshstew ).

I learnt that using an unordered list, which you make inline, for your navigation bar/links makes sense, and I'm recreating the nav on a site in this way. The only thing is I'm a big fan of centering, and would like to center my navigation bar, but I can't work out how to do it. I can get the list onto one line, but not get the whole line to be centered. I know this is possible, I can see the footer links on http://www.yahoo.com/ are lists that are centred, but can't decipher how they've done it from the massive amount of code that makes their main page.

Any help would be much appreciated.

Tony

[dab42pat]

Could you post a link or your code so we can take a look.

Cheers

Pat

[tonyb]

Sorry should have done that. Thanks a lot, here you go:

Code: Select all

<div class="nav">

Code: Select all

<ul id="nav">
      <li id="home"><a href="index.html">Home</a></li>
      <li id="paintings"><a href="paintings.html">Paintings</a></li>
      <li id="books"><a href="books.html">Books</a></li>
      <li id="artist"><a href="artist.html">The Artist</a></li>
      <li id="gallery"><a href="gallery.html">Blue Anchor Gallery</a></li>
      <li id="contact"><a href="contact.html">Contact/Ordering</a></li>
  </ul>
</div>
 
body {                 /*part of attempt to center list*/
                text-align: center;
}
div.nav {               /*part of attempt to center list*/ 
                margin-left: auto;
                margin-right: auto;
}
#nav {
                list-style: none;           /*to remove bullet points*/
}
#nav li {
                margin: 0;
                padding: 0;
                float: left;
}
#nav a {
                display: block;
                margin: 0;
                padding: 4px 8px;
                color: #663333;
                text-decoration: none;
                background-color: #FFFFFF;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
}
#nav a:hover, body#home #home a{
                color: #FFFFFF;
                border-color: #727377;
                background-color: #003300;
                }

[moojoo]

You can center the list IF you use display:inline etc... if you float then you can "fake" it my left margin on the first nav item.

if you are using display:inline then ul#nav {text-align:center;} You also may want to consider putting the UL in <div id="nav"> vs using ul id="nav"; just an option.

I would bet that in yahoos footer they are using display:inline;

Yahoo is using:

Code: Select all

<ul id="flist2">
<li class="first"><a href="r/ao">Advertise with Us</a></li>
<li><a href="r/o4">Search Marketing</a></li>
<li><a href="r/pv">Privacy Policy</a></li>
<li><a href="r/ts">Terms of Service</a></li>
<li><a href="r/ad">Suggest a Site</a>[FONT=verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif][/font]</li>
<li><a href="r/ep">Yahoo! Telemundo</a></li
<li><a href="r/1p/*-http://feedback.help.yahoo.com/feedback.php?.src=FP&.from=501&.done=http://www.yahoo.com">Send Feedback</a></li><li class="last"><a href="r/hw">Help</a></li>
</ul>[FONT=verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif]
[/font]

Code: Select all

#footer li{
display:inline;

[tonyb]

Thank you very much!!!
Yay! I'd been struggling with that, now it's sorted thanks alot.