Header & Navigation Problems

programming web dev
1

Been learning how to do web layouts with css, goodbye tables, and I’ve ran into a little jam. I’m trying to get my header, which will be an image later on, to sit flush on top of the menu.

Here goes the css code:


html, body { 
margin: 0px;
padding: 0px;
}

body { 
text-align: center;
}

#wrapper { 
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
width: 765px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#header{
background-color: red;
width: 767px;
height: 145px;

margin: 0px;
}

#container { 
background-color: #D0D2C1;
color: #333;
clear: both;
margin: 0px;
padding-top: 2.2em;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
width: 765px;
float: left;
border: 1px solid #C0C0C0;
display: block;
}

#content { 
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #C0C0C0;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin: 0px;
width: auto;
height: auto; 
}

#navigation { 
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
position: relative;
height: 50px;
display: block;
width: auto;
}

ul#primary { 
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 658px; 
}

ul#primary li { 
display: inline;
list-style: none; 
}

ul#primary a,ul#primary a.active { 
width: 10em;
display: block;
float: left;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 11px;
text-decoration: none;
color: #333;
letter-spacing: .1em;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
padding-top: 4px;
padding-right: 0;
padding-bottom: 4px;
padding-left: 0; 
}

ul#primary a.active,ul#primary a.active:hover { 
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
background: #D0D2C1;
color: #333;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px; 
}

ul#primary a { 
background: #e8e9e1;
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px; 
}

ul#primary a:hover { 
margin-top: 0px;
border-color: #c0c0c0;
background: #F1F1ED;
color: #333;
padding-bottom: 3px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px; 
}

ul#secondary { 
position: absolute;
margin: 0;
padding: 0;
bottom: -1.6em;
left: 1px;
width: 100%; 
}

ul#secondary li a { 
width: auto;
display: block;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right: 1px dotted #c0c0c0;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #D0D2C1;
text-decoration: none; 
}

ul#secondary li a:hover { 
color: #333;
background-color: #D0D2C1;
border-top: none;
border-right: 1px dotted #c0c0c0;
border-bottom: none;
border-left: none;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px; 
}

ul#secondary li a:active { 
color: #000;
background-color: #D0D2C1; 
}

ul#secondary li:last-child a { 
border: none; 
}

#footer { 
padding: 5px 0px 5px 0px;
margin: 0px;
font-family: tahoma, verdana, sans-serif;
text-align: center;
float: left;
font-size: 11px;
color: #333333;
background-color: #D0D2C1;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
width: 100%;
}

And here goes the html code:


<!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-Type" content="text/html; charset=utf-8" />
<title>RDMS Computers</title>

<style type="text/css">
@import url(rdmscss.css);
</style>

</head>

<body>

<div id="wrapper"> 
<div id="header"></div>
<div id="navigation"> 
		
        <ul id="primary"> 
			<li><a href="index.html" class="active">home</a></li>
			<li><a href="services.html">services</a></li>
			<li><a href="aboutus.html">about us</a></li>
			<li><a href="contactus.html">contact us</a></li> 
		</ul>
        
	</div>
    
	<div id="container"> 
    
		<div id="content">
		</div>
        
	</div>
    
    <div id="footer">copyright &copy; 2007 rdms computers. all rights reserved.</div>
    
</div>

</body>
</html>

I tried using the float and different values with no luck.

Thank you,