www.webdeveloper.com
Results 1 to 7 of 7

Thread: Gap in Background

  1. #1
    Join Date
    May 2006
    Location
    Manchester England
    Posts
    36

    Gap in Background

    Im doing the example from chapter 8 of sitePoints css utopia and ive come across an effect that i just cant get my head around.

    I have a main div that contains all the main content and the sidebar for the page, and it has no padding set.

    Inside the main div is the content div that holds only the content and not the sidebar- also with no padding or top margins.

    Directly inside this div is a "mainfeature" div that acts as a "blockbox",contianing the initial H2 header and a couple of paragraphs - also with no padding or margins set.

    My question is---Why, when i apply a backround colour rule (with css) to the mainfeature div, does that background colour not extend to the top of the main div. After all i have no padding set on either the main or content divs.

    Please note that i know how to fix this, but that is not what im asking. Im more interested in finding out what is going on here (this is why ive commented out the css that fixes the problem.

    Thanx in advance.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<title>Footbag Freaks</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	
    <style type="text/css"> 
    	 
      body {
          margin:0; 
    	  padding:0;
    	  background-color:#050845;
    	  color:white;
    	  background-image:url(shared/footbag_freaks_images/bg.jpg);
    	  background-repeat:repeat-x;
    	  font: small Arial, Helvetica, Verdana, sans-serif;
    	  }
    	  
       #wrapper {
           background-color:#fdf8f2;
    	   color:black;
    	   margin:30px 40px 30px 40px;
    	   padding:10px;
    	   }
    	   
      #header-bottom {
           border-top: 1px solid #b9d2ef;
    	   border-bottom: 1px solid #b9d2ef;
    	   }
    	   
       #header-bottom ul {
            margin:0;
    		padding:0;
    		padding:0 30px 0 0;
    		text-align:right;
    		}
    	   
       #header-bottom li {
            display:inline;
    		background-color: #fdf8f2;
    		color: #050845;
    		}
    		
       #header-bottom a:link, #header-bottom a:visited {
            text-decoration:none;
    		background-color: #fdf8f2;
    		color: #050845;
    		}
    		
       #tagline {
            font-weight: bold;
    		background-color: #fdf8f2;
    		color:#050845;
    		font-style: italic;
    		margin:0;
    		padding: 0 0 0 20px;
    		width:300px;
    		float:left;
    		}
    		
        #ball {
    	    position: absolute;
    		top:110px;
    		right:55px;
    		}
    		
        #main {
    	    margin-top:10px;
    		background-color:red;
    		}
    		
    	#content {
    	     margin: 0 240px 0 0;
    		 border:1px solid #b9d2e3;
    		 background-color:lightblue;
    		 color:black;
    		 }
    		 
    	#mainfeature{
    	   /* background-image: url(shared/footbag_freaks_images/mainimg.jpg);
    		 background-repeat:no-repeat;*/
    		 background-color: #112236;
    		 color:white;
    		/* padding: 2em 2em 1em 200px;*/
    		 }
    		 
    	
    	#mainfeature h2{
    	     /*margin:0;*/
    		 font-weight:normal;
    		 font-size:140%;
    		 color:white;
    		 }
    	  
    	
    
    	
    	
    </style>
    	
    </head>
    
    <body>
     
     <div id="wrapper">
     
      <div id="header">
      <img src="shared/footbag_freaks_images/logo.gif" alt="Footbag Freaks" height="77" width="203" />
       <div id="header-bottom">
        <p id="tagline">The Home of the Hack</p>
    	<ul>
    	 <li><a href="">Contact Us</a> | </li>
    	 <li><a href="">About Us</a> | </li>
    	 <li><a href="">Privacy Policy</a> | </li>
    	 <li><a href="">Sitemap</a></li>
    	</ul>
    	<img src="shared/footbag_freaks_images/header-ball.gif" height="24" width="20" alt="" id="ball" />
    	</div> <!--End Header-Bottom-->
      </div>  <!--End Header-->
      
     <div id="main">
     
      <div id="content">
      
       <div id="mainfeature">
        <h2>Simon Says</h2>
    	<p>Simon Mackie tells us how a change has given him new moves and a new
    	   outlook as the new season approaches.</p>
    	<p><a href="">Read More</a></p>
       </div>                        <!--End Mainfeature-->
     
    	<h2>Recent Features</h2>
    	<ul>
    	   <li>
    	      <h3>Head for the Hills: Is Altitude Training the Answer?</h3>
    		  <p>Lachlan 'Super Toe' Donald</p>
    		  <p>fjdhh hhrywk cnjde fjfk  jue e ssnfjjg ffkkdje ddjdg fj y llssbfgdh heotvals gdksmrbt 
    		     ejegssl nfrhfd kek ekkfu ttjse, rkfirkel rhjesmf rme</p>
    		  <p><a href="">Full Story</a></p>
    	   </li>
    	   
    	   <li>
    	      <h3>Hack up the Place: Freestylin' Super Tips</h3>
    		  <p>Jules 'Pony King' Szemere</p>
    	      <p>hujgff hjkkunb jdesjbvtoo llfdcvbtsdaweojgfbv lkdsnhctdfaraldksugvbqpic
    		     hyt fredf fr tghyuj kkijgf ftrgd ghyj llokgtsbbg </p>
    		  <p><a href="">Full Story</a></p>
    	   </li>
    	   
    	   <li>
    	      <h3>The Complete Black Hat Hackers Survival Guide</h3>
    		  <p>Mark 'Steel Tip' Harbottle</p>
    		  <p>hdys jsurn ffkie kaalld jjrjdn kkd rhht ksbgk dhhryys ksgnhftd kks dggr hhr r rrjd haaie
    		     hhedj</p>
    		  <p><a href="">Full Story</a></p>
    	   </li>
    	   
    	   <li>
    	      <h3>Five Tricks You Didnt Even Know You Knew</h3>
    		  <p>Simon 'Mack Daddy' Mackie</p>
    		  <p>dghys flgkks djfurnncd ddmf ddkswkf dskfnnr d sjjff dnsjjt dmmck dkkrnt  djjss rrr
    		     ehfjjdnsjj pttie smmf cdjje dkk kslsa  ff fm  k</p>
    		  <p><a href="">Full Story</a></p>
    	   </li>
    	 </ul>
      </div>     <!--End Content-->
      
      <div id="sidebar">
        <h3>Site Search</h3>
    	<form method="post" action="" id="searchform">
    	  <div>
    	  <label for="keywords">Keywords</label>:
    	  <input type="text" name="keywords" id="keywords" />
          </div>
    	  <div>
    	  <input type="submit" name="btnSearch" id="btnSearch" />
    	  </div>
    	</form>
    	
    	<h3>Coming Events</h3>
    	<ul>
    	  <li>10 April 06 -<br /><a href="">Seattle Zone Qualifier</a></li>
    	  <li>13 April 06 -<br /><a href="">World Cup - Round 8</a></li>
    	  <li>21 April 06 -<br /><a href="">FootbagOOM 05 - NY</a></li>
    	  <li>28 April 06 -<br /><a href="">WFPA AGM - Hong Kong</a></li>
    	  <li>3 May 06 -<br /><a href="">World Cup - Round 9</a></li>
    	</ul>
    	
    	<h3>Move of the Month</h3>
    	<h4>The Outer Stall</h4>
    	<p>jdh  nwnn duilaa js htmssk jsjrrnnw ppeiisn ffkk a ddorke dksuur dksmmak ddlk
    	   hrrmeeussmf kkrla mmreds ddmmrot rkfmdds</p>
    	<p><a href="">More</a></p>
      </div>
    	     <!--End Sidebar-->
    </div>                    <!--End Main-->	 
       
    </div>   <!--Wrapper Div-->
    </body>
    </html>

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    <div> is short for division. Each div divides the page into a block. The styles/attributes you set for each block will only apply to that block and its contents: whether text or more divs. The formatting will not apply to divs outside that block.

    http://www.w3.org/TR/REC-CSS2/box.html

  3. #3
    Join Date
    May 2006
    Location
    Manchester England
    Posts
    36

    thanx

    I know what div is short for and i know about css. If you look at the code you will see that the divs in question are nested, and their tops should all be aligned becouse there is no padding or margins applied to any of them. This means that the background image applied to the mainfeature div should touch the top of both the content and main divs (according to the css box model)..

    thanx for the reply anyway !

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    You've not set margins for the div in question:
    Code:
    #mainfeature{
    	   /* background-image: url(shared/footbag_freaks_images/mainimg.jpg);
    		 background-repeat:no-repeat;*/
    		 background-color: #112236;
    		 color:white;
    		/* padding: 2em 2em 1em 200px;*/
    		 }
    The lack of margins will cause some browsers to inject some space between divs.

  5. #5
    Join Date
    May 2006
    Location
    Manchester England
    Posts
    36

    hello

    I have tried setting all 3 of the divs margins to zero and it still doesnt work. It does work if you apply a rule to all elements though ( *{margin:0} ).
    However, i want to know why the boxes dont align even when the 3 divs margins are set to zero individualy.

    as i mentioned before--i know how to fix it, but i dont know why the box model is not being implemented properly

    Thanx

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Because the margin-top on the h2 is shoving the containing div down.

  7. #7
    Join Date
    May 2006
    Location
    Manchester England
    Posts
    36

    cracked

    Cheers ray326, I overlooked the fact that margins collapse (overlap) unless padding or borders are set on the containing div.

    Thanx all

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles