0

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>
2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by challarao
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.