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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Background does not all the way down

    The background color does not cover the rest of the images. There is just white where there should be green.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>   
    <head>
    <title>Gallery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"/>
     
    
    <!-- The external style sheets -->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    
    <style type="text/css">
    div.img
      {
      margin:2px;
      border:1px solid #ffffff;
      height:auto;
      width:auto;
      float:left;
      text-align:center;
      }
    div.img img
      {
      display:inline;
      margin:2px;
      border:1px solid #ffffff;
      }
    
    div.description
      {
      text-align:center;
      font-weight:normal;
      width:120px;
      margin:2px;
      }
      
     
     
     
    #line2
    {
    clear : left;
    }
    
    
    
    
     
     
    
     
    
    
    </style>
    
    <meta name="keywords" content="landscape maintenance, gardening, kent, capability berwick">
    <meta name="description" content="Capability Berwick - Landscape Maintenance">
    <meta name="author" content="Bradley Berwick">
    </head>
    
    
    <body>
    
    <div id="top">
    	<div id="header">
    		<h1>
    			Capability Berwick
    		</h1>
    	</div>
    	
    	<div id="topnav">
    		<ul>
    			<li><a href="index.html" > Home </a>
    			<li><a href="services.html" >Services</a>
    			<li><a href="gallery.html" ><span class="currentpage">Gallery</span></a>
    			<li><a href="contact.html" >Contact Us</a>
    
    		</ul>
    	</div>
    	
    </div>
    
    <div id="content">
    		<h2>
    			Gallery
    		</h2>
    	
    
    	
    
    <div class="img">
      
      <img src="test.jpg" alt="Block Paving" width="110" height="100" />
      </a>
      <div class="description">Add a description of the image here</div>
    </div>
    <div class="img">
     
      <img src="test.jpg" alt="Brick Wall" width="110" height="100" />
      </a>
      <div class="description">Add a description of the image here</div>
    </div>
    <div class="img">
     
      <img src="test.jpg" alt="Wood decking" width="110" height="100" />
      </a>
      <div class="description">Add a description of the image here</div>
    </div>
    <div class="img">
      
      <img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
      </a>
      <div class="description">Add a description of the image here</div>
    </div>
    <div class="img">
      
      <img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
      </a>
      <div class="description">Add a description of the image here</div>
    </div>
    
    <div id="line2">
    <div class="img">
      
      <img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
      </a>
      <div class="description">Add a description of the image here</div>
    </div>
    <div class="img">
      
      <img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
      </a>
      <div class="description">Add a description of the image here</div>
    </div>
    <div class="img">
      
      <img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
      </a>
      <div class="description">Add a description of the image here</div>
    </div>
    <div class="img">
      
      <img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
      </a>
      <div class="description">Add a description of the image here</div>
    </div>
    <div class="img">
      
      <img src="test.jpg" alt="Garden Clearance" width="110" height="100" />
      </a>
      <div class="description">Add a description of the image here</div>
    </div>
    </div>
    </div>
    
    
    	<div id="footer">
        <div>Last updated on 28th Oct 2011<br>   
           Maintained by <a href="mailto:berwick_bradley@mail.com">
           Bradley Berwick</a>
        </div>
        </div>
    
    	
    
    </body>
    </html>
    Code:
    #top
    {
    	margin: 0;
    	background: #fff;
    }
    
    #header
    {
    	background: #7A991A;
    	padding: 20px;
    }
    
    #header h1 
    { 
    margin: 0; color: #FFFFFF; font-family:"Broadway"; font-size:40px; 
    }
    
    
    #topnav ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    
    #topnav li
    {
    float:left;
    width: 25%;
    }
    
    #topnav a {
        background-color: #98BF21;
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        padding: 5px 0;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        width: 100%;
    }
    
    #topnav a:hover
    {
    background-color:#7A991A;
    }
    
    
    
    .currentpage 
    {
    font-style:italic;
    }
    
    
    
    #content
    {
    	clear: left;
    	padding: 20px;
    	background-color:#7A991A;
    }
    
    #content h2
    {
    	color: #000;
    	font-size: 160%;
    	margin: 0 0 .5em;
    }
    
    
    
    #footer
    {
    	background: #98bf21;
    	text-align: right ; 
    	padding: 0;
    	height: 70px;
    	clear: both;
    	
    }
    
    #footer div
    {
    	font-style: italic;
    	padding: 15px 5px 0px 5px;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Hello bradz1993,
    You need to clear the floats in #content.
    Try this -
    Code:
    #content
    {
    	clear: left;
    	padding: 20px;
    	background-color:#7A991A;
    overflow: auto;
    }
    See this explanation of how overflow: auto; clears your floats.
    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

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, work properly now


  •  

    Posting Permissions

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