I thought I could absolutley position a div under the logo and headstrap divs, but it seems i cannot. Ive tried floating too. I need some help aligning the nav bar with the background image.
All help welcome
thanks
<!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>Colin Essery Carpets</title>
<style type="text/css">
html {
font-family:Helvetica,Arial,sans-serif;
}
body {
margin:0;
padding:0;
font-family:Helvetica,Arial,sans-serif;
text-align: center;
background-image:url(images/bg-body.jpg);
background-repeat:repeat-x;
}
#container {
margin: 0 auto;
padding-top:86px;
width: 801px;
}
#logo {
float:left;
margin:0;
padding:0;
width:328px;
height:102px;
}
#headstrap {
float:left;
width:473px;
height:102px;
}
#navbar {
position:absolute;
top: 188px;
}
img {
border-style: none;
}
/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/
ul#navigation {
width:800px;
list-style:none;
height:42px
}
ul#navigation li {
display:inline
}
ul#navigation li a {
height:42px;
float:left;
text-indent:-9999px;
text-decoration:none
}
ul#navigation li a span {
float:left;
display:block
}
ul#navigation li#navigation-1 a {
width:100px;
background:url(images/navbar.jpg) no-repeat 0px 0
}
ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a:hover {
background-position:0px -42px
}
ul#navigation li#navigation-1 a.current {
background-position:0px 0px -42px
}
ul#navigation li#navigation-2 a {
width:111px;
background:url(images/navbar.jpg) no-repeat -100px 0
}
ul#navigation li#navigation-2 a:active,
ul#navigation li#navigation-2 a:hover {
background-position:-100px -42px
}
ul#navigation li#navigation-2 a.current {
background-position:-100px -100px -42px
}
ul#navigation li#navigation-3 a {
width:91px;
background:url(images/navbar.jpg) no-repeat -211px 0
}
ul#navigation li#navigation-3 a:active,
ul#navigation li#navigation-3 a:hover {
background-position:-211px -42px
}
ul#navigation li#navigation-3 a.current {
background-position:-211px -211px -42px
}
ul#navigation li#navigation-4 a {
width:110px;
background:url(images/navbar.jpg) no-repeat -302px 0
}
ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
background-position:-302px -42px
}
ul#navigation li#navigation-4 a.current {
background-position:-302px -302px -42px
}
ul#navigation li#navigation-5 a {
width:92px;
background:url(images/navbar.jpg) no-repeat -412px 0
}
ul#navigation li#navigation-5 a:active,
ul#navigation li#navigation-5 a:hover {
background-position:-412px -42px
}
ul#navigation li#navigation-5 a.current {
background-position:-412px -412px -42px
}
ul#navigation li#navigation-6 a {
width:102px;
background:url(images/navbar.jpg) no-repeat -504px 0
}
ul#navigation li#navigation-6 a:active,
ul#navigation li#navigation-6 a:hover {
background-position:-504px -42px
}
ul#navigation li#navigation-6 a.current {
background-position:-504px -504px -42px
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<a href="index.php"><img src="images/logo-main.gif" alt="Colin Essery Carpets - North Devon" width="328" height="102" /></a>
</div>
<div id="headstrap">
<img src="images/head-strapline.gif" alt="Colin Essery Carpets - North Devon" width="473" height="102" />
</div>
<div id="navbar">
<ul id="navigation">
<li id="navigation-1"><a href="/index.php" title="Home"><span>Home</span></a></li>
<li id="navigation-2"><a href="/carpets.php" title="Carpets"><span>Carpets</span></a></li>
<li id="navigation-3"><a href="/vinyls.php" title="Vinyls"><span>Vinyls</span></a></li>
<li id="navigation-4"><a href="/services.php" title="Services"><span>Services</span></a></li>
<li id="navigation-5"><a href="/about.php" title="About"><span>About</span></a></li>
<li id="navigation-6"><a href="/contact.php" title="Contact"><span>Contact</span></a></li>
<li id="navigation-7"><a href="#" title="None"><span>None</span></a></li>
</ul>
</div>
</div><!--END CONTAINER DIV -->
</body>
</html>