CSS background-color property for my DIV not working

janie3092 · 07-23-2012, 09:29 PM

Hello, there is a problem with my coding that I can't seem to solve. I'm working on the header of my site at the moment, and one of the div's background-color won't show up. I've looked it over and can't find any errors.

INDEX

Code:

<html>
<head>

<title>The Bull's Eye</title>

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

</head>

<body>

<div id="maincontainer">
<img src="http://www.dbhsbullseye.com/photos/BANNER.png" id="banner">

<div id="container">

<?php
include ('header.php');
?>

feature content

</div>
</div>

</body>
</html>

the HEADER.php

Code:

<div id="basicnav">
<a href="/">home</a> <b>//</b> <a href="/staff.php">staff</a> <b>//</b> <a href="/advice.php">ask mama brahma</a> <b>//</b> <a href="/about.php">about</a>
</div>

<div id="subtitle">
Diamond Bar High School Student Newspaper
</div>



<div id="sectionnav">

<a href="/news">news</a>
<a href="/sports">sports</a>
<a href="/opinion">opinion</a>
<a href="/feature">feature</a>
<a href="/ae">a&e</a>
<a href="/theme">theme</a>

</div>

the STYLE.CSS

Code:

/*universal css*/

body {
color:#000;
font-family: Times New Roman;
font-size:12pt;
overflow-x:hidden;
}


#maincontainer {
margin-left: auto;
margin-right: auto;
margin-top:0px;
border-bottom:50px solid #fff;
width:740px;
}

#container {
z-index:4795;
margin-left:25px;
margin-top:-573px;
}


a, a:visited {
font-style:none;
text-decoration:none;
}

/*this is because the image is too large and goes off center.
i adjusted the margin left so that the image is properly centered without disrupting the
auto margins of the maincontainer*/

#banner {
margin-left:-270px;
}

/*this is the css for the html in the header php file*/


#basicnav {
position:absolute;
float:left;
color: #767676;
font-family:tahoma, arial;
font-size:14pt;
text-transform:uppercase;
letter-spacing:-2px;
border-right:1px solid #000;
padding-right:8px;
}

#basicnav a {
color: #767676;
}

#basicnav b {
font-weight:none;
margin-left:3px;
margin-right:3px;
}



#subtitle {
text-align:right;
margin-right:-45px;
letter-spacing:-1px;
font-family:georgia;
font-size:15pt;
color:#000;
font-style:italic;
}



#sectionnav {
margin-top:12px;
background-color:#000;
color:#fff;
font-family:trebuchet ms;
font-size:16pt;
text-align:center;
padding-top:3px;
padding-bottom:3px;
padding-left:7px;
padding-right:7px;
text-transform:uppercase;
letter-spacing:-1px;
word-spacing:25px;
}

#sectionnav a {
color:#fff;
}

the div im havnig trouble with is #sectionnav. As you can see, I've given in the property background-color:#000; for a black background but it will not show up. Thank you so much.

tempz · 07-23-2012, 10:25 PM

Try this, your css scripting needs some work but I changed it all around to make a up to twenth century standard :P

CSS:

Code:

/*universal css*/

body {
color:#000;
font-family: Times New Roman;
font-size:12pt;
overflow-x:hidden;
background-image: url('http://www.dbhsbullseye.com/photos/BANNER.png');
z-index:-99;
}


#maincontainer {
margin-left: auto;
margin-right: auto;
margin-top:0px;
width:740px;
position:relative;
left:250px;
top:180px;
right:0;
bottom:0;

}

#container {
z-index:4795;
}


a, a:visited {
font-style:none;
text-decoration:none;
}

/*this is because the image is too large and goes off center.
i adjusted the margin left so that the image is properly centered without disrupting the
auto margins of the maincontainer*/

#banner {

z-index:-9999;
}

/*this is the css for the html in the header php file*/


#basicnav {
float:left;
color: #767676;
font-family:tahoma, arial;
font-size:14pt;
text-transform:uppercase;
letter-spacing:-2px;
padding-right:8px;
float:left;
display:inline;
align:center;
}
#basicnav a:hover { color:#000}

#basicnav a {
color: #767676;
}

#basicnav b {
font-weight:none;
margin-left:3px;
margin-right:3px;
}



#subtitle {
text-align:right;
/*margin-right:-45px;*/
letter-spacing:-1px;
font-family:georgia;
font-size:12px;
color:#000;
font-style:italic;
display:inline;
float:left;
position:relative;
top:12px;
left:-350px;


}



#sectionnav {
margin-top:12px;
background-color:#000;
color:#fff;
font-family:trebuchet ms;
font-size:16pt;
text-align:center;
padding-top:3px;
padding-bottom:3px;
padding-left:7px;
padding-right:7px;
text-transform:uppercase;
letter-spacing:-1px;
word-spacing:25px;
text-deceration:none;
list-style-type:none;
float:left;
display:inline;
position:relative;

}

#sectionnav a {
color:#fff;
}

.content {display:inline; float:left; position:relative; left:-515px;; top:70px; }

INDEX - [Remember - If including php files name the file "dot.php" so Index.php"]

Code:

<html>
<head>

<title>The Bull's Eye</title>

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

</head>

<body>

<div id="maincontainer">
	<div id="container">
		<?php include 'header.php'; ?>
	<div class="content">
		feature content
	</div>
	</div>
</div>

</body>
</html>

header.php

Code:

<div id="basicnav">
<a href="/">home</a> <b>//</b> <a href="/staff.php">staff</a> <b>//</b> <a href="/advice.php">ask mama brahma</a> <b>//</b> <a href="/about.php">about</a>
</div>

<div id="subtitle">
<p>Diamond Bar High School Student Newspaper</p>
</div>



<div id="sectionnav">
	<a href="/news">news</a>
	<a href="/sports">sports</a>
	<a href="/opinion">opinion</a>
	<a href="/feature">feature</a>
	<a href="/ae">a&e</a>
	<a href="/theme">theme</a>
</div>

sunfighter · 07-24-2012, 02:37 PM

I was going to ask what browsers have been used that had this problem. When the origanal code is entered in my editor the output works with no problem. #sectionnav has a black back ground with white lettering. So problem did not occur here.

Also this my contribute to a browser problem:
"You must declare a doc type!

Code:

<!DOCTYPE html>
<html>
<head>

works if you want HTML5.
Or

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>

But you need one of them.
---------------------------

I see no reason to make the header file a php. It contains none and works perfectly fine as header.html.