SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    609
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container BG not working right.

    Ok yall, I have been messing with this for hrs and cannot seem to get it working.

    I have a BG image that I need to be in the div container and it is above everything else.

    Code:
    http://allfoodequip.com/quote/2/
    It should look like this. (I changed colors to see if I was missing something)

    Code:
    http://i44.tinypic.com/vcebc.png
    Any help would be greatly appreciate.

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    
    
        <div id="container">
        &nbsp;
        <div id="header"></div><!--Closes header-->
    <div id="topbar"></div><!--Closes topbar-->
                 <div class="title">
                       <p class="hello">Hello Mr. Squiggles</p>
                       <p class="hello2">We are please to offer the following for your consideration:</p>
                   </div><!--Closes title--> 
    
              <div class="product">Recirculating Oven</div><!--Closes product-->
    
    
             <div id="quote">
    
                 <div class="fields">
    
                    <p>Quote # :</p>
                    <p>Item :</p>
                    <p>Inventory :</p>
                    <p>Category :</p>
                    <p>Manufacturer :</p>
                    <p>Model :</p>
                    <p>Condition :</p>
                    <p>Deminsions :</p>
                    <p>Description :</p>
    
                 </div><!--Closes fields-->
    
    
                 <div id="price">
                    <p class="price">Skid Price :----------</p>
                    <p class="price">Unit Price :----------</p>
            <img src="images/divider.png" width="375" height="7" />
                    <p class="price2">TOTAL PRICE :----</p>
    <p></p>
    <p></p>
    <p></p>
    
                       <div id="link">
                          <p class="link">Product Link</p>
                          <p class="link2">http://www.allfoodequip.com</p>
                       </div><!--Closes link-->
    
                </div><!--Closes price-->
         </div><!--Closes quote-->
    
    <div id="divider"></div><!--Closes divider-->
    
    <div id="pics">
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <br />
       <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" />
      <img src="images/QUOTE_11.png" width="120" height="125" /> 
    </div><!--Closes pics-->
    
    <div id="divider"></div><!--Closes divider-->
    
    <div id="contact">
               <p class="heading">How to contact us:</p>
          <div class="contactL">
                 <p class="heading2">Visit us Online: www.allfoodequip.com</p>
                 <p class="heading2">Contact: Dino Roberts</p>
                 <p class="heading2">Direct Line: 615-788-2953</p>
                 <p class="heading2">Email: dino@allfoodequip.com</p>
          </div><!--Closes conactL-->
          
          <div class="contactR">
                <p class="heading2">Visit us Online: www.allfoodequip.com</p>
                <p class="heading2">Contact: Dino Roberts</p>
                <p class="heading2">Direct Line: 615-788-2953</p>
                <p class="heading2">Email: dino@allfoodequip.com</p>
         </div><!--Closes contact-->
    </div><!--Closes contact-->
    
    <div id="footer"></div><!--Closes footer-->
    </div><!--Closes container-->
    
    
    
    </body>
    </html>
    CSS
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    
    
    
    #container {
    	background-image:url(images/bg.png);
    	width:980px;
    	height:auto;
    	margin: 0 auto;
    }
    	
    #header {
    	background-image:url(images/header.png);
    	width:980px;
    	height:162px;
    	float:left;
    	}
    	
    #topbar {
    	background-image:url(images/topbar.png);
    	width:980px;
    	height:34px;
    	float:left;
    	}
    	
    .title {
    	background-color:#00CC00;
    	margin-top: 25px;
    	margin-left: 25px;
    	float:left;
    	}
    	
    p.hello {
    	background-color:#3CC;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 24px;
    	}
    	
    p.hello2 {
    	background-color:#33FFCC;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 18px;
    	}
    	
    	
    .product {
    	background-color:#3F0;
    	width:400px;
    	height:25px;
    	margin-left: 50px;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 24px;
    	font-weight: bold;
    	color: #009;
    	margin-top: 25px;
    	float:left;
    	}
    	
    #quote {
    	background-color:#FF6600;
    	width:900px;
    	height:450px;
    	margin-left:25px;
    	float:left;
    	}
    	
    .fields {
    	background-color: #CCC;
    	width:120px;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	margin-left:50px;
    	margin-top:30px;
    	text-align:right;
    	float:left;
    	}
    	
    #price {
    	background-color:#666666;
    	width:380px;
    	height:300px;
    	margin-left:500px;
    	margin-top:50px;
    	}
    	
    .price {
    	font-family: Verdana, Geneva, sans-serif;
    	}
    	
    	
    .price2 {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 16px;
    	font-weight: bold;
    	color: #009;
    	margin-right: 25px;
    	}
    	
    #link {
    	margin-top: 125px;
    	text-align: center;
    	
    	}
    	
    p.link {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 16px;
    	font-weight: bold;
    	text-decoration: underline;
    	}
    	
    p.link2 {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 16px;
    	color: #00F;
    	font-weight: normal;
    	font-size: 18px;
    	}
    	
    
    	
    	
    #pics {
    	background-color:#06F;
    	width:870px;
    	height:auto;
    	float:left;
    	margin-left:50px;
    	margin-top:15px;
    	margin-bottom:10px;
    	}
    	
    	
    #contact {
    	background-color:#0F0;
    	width:800px;
    	height:200px;
    	margin-left:25px;
    	float:left;
    	}
    
    .contactL {
    	width:400px;
    	height:200px;
    	float:left;
    	}
    	
    .contactR {
    	width:400px;
    	height:200px;
    	float:left;
    	}
    	
    p.heading {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 18px;
    	font-weight: bold;
    	color: #0000CC;
    	margin-left: 25px;
    	}
    	
    p.heading2 {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 14px;
    	line-height: 10px;
    	margin-left: 75px;
    	}
    	
    	
    	
    #footer {
    		background-image:url(images/footer.png);
    		width:980px;
    		height:130px;
    		float:left;
    		}
    
    #divider {
    	background-image:url(images/divider.png);
    	width:850px;
    	height:7px;
    	float:left;
    	margin-left:55px;
    	}
    Thanks In Advance

    David

  2. #2
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because everything within the container is floated the container dosnt extend itself. Overflow:auto; on the container should be enough to solve the problem.

    Consider using a CSS reset too, it will help with cross browser issues and will normalise your browsers (removes padding and margin that browsers apply by default). Google Eric Meyer for a fair few articles on CSS resets.

  3. #3
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    609
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it, I just added a Content <div>

    I appreciate it
    Thanks In Advance

    David


Bookmarks

Posting Permissions

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