Unexpected Outcome with Nav Bar - Any Suggestions? - CSS forum at WebmasterWorld

I am new to CSS and I am using a tutorial I found for a layout I like. I am trying though, to add a navigation bar. The background color of the nav bar stops at the edge of the bar, but I want it to go all the way across to match the top bar. Any suggestions?

Here is the html


<HTML><head>
<title>Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="level0">
 <div id="level1">
 <div id="topBar">
 SITE TITLE
  <DIV id="navigation">
<ul><li><a href="http://www.link1.com/" ><SPAN>Lorem ipsum</span></a></li><li><a href="http://www.link2.com/"><SPAN>dolor</span></a></li><li><a href="http://www.link3.com/"><SPAN>consetetur</span></a></li><li><a href="http://blogs.link4.com/"><SPAN>sed diam</span></a></li><li><a href="http://www.link5.com/"><SPAN>diam voluptua</span></a></li><li><a href="http://www.link6.com/"><SPAN>nonumy eirmod</span></a></li><li><a href="http://www.link7.com/"><SPAN>tempor invidunt</span></a></li></ul>
</div>
<br style="clear: both">
 <!--<div id="advBar">-->
 <!--</div>-->
 </div>
 <div id="level2">
 <div id="level3">
  <div id="main">
  The code you are reading.
  </div>
 </div>
 </div>
 </div>
 </div>
</body></html>

Here is the CSS

body {
margin: 9px 9px 0 9x;
padding: 0;
}

#level0 {
background: #FC0;
}

#level1 {
margin-left: 143px;
padding-left: 9px;
background: #FFF;
}

#level2 {
background: #FFF3AC;
}

#level3 {
margin-right: 143px;
padding-right: 9px;
background: #FFF;
}

#main {
background: #CCC;
}

#topBar{
background: #FC0;
}

#advBar{
background: #FFF3AC;
}

#navigation {
text-align: center;
float: left; /* Set to "left" or "right" to position menu accordingly*/
border-bottom: 3px solid #000000;
background-color: #FC0;
}
#navigation ul {
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-decoration: none;
margin: 0;
padding: 0;
list-style:none;
}
#navigation li {
display: inline;
background: url(images/button-mid.gif) repeat-x center top;
text-align: center;
padding: 0;
margin-right: 4px;
float: left;
}
#navigation a {
color: #FFFF00; /* Was 663300 */
background: url(images/button-left2.gif) no-repeat left top;
float: left;
margin:0;
padding-left:7px;
text-decoration: none;
}
#navigation a:hover {
text-decoration: underline;
}
#navigation a span {
background: url(images/button-right2.gif) no-repeat right top;
display: block;
padding:7px 13px 4px 5px;
}
#navigation a span {
float: none;
}

Unexpected Outcome with Nav Bar - Any Suggestions?

background color of navigation bar

doakra

SuzyUK

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week