View Full Version : Centering a Navigation Menu with CSS

11-04-2010, 11:55 PM

I am trying to center the navigation menu bar with css. I finally got it near the center rather than left-aligned, but I can't get it to perfectly center for some reason. Here are the CSS and HTML codes:


body { width: 100%; margin: auto; background-color: #CCC884; text-align: center; }

#container {
width: 100%; height: 240px; margin: 0px auto; background-image: url(../multimedia/CTLHeader.jpg); background-repeat: no-repeat;

#navbar { height: 45px;
width: 100%;
margin: 0px;
background-color: #130940;
border: #130940 5px 0px;
border-style: inset none;
text-align: center;
position: relative; top: 140px; }

#menu { width: 100%; height: 45px; margin: 0px; list-style: none; }

ul#menu li { display: inline-block; }

ul#menu li a {
line-height: 45px;
padding: 0px 20px;
letter-spacing: 2px;
font-size: 18px;
color: #99C;
text-decoration: none; }

ul#menu li a:hover {background-color: #; line-height: 45px; padding: 20px 20px 18px 20px;}

ul#menu li a.current {background-color: #130920; padding: 13px 20px 13px 20px; }

#main { margin: 0px auto; position: relative; top: 240px; text-align: center; }


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cameron Telecom Law | CTL</title>
<link type="text/css" rel="stylesheet" href="css/ctl.css" />
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

<body onload="MM_preloadImages('multimedia/HeaderRollover.jpg','multimedia/HeaderRolloverText.jpg')">
<div id="container">
<div id="header">
<div id="navbar">
<ul id="menu">
<li><a class="current" href="homemade.html">Home</a></li>
<li><a href="homemade.html">Services</a></li>
<li><a href="homemade.html">About</a></li>
<li><a href="homemade.html">Contact</a></li>
<li><a href="homemade.html">Links</a></li>

<div id="main">
<h1>This is the main content area. Isn't it just lovely?</h1>
<div id="footer">
<!-- end of container div --></div>

I've read a few books about CSS and HTML and taken a few classes but that was a few months ago, so I'm a bit rusty. Hope you can help!

11-05-2010, 02:03 PM
Firstly, always try and stick your JavaScript just before your closing body tag. This will help massivley when it comes to page loading times ;)

For your issue, could you put a fixed width on #navbar, then just center it with margins.

Such as the following:

#navbar{width:500px;margin:0 auto;}

The above basically says keep equal margin on left and right and nothing on top. This is the method used to centre blocks, so find a width that matches your requirements.

11-05-2010, 04:39 PM
DC, thanks for your advice!

But for some reason it still isn't centering correctly. Here's what's happening...The menu bar itself will be centered perfectly, but the text items on the menu bar are slightly off to the right. Any ideas?

I just want a simple, centered menu bar, that stretches all the way across the page. Like the one here: http://kingdomlandscapes.com/

11-05-2010, 04:54 PM
Better practice for javascript is to pull it out into an external file and then reference it in the head of the HTML document ( <script type="text/javascript" src="myjavascript.js"></script> ). This way the javascript is cached by the user's browser and won't need to be downloaded over and over again for each page load.

I'm too lazy to rebuild your page locally, but if you can give me a link to your test page I'll take a look and see what the issues might be...

Your HTML validates just fine, which is a fantastic first step to have accomplished. Your CSS has three errors though and should be cleaned up (try out the CSS validator (http://jigsaw.w3.org/css-validator/)). They're most likely not related to your problem, but while we're tinkering you might as well fix them.

11-05-2010, 06:12 PM
Rowsdower you are my hero! :D

The advice in your signature is what worked!!! * { margin: 0; padding; 0; border: 0; }

That did the trick!! Great signature :p

And thanks for your other words of advice too!