Horizontal Nav will not center!

**Friesian Fever** · 04-22-2008, 08:27 PM

Help! I can't for the life of me center this **** horizontal navigation

* {
margin:0;
padding:0;
}
body {
font-size: 14px;
font-family: Verdana;
background-color: #fff;
height: 100%;
}

/* Header */
#header {
height: 198px;
width: 734px;
margin: 0 auto;
background: url('img/head.jpg') no-repeat;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin-top: 5px;
}

/* Menu */

#menu {
width: 734px;
height: 40px;
margin: 0 auto;
background: url(img/nav.jpg);
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
}
#menu ul {
margin: 0 auto;
padding: 0;
list-style: none;
line-height: normal;
margin-top: 2px;
text-align: center;
}
#menu li {
display: inline;

}
#menu a {
display: block;
float: left;
width: 168px;
height: 18px;
padding: 4px 4px 0 4px;
text-align: center;
text-decoration: none;
background: url(img/img05.png) no-repeat center top;
margin: 0 auto
}
#menu a:hover {
background-image: url(img/img06.png);
}
#menu .active a {
background-image: url(img/img06.png);
}
/* Content */
#content {
width: 734px;
margin: 0 auto;
border: 1px solid #000;
border-top: none;
background: #f4f7f2;
}

**vangogh** · 04-22-2008, 09:33 PM

Are you using a proper doctype? What browser are you testing with?

Your css generally looks right. You have the margins set correctly and you supplied the width.

Could you supply some of the html or even better if the page is online could you post a link to it?

**Friesian Fever** · 04-22-2008, 09:37 PM

It's not online yet. But here is the html so far

<!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">
<head>
<meta http-equiv="Content-Language" content="en-ca" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id ="header"></div>

<div id="menu">
<ul>
<li class="active"><a href="#" accesskey="1" title="">ABOUT</a></li>
<li><a href="#" accesskey="2" title="">SERVICES</a></li>
<li><a href="#" accesskey="3" title="">CONTACT</a></li>
</ul>
</div>

<div id="content">
</div>

</body>
</html>

**vangogh** · 04-23-2008, 12:53 AM

The code helped.

I recoded things a little and got it mostly centered. You'll just need to play around with a couple of widths. I'll list the stuff I changed.

HTML Code:

#menu ul {
margin: 0 auto;
width:734px;
padding: 0;
list-style: none;
line-height: normal;
margin-top: 2px;
}

#menu li {
display:block;
float:left;
width:240px;
text-align:center
}

#menu a {
display: inline;
width: 268px;
height: 18px;
padding: 4px 4px 0 4px;
text-align: center;
text-decoration: none;
background: url(img/img05.png) no-repeat center top;
margin: 0 auto
}

Basically I gave a width to unordered list and also to the list item. I changed the list item to display: block and float: left. Then I took the float off the link and set it to be inline.

What you were doing on the link you wanted to do on the list item if that makes sense.

I wrote a tutorial on creating a simple navigation bar like this awhile back. It's basically what you're doing, but I thought you might be interested.

I hope it and the code above helps.

**Friesian Fever** · 04-23-2008, 01:04 AM

Thanks for the info! I actually fixed it right before I read your post, I just added 'padding: 4px 40px 0 40px;' to the 'menu a' and it seems to work just fine now, I'm bookmarking this thread just incase it screws up in a different browser. Thanks again!

**vangogh** · 04-23-2008, 01:07 AM

I'm glad you got it working. The one issue you may have with your solution is that you'll need to adjust that padding if you add another link. Then again you were going to need to adjust the widths anyway.

Glad I could help some even if you figured it out on your own.