Hi all,

 

Am looking for some help - Im trying to use CSS. So far, so good (I think)So far Ive managed to put a header / logo with background image and Ive managed to put a nav bar!

 

My prob is on the page it runs down logo then nav bar, but the nav bar isnt inside a div (does it need to be?) and I dont know how to. When I try to put a div under the nav bar for content, it just comes up with a small box that overlaps the nav bar....any idea or help pointer would be really appreciated.

 

Index Code:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="master.css" />

<style type="text/css">a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

}

a:hover {

text-decoration: none;

}

a:active {

text-decoration: none;

}

</style>

 

</head>

 

<body>

 

<div id="logo"></div>

 

<div id="nav">

<ul id="nav">

<li id="nav-home"><a href="#">Home</a></li>

<li id="nav-news"><a href="#">News</a></li>

<li id="nav-profile"><a href="#">Profile</a></li>

<li id="nav-quality"><a href="#">Quality</a></li>

<li id="nav-response"><a href="#">Response</a></li>

<li id="nav-contact"><a href="#">Contact Us</a></li>

</ul>

</div>

 

</body>

</html>

 

CSS:

 

html, body {

margin: 0;

padding: 0;

}

 

 

body {

background-image: url(images/bg.gif);

background-repeat: repeat-x;

}

 

#logo {

height: 100px;

width: 860px;

padding-top: 60px;

margin: auto;

background-image: url(images/logo.png);

background-repeat:no-repeat;

 

}

 

#nav {

padding-top:20px;

width: 860px;

margin: auto;

padding:0;

}

 

#nav li {

display:inline;

padding:0;

margin:0;

}

 

#nav a:link,

#nav a:visited {

color:#999999;

padding:20px 40px 4px 10px;

float:left;

width:auto;

text-decoration:none;

font:bold 1em/1em Arial, Helvetica, sans-serif;

text-shadow: 2px 2px 2px #555;

}

 

Thanks in advance

Gem x

First of all, don't use #nav id style twice; you have used it for the div and then for the ul tag which means that you have nested an 860px wide ul tag inside the 860px wide div. There's no need. You can use a div to enclose a ul tag but in your case it isn't necessary and if you do, use the id just for one of them.

 

I don't see a problem with the logo and nav divs at present; the logo is 160px high in total and the nav sits below it. However, I don't have tour background-images.

 

Divs will normally go to the line below so your next div for content should normally start below the nav (unless you have a negative margin-top). In your case you have floated elements above wich have to be cleared, as floated items are deemed to have no height unless you state a height (which you haven't) so your content div code could be like this:-

 

CSS

#content { background-color: skyblue; width: 860px; margin: auto; clear: both; }

 

Markup:-

 

<body>

 

<div id="logo"></div>

 

<!--<div id="nav">-->

<ul id="nav">

<li id="nav-home"><a href="#">Home</a></li>

<li id="nav-news"><a href="#">News</a></li>

<li id="nav-profile"><a href="#">Profile</a></li>

<li id="nav-quality"><a href="#">Quality</a></li>

<li id="nav-response"><a href="#">Response</a></li>

<li id="nav-contact"><a href="#">Contact Us</a></li>

</ul>

<!--</div>-->

 

<div id="content"><p>Content here.</p></div>

</body>

 

Not stating a height is often a good idea as elements will find their own height, but if there are floated divs, you often have to clear the float with clear: both; in the follwing element.

Thanks alot for your help Wickham.

 

Gem