Disappearing div background

Blogger

04-13-2011, 04:32 PM

Thanks for reading this and a further thanks in advance if you can resolve this for me.

My div background (which I made to expand) suddenly disppears when I place another div box (an advertisement) ontop.

Here's the site: http://botheaven.tk/

Here's my index.php code and my css:

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

<head>
<title>Blog.</title>
<link rel="stylesheet" type="text/css" href="ff.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" />

</head>
<body>
<br />
<br />
<div id="container">
<div id="header"></div>
<div id="mid">
<div id="banner"></div>
<div id="buttoncontainer">
<div id="button"><div id="buttontext">Home</div></div>
<div id="button"><div id="buttontext">About</div></div>
<div id="button"><div id="buttontext">Contact</div></div>
<div id="button"><div id="buttontext">Pictures</div></div>
<div id="button"><div id="buttontext">Login/Register</div></div>
</div>
<br />
<br />
<br />
<div id="advcontainer">
<div id="advhead"></div>
<div id="advmid">
<div style="padding-left: 4px" /><script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="advfoot"></div>
</div>
<div id="footer"></div>
</div>
</div>
</body>

body {
font-family:arial;
background-image:url("bg.png");
background-repeat:repeat;
background-attachment:scroll;
margin:0px;
}
#container{
width: 793px;
margin: auto;
}
#header {
background: url(header.png);
width: 793px;
height: 28px;
}
#mid {
background: url(mid.png);
width: 793px;
}
#footer {
background: url(footer.png);
width: 793px;
height: 19px;
}
#button {
background: url(button.png);
width: 155px;
height: 20px;
float: left;
}
#buttontext {
font-family: Arial;
font-size: 12px;
text-align: center;
margin-top: 2px;
}
#buttoncontainer {
margin-left: 10px;
}
#banner {
background: url(banner.png);
width: 787px;
height: 150px;
margin-left: 3px;
}
#advcontainer {
width: 168px;
margin-left: 5px;
float: left;
}
#advhead {
background: url(advhead.png);
width: 168px;
height: 22px;
}
#advmid {
background: url(advmid.png);
width: 168px;
}
#advfoot {
background: url(advfoot.png);
width: 168px;
height: 17px;
}
#maincontainer{
width: 624px;
margin-right: 5px;
float: right;
}
#mainhead {
background: url(mainhead.png);
width: 624px;
height: 18px;
}
#mainmid {
background: url(mainmid.png);
width: 624px;
}
#mainfoot {
background: url(mainfooter.png);
width: 624px;
height: 15px;
}

Thanks again in advance!

Excavator

04-13-2011, 04:42 PM

Hello Blogger,
If you clear your floats, #container will expand to enclose the ad.
Try adding this bit highlighted in red -
#containner {
margin: auto;
width: 793px;
overflow: auto;
}

See this explanation of how overflow: auto; clears your floats (http://www.quirksmode.org/css/clearing.html).

I don't see a background image for that element though.

teedoff

04-13-2011, 04:44 PM

Wow thats alot of divs...lol divitis (http://csscreator.com/divitis)maybe?

Do you have an image of how it looks with the advert you're referring to? ie what disppears.

One more thing I would point out is your use of all the <br /> tags. Margins can be used to add space between elements and ar emuch more semantic and less problematic.

Blogger

04-13-2011, 06:04 PM

Try adding this bit highlighted in red -
#containner {
margin: auto;
width: 793px;
overflow: auto;
}

I added it to my #container in CSS, it worked. But the footer is now sort of unaligned. Could you fix this please?

P.S. the link should work now.

Excavator

04-13-2011, 06:23 PM

You have 793px wide #footer inside 168px wide #advcontainer. Your markup needs a little re-arranging.

Do you really need frames? That is a very outdated method of building websites, not much call for frames anymore. See 11.13/11.14 http://www.htmlhelp.com/faq/html/frames.html

Blogger

04-13-2011, 10:22 PM

Thanks, I've fixed that little footer issue.

I only really learned to use frames; I used old website templates, played with the codes and looked at what happened. Once I saw which each tag did, I could figure out how to string together my own website.

One final issue I need your help with. Before uploading the homepage to my webhost, the advertisement showed up. Now it's disappeared. Could you please help me resolve the issue and talk me through what the problem was? Thank you very much.