How can I center a Navigation Bar

Hi,
I’m working my way through the first edition of CSS: The Missing Manual and following all of the tutorials.

I’ve built the horizontal navigation bar from an unordered list of links and have used it in a tutoring website that I’m currently developing, but I can’t get the resulting navigation bar to center on the page. Does anyone know how I can do this? Obviously, the <div align=“center”> doesn’t do it.

The code with the internal style sheet is copied here. I hope I’ve included enough for a diagnosis.

Thanks,
Gorillamo

••••••••••••••••••••••••••••••••••••••••••••

<style type=“text/css”>
ul#competencyNav {
margin: 0;
padding: 0;
list-style: none;
border-left: 1px solid #999999;
float: left;
}

#competencyNav li {
float: left;
width: 125px;
}

#competencyNav a {
font: 12px Arial, Helvetica, sans-serif;
margin: 0;
padding: 20px;
text-decoration: none;
color: #FFFFFF;
text-transform: uppercase;
border: 1px solid #999999;
display: block;
padding: 7px 5px 7px 5px;
background-color: #000000;
border-left: none;
}

#competencyNav a:hover {
background: #FFFFFF;
color: #000000;
font-weight: bolder;
}
</style>
</head>

<body>
<div align=“center”>
<ul id=“competencyNav”>
<li><a href=“lc_langarts_g5c1objA.html”>COMPETENCY 1</a></li>
<li><a href=“lc_langarts_g5c2objA.html”>COMPETENCY 2</a></li>
<li><a href=“lc_langarts_g5c3objA.html”>COMPETENCY 3</a></li>
<li><a href=“lc_langarts_g5c4objA.html”>COMPETENCY 4</a></li>
<li><a href=“lc_langarts_g5c5objA.html”>COMPETENCY 5</a></li>
</ul>
</div>

You can use this technique

You have the HTML structure ready so just use that CSS :). Basically you do a double relative shift (left:50% and left:-50%:wink: to center it to the pixel

but I can’t get the resulting navigation bar to center on the page. Does anyone know how I can do this?
Hi Gorillamo, Welcome to SitePoint! :slight_smile:

You can also center widthless list items by using display:inline-block; for the list items and text-align:center; on the parent ul.

Centered Inline-Block List Items
Inline-Block with suckerfish dropdown (No support for FF2 - details explained in link)

You have to use overflow:hidden; on the main wrapping div when using the Widthless Float & Relative Position method. Not a problem most of the time but if you can’t set overflow:hidden; on the main wrapper for any reason you will get large horizontal scrollbars from the RP.

Paul’s article that Ryan linked to also covers the Inline-Block method at the end of the article. Inline-Block is widely supported these days and there is a workaround for IE6/7 so that has become my method of choice. :wink:

Hi RyanReese,
Actually I found that link right after I posted. Guess I should have looked first! It wasn’t a perfect solution for me but it does work. Thanks.

And Rayzur,
I’ll take a look at what you suggested as well. Being new to CSS, every small step is an effort for me, but I like challenges.

Thanks,
Gorillamo

Yup, i agree. I don’t use floats anymore for lay out, except the occasional small stuff.

Inline-Block gives less headache lol

It’s a headache doing CCs for IE6/7 and another way for FF2…it’s just too much hassle.

Floats all the way :lol:

Hi Rayzur,
I took a look at the Centered Inline-Block List Items page you set up as an example, and I was pleased to see that I could interpret the source code. Like I said, I’m new to CSS and it’s like realizing that I can actually read AND understand a new language (which IS what it is for me!).

What you showed me is so much simpler and far more straight-forward than what I got from the “float” method. I appreciate your sharing this with me.

Gorillamo

lol, CCs are less headache then float issues :wink:

And FF2, well we’ve been on that road already :smiley: