100% width nav bar

[saskatchewandav]

Hello, very simple question here. I'm not sure why I cannot get my css to format my nav bar how I want.

What I am after, is a basic one color background navbar that stretches the whole screen width.

2 problems so far!!!

#1 - I can't get it to expand the width of the page, it only goes as long as the text links themselves.

#2 - there is still a little margin on the left side, it's not quite flush with the page.


I am styling an unordered list, here's both my html and css code:


HTML:

<div id="navbar">
<ul>
<li><a href="#">NEWS</a></li>
<li><a href="#">ART</a></li>
<li><a href="#">MUSIC</a></li>
<li><a href="#">FILM</a></li>
<li><a href="#">CONTACT</a></li>
</ul></div>



CSS:

body {
background-color: #000000;
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
}

#navbar {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 1px;
font-size: 16px;
margin: 0px;
padding: 0px;
width: 100%;

}
#navbar ul{
margin: 0px;
padding: 0px;
display: inline;
list-style-type: none;
float: left;

}
#navbar li{
margin: 0px;
padding: 0px;
display: inline;
background-color: #003366;
}
#navbar a:link, #navbar a:visited{
text-decoration: none;
color:#ffffff;
}

#navbar a:hover{
color:#000000;
}


Please help, thanks!

[Four Staples]

1. #navbar ul needs to have a width of 100% too.. floated elements take on the width of their contents unless otherwise specified
2. set margin: 0 and padding: 0 in the body { } css. better yet, remove default margins/paddings on everything and set them yourself when you want them* { margin: 0; padding: 0; }
(that would go at the very top of your CSS)

[saskatchewandav]

thanks for the tips. However still not working:mad:

must be still something that's missing here.

[Four Staples]

It worked for me after I applied the above fixes. Here is the css:
* { margin: 0; padding: 0 }

body {
background-color: #000000;
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
}

#navbar {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 1px;
font-size: 16px;
margin: 0px;
padding: 0px;
width: 100%;

}
#navbar ul{
margin: 0px;
padding: 0px;
display: inline;
list-style-type: none;
float: left;
background: #ccc;
width: 100%
}
#navbar li{
margin: 0px;
padding: 0px;
display: inline;
background-color: #003366;
}
#navbar a:link, #navbar a:visited{
text-decoration: none;
color:#ffffff;
}

#navbar a:hover{
color:#000000;
}
I applied the grey background to #nav ul so you can see how wide it is. If you want the actual list items to stretch all the way across, you'll have to float them left and give them a width of 20% (and then if you want to be able to see the #nav ul background, you'll have to define a height to #nav ul). This is because inline elements cannot have a specified width or height, they take on the size of their contents. Floated elements, by default, take on the size of their contents, but CAN have a defined width/height as well. Defining a floated element as inline or block will have no effect on it, however using display: inline on a series of floated elements will prevent the IE double-margin bug so it's good to keep it in.

If you're just worried about getting the items to stretch all the way, use this CSS:* { margin: 0; padding: 0 }

body {
background-color: #000000;
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
}

#navbar {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 1px;
font-size: 16px;
margin: 0px;
padding: 0px;
width: 100%;

}
#navbar ul{
margin: 0px;
padding: 0px;
display: inline;
list-style-type: none;
float: left;
width: 100%
}
#navbar li{
margin: 0px;
padding: 0px;
display: inline;
background-color: #003366;
float: left;
width: 20%;
}
#navbar a:link, #navbar a:visited{
text-decoration: none;
color:#ffffff;
}

#navbar a:hover{
color:#000000;
}