...

View Full Version : Disappearing div background



Blogger
04-13-2011, 05: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"><!--
google_ad_client = "ca-pub-5750488044801544";
/* blogadvertisement */
google_ad_slot = "1527964440";
google_ad_width = 160;
google_ad_height = 600;
//-->
</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, 05: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, 05: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, 07: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, 07: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, 11: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum