I’m working on a new project in which I want to make a navigation bar with CSS. So far it’s going very well and I’d say I’m ok with CSS but getting a lot better. I’m able to understand how to manipulate the menu items for the most part, but I’m struggling with making it the correct size as a whole. I’d like it to be 815 px across the web page but right now it’s a bit longer than that.
Here’s my CSS:
#container
{
height: 100%;
width: 815px;
position: relative;
text-align: left;
margin-top: -7px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header
{
border: 0px;
height: 135px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#navbar
{
background-color: #66B3FF;
}
#nav
{
width: 815px;
border: 0px;
margin-bottom: -1px;
padding: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
#nav a /*LINKS IN ALL MENUES*/
{
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 1em;
font-weight: bold;
}
#nav li
{
background-color: #66B3FF;
}
#nav li li a /*SUBMENU BOXES*/
{
background-color: #66B3FF;
display: block;
font-weight: normal;
font-size: .9em;
color: #000000;
padding: 0.2em 10px;
}
#nav li li a:hover /*SUBMENU BOX ITEMS*/
{
background-color: #ffffff;
padding: .2em 5px;
border: 5px solid #cc66cc;
border-width: 0 5px;
color: #99cc33;
}
ul /*SUBMENU*/
{
padding: 0;
margin: 0;
list-style: none;
}
li /*MENU*/
{
float: left;
position: relative;
width: 135.4px;
text-align: center;
}
li ul /*SUBMENUS*/
{
border-left: solid 1px;
border-right: solid 1px;
border-bottom: solid 1px;
display: none;
position: absolute;
top: 1em;
left: 0;
text-align: center;
}
li > ul /*SUBMENUS*/
{
top: auto;
left: auto;
}
li:hover ul, li.over ul /*HOVER OVER MENU*/
{
display: block;
}
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes*;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
#photos
{
height: 550px;
width: 815px;
padding-bottom: 0px;
padding-top: 0px;
margin-top: 20px;
}
#footer
{
background-color: #ffffff;
margin: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#footer p
{
margin: 0;
padding: 2px 0;
font-size:0.7em;
font-weight:bold;
color:#000000;
}
#footer a
{
text-decoration:none;
color:#000000;
}
.h1
{
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
}
a
{
text-decoration:none
}
body {
background-image: url(images/background_image_2.png);
background-repeat: repeat-y;
background-position: center;
}
.clearfloat
{
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
my html:
<body>
<div id="container">
<div id="header">
<a href=http://www.blahblahblah.com><img src="images/new_header.png" border="0" /></a>
</div><!--HEADER-->
<div id="navbar">
<ul id="nav">
<li>
<div><a href="">Home</a></div>
</li>
<li>
<div><a href="">Products</a></div>
<ul>
<li><a href="">Consumer</a></li>
<li><a href="">Professional</a></li>
</ul>
</li>
<li>
<div><a href="">Services</a></div>
<ul>
<li><a href="">Private Labeling</a></li>
<li><a href="">Custom Packaging</a></li>
</ul>
</li>
<li>
<div><a href="">Environment</a></div>
</li>
<li>
<div><a href="">MSDS</a></div>
</li>
<li>
<div><a href="">About Us</a></div>
<ul>
<li><a href="">History</a></li>
<li><a href="">Location</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">News</a></li>
<li><a href="">Quality</a></li>
</ul>
</li>
</ul>
</div>
<div id="photos">FLASH</div><!--PHOTOS-->
<div id="footer"> </div><!--FOOTER-->
</div><!--CONTAINER-->
</body>
</html>
Thanks!