Div background won't show [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : Div background won't show

taxgirl

07-12-2006, 06:21 AM

here's the link: http://www.conspiracybrand.com/main3.php

here's the 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>Conspiracy Brand, Inc</title>
<link href="cbinc.css" rel="stylesheet" type="text/css">
<style type="text/css">

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

</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><div class="container" id="container"><div class="leftnav" id="LeftNav"></div>
<div class="toplinks" id="TopLinks"><img src="layout/images/p__01.jpg" alt="Navigation" width="780" height="296" border="0" usemap="#Map">
<map name="Map">
<area shape="poly" coords="0,74,45,35,150,10,182,25,180,35,175,67,151,42,95,5 8,62,61,27,98" href="main.php" alt="Click here to return Home">
<area shape="poly" coords="55,129,73,108,197,84,232,96,230,116,223,128,195,11 1,144,129,108,128,77,157" href="news.php" alt="Click here for the latest News.">
<area shape="poly" coords="153,215,149,190,184,169,234,163,283,152,324,167,32 2,189,313,204,290,185,240,195,190,194,166,226" href="aboutus.php" alt="Click here to learn more About Us.">
<area shape="poly" coords="201,64,203,37,232,24,295,15,351,11,380,28,381,40,3 71,63,338,40,290,53,246,45,218,71" href="store.php" alt="Click here to enter the Store.">
<area shape="poly" coords="267,150,247,114,283,89,334,91,391,82,429,102,429,1 20,417,136,385,118,343,125,298,120" href="conspiracies.php" alt="Click here to read about conspiracies.">
</map>
</div>
<div class="titlebanner" id="TitleBanner"><img src="layout/images/main-banner.jpg" width="606" height="99"></div>
<div class="content" id="Content">
<div class="contenttextbox" id="contenttextbox">main</div>
</div>

<?php include("leftNav.php"); ?></div></td>
</tr>
</table>
</body>
</html>

here's the css:
.toplinks {
position: absolute;
visibility: visible;
height: 296px;
width: 780px;
left: 0px;
top: 0px;
}
.leftnav {
background-color: #000000;
background-image: url('layout/images/p__02.jpg');
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 174px;
left: 0px;
top: 296px;
z-index: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
.content {
background-color: #393220;
background-image: url('layout/images/p__04.jpg');
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 606px;
left: 174px;
top: 395px;
clear: both;
}
.titlebanner {
position: absolute;
visibility: visible;
height: 99px;
width: 606px;
left: 174px;
top: 296px;
}
.contenttextbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
left: 30px;
top: 0px;
width: 541px;
position: absolute;
height: 100%;
text-indent: 10px;
}
.leftnavcontent {
position: absolute;
visibility: visible;
height: 100%;
width: 165px;
left: 5px;
top: 296px;
z-index: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
overflow: visible;
}
.hr {
border: thin solid #440000;
}
.sidedidyouhear {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-variant: normal;
text-transform: uppercase;
font-style: normal;
}
.horizoncenter
{
background-color: transparent;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
overflow: visible;
visibility: visible;
display: block;
}

.contentcenter
{
background-color: transparent;
margin-left: -390px;
position: absolute;
top: 0px;
left: 50%;
width: 780px;
height: 100%;
visibility: visible;
}
.container {
position: relative;
width: 780px;
left: auto;
top: 0px;
right: auto;
height:100%;
}

The background won't show up in the center or on the leftside navagation. I believe it's because of the nested divs but how do I work around this???

Please, please, please, please help!!

Thank you!

~beth.

taxgirl

07-12-2006, 06:51 AM

sorry, I forgot to include this:

here's the html for the php include:
<div class="leftnavcontent" id="leftNavcontent">
<table border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="layout/side/featured.jpg" alt="Featured Item" width="165" height="23"></td>
</tr>
<tr>
<td><img src="images/featured/freedom_haters.png" alt="Freedom Haters" width="165" height="175"></td>
</tr>
</table></td>
</tr>

<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="layout/side/didyouhear.jpg" alt="Did you hear?" width="165" height="22"></td>
</tr>
<tr>
<td class="sidedidyouhear">enter crazy conspiracy theory of the month or some random update or whatever you want. </td>
</tr>
</table></td>
</tr>
</table>
</div>

bourdelson

07-12-2006, 02:39 PM

Try removing the quote marks [as in change ('layout/images/p__02.jpg') to (layout/images/p__02.jpg), and alter the other one in the same way] and see if that helps.

J to the izzosh

07-12-2006, 08:52 PM

Actually, the background is showing just fine. The problem is your element of the class "container": it has no height. Though you've assigned it a height of 100%, when you are using a DTD (document type definition) it puts a browser in standards-compliant mode. According to the standards, an element's height is relative to that of its parent element when using relative units. Also, in standards mode, the <html> and <body> elements have a height of 'auto', or, "as much as it needs". It would normally fit to its content. You have a bit of a catch-22 situation where, because the "container" class has no height, the body doesn't have to stretch to fit it, and so, has no height, and so, the "container" class has no height, etc...

Because the "container" class is the parent element of "leftnav" and has no height, "leftnav" also has no height since it is set to 100% of its parent's height. Because it has no height, there is no room to display your background image.

The solution? Give the body some height. Set your body margin to 0 (not "0 auto") so it will fit inside the <html> element properly, and give both <body> and <html> a height of 100%. This works, because the parent "element" of <html> is the browser window, so it becomes 100% of the height of the window (which does have a height), giving everything else a height.

You'll notice your background now, and that it stretches down pretty far. This is because of the extra padding you've put above it. You're going to have to do some tweaking to get rid of that. You could try correcting it with a negative margin and adjusting the position of the background inside the element with the backround-position property to make it visible.

As a side note, a lot of your elements seem to have IDs that are duplicates of your classes, or just alterations of their casing. Unless you are doing this for some specific reason, you should choose one or the other. Your current method is just redundant, complicates your HTML, and since you don't have any IDs in your CSS, the IDs in your HTML are doing very little. Classes should be used in cases where you need multiple iterations of the same style on a page. IDs should be used for unique elements.

Hope that helps.