background doesnt show up

roeyfreak10

02-21-2009, 04:54 AM

so one of my divs names #navigation has a ul in it that i use as a nav bar but for some reason the background doesnt show up the page isnt up yet so the most i can show is the code

html

<!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>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
<div id="header">


</div>

<div id="navigation">
<a href="#">About</a>
<a href="#">Cast</a>
<a href="#">Gallery</a>
<a href="#">Extras</a>
<a href="#">Links</a>
</div>


</div>
</body>
</html>

css

@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
}

body {
background:blue url(../images/bg.jpg) repeat;
font-family: century gothic;
}

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

#header {
height: 200px;
background: url(../images/header1000px.jpg);
}

#navigation {
width: 1000px;
background:#fff url(../images/navbg.jpg) repeat-x;
}
#navigation a{
text-decoration:none;
float:left;
padding:15px;
font-size:16px;
color:#FFFFFF;
}

#navigation a:hover{
padding:15px;
text-decoration:underline;
}

Majoracle

02-21-2009, 06:54 AM

Why are you floating the anchors (<a>)? Anchors are inline elements, you don't need to float them. That's why your #navigation element is giving the illusion that the background isn't showing. It's actually the fact that the height is zero. That's because the container (in this case, #navigation) doesn't acknowledge it's floating content, and appears empty. Try this:

#navigation {
overflow: auto;
width: 1000px;
background:#fff url(../images/navbg.jpg) repeat-x;
}
#navigation a{
display:block;
text-decoration:none;
float:left;
padding:15px;
font-size:16px;
color:#FFFFFF;
}
#navigation a:hover{
padding:15px;
text-decoration:underline;
}

Can't test it because you have no link to test on, but this is a common problem people have, and this usually fixes it.

roeyfreak10

02-21-2009, 07:03 AM

worked perfectly thanks !

roeyfreak10

02-21-2009, 07:40 AM

nvm i got it i forgot that i was using an image as the background :(