Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Disappearing div background

    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:

    Code:
    <!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>
    Code:
    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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Blogger,
    If you clear your floats, #container will expand to enclose the ad.
    Try adding this bit highlighted in red -
    Code:
    #containner {
    margin: auto;
    width: 793px;
    overflow: auto;
    }
    See this explanation of how overflow: auto; clears your floats.


    I don't see a background image for that element though.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Blogger (04-13-2011)

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Wow thats alot of divs...lol 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.
    Teed

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Try adding this bit highlighted in red -
    Code:
    #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.
    Last edited by Blogger; 04-13-2011 at 06:08 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Blogger (04-13-2011)

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Blogger; 04-13-2011 at 10:25 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •