css help

#1 luke1

Dedicated Member

Group: Members
Posts: 169
Joined: 05-June 08
Reputation: 0
Gender:Male
Location:Chorley, Lancashire
Experience:Intermediate
Area of Expertise:Designer

Posted 02 May 2009 - 07:37 PM

hi guys listen got a problem my nav bar wont meet the bottom of my header.

image below

Posted Image

and heres the css code i have written, can anyone help me and show me im going wrong.

body{
	background: black;
	font-family: helvetica, arial, "sans serif";
	color: grey;
	text-align: center;
}

#container{
	width: 900px;
	margin: 0px auto;
}

#header{
	height: 150px;
	background: url(photoshop/Bannercopy.jpg) no-repeat;
}

#content{
	float: right;
	width: 400px;
}

#nav{
	height: 45px;
	width: 900px;
	background: url(photoshop/navcopy.jpg) no-repeat;
}

#nav ul li{
	
	display: inline;
}

#2 ElanMan

In, out, shake it all about...

Group: Members
Posts: 3,291
Joined: 11-March 08
Reputation: 53
Gender:Male
Location:Darlington
Experience:Nothing
Area of Expertise:Nothing

Posted 02 May 2009 - 07:39 PM

Try using a simple reset at the top of your css

* {
margin:0;
padding:0;
}

Some of your html would help too

#3 luke1

Dedicated Member

Group: Members
Posts: 169
Joined: 05-June 08
Reputation: 0
Gender:Male
Location:Chorley, Lancashire
Experience:Intermediate
Area of Expertise:Designer

Posted 02 May 2009 - 07:41 PM

Thankyou very much

heres my html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<LINK href="htmltemp.css" rel="stylesheet" type="text/css">

</head>
<body>




<div id="container">

		<div id="header">
			</div>
		
		
		<div id="nav">
			<ul>
				<li>Home</li>
				<li>Server</li>
				<li>Downloads</li>
				<li>Admin</li>
			</ul>
		</div>

	
	
	<div id="content">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a 	galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
				
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div>
	
	
</div>	
</body>
</html>

#4 ElanMan

In, out, shake it all about...

Group: Members
Posts: 3,291
Joined: 11-March 08
Reputation: 53
Gender:Male
Location:Darlington
Experience:Nothing
Area of Expertise:Nothing

Posted 02 May 2009 - 07:47 PM

Have you tried the reset?

#5 Sam G

Forum Newcomer

Group: Members
Posts: 1,860
Joined: 06-March 09
Reputation: 53
Gender:Male
Location:Dreamland
Experience:Advanced
Area of Expertise:Designer/Coder

Posted 02 May 2009 - 09:56 PM

Set the margin of your nav bar to 0px.

#6 RoyReed

Forum Newcomer

Group: Members
Posts: 29
Joined: 11-March 09
Reputation: 0
Location:London, UK
Experience:Advanced
Area of Expertise:Web Designer

Posted 03 May 2009 - 10:46 AM

Set the margin of the <ul> inside your nav bar to 0:

#nav ul {
	margin: 0;
}

#7 User54

Advanced Member

Group: Members
Posts: 250
Joined: 18-November 08
Reputation: 0
Gender:Male
Location:UK
Experience:Advanced
Area of Expertise:Designer/Coder

Posted 04 May 2009 - 08:24 AM

My first question is:

How big is your header image? is it 150px in height?

Are you using transparent PNGs?

If so did you leave any space on the image?

A link to a site is so much more helpful.