SitePoint Sponsor

User Tag List

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

    Page giving me issues. Main BG not going all the way

    I have been stumped on this for hrs. I know I am probably missing some simple like a cosing tag or something but I cannot find it anywhere.

    If you look at the page
    Code:
    http://wolphewebdesign.com/Clients/BTE/featured.html
    You will be able to see what I am trying to do. I am using a BG image for the wide-main section but it is only going down to the first 2 products and not going with the 3rd.

    Can someone please take a look at my code and see if you can see what I am missing.

    Any help would be greatly appreciated

    Code for middle section
    Code:
    <div id="wide-middle">
    <div class="wide-top"><h1>New Bakery Equipment</h1></div>
    <div id="wide-content">
    <h2>Featured Projects</h2>
    
    <div id="item">
    <h3>Recirculating Tunnel Oven</h3>
    
    <div class="specs">
    <p class="specstxt">Manufactuer: BTE</p>
    <p class="specstxt">Model: BT 100-300</p>
    <p class="specstxt">Serial No: N/A</p>
    <p class="specstxt">Year: 2010</p>
    <p class="specstxt">Condition: New</p>
    </div><!--Closes specs-->
    
    <div class="features">
    <p class="main-wide">
    Features:
    </p>
    <ul>
    <li class="item">Recirculating</li>
    <li class="item">Powder&nbsp;Coated Frame and Legs</li>
    <li class="item">Stainless Steel Aluminum brushed finished outer skin</li>
    <li class="item">Available in PLC Touchscreen or Standard Controls</li>
    <li class="item">In-feed &amp; out-feed length built to customer specifications</li>
    <li class="item">Maxon Oven-Pak 415 burner sets</li>
    <li class="item">Pre-wired gas trains to&nbsp;NFPA specifications</li>
    <li class="item">Band take up assembly controlled pneumatically</li>
    <li class="item">Non-Asbestos bat type insulation</li>
    </ul>
    </div><!--Closes features-->
    
    <div class="featuredimage"><img src="images/equipment/recirculating_tunnel_oven.jpg" />
    <img src="images/quote.png" /></div>
    
    </div><!--Closes item-->
    <div id="item">
    <h3>BT-2 BT-4 Sandwiching Machine</h3>
    
    <div class="specs">
    <p class="specstxt">Manufactuer: BTE</p>
    <p class="specstxt">Model: BT-2 &amp; BT-4</p>
    <p class="specstxt">Serial No: N/A</p>
    <p class="specstxt">Year: 2010</p>
    <p class="specstxt">Condition: New</p>
    </div>
    <div class="features">
    <p class="main-wide">
    Features:
    </p>
    <ul>
    <li class="item">Available in 2 Row &amp; 4 Row</li>
    <li class="item">For biscuits or cracker</li>
    <li class="item">Speeds up to 2500 per minute</li>
    <li class="item">Round or Rectangle Shape</li>
    <li class="item">Fillings-Cream, Cheese, PB &amp; Jam</li>
    </ul>
    </div><!--Closes featires-->
    <div class="featuredimage"><img src="images/equipment/bt-2_bt4_sandwichmachine.jpg" /></div>
    <img src="images/quote.png" /></div>
    </div><!--Closes item-->
    
    <div id="item">
    <h3>BT-2 BT-4 Sandwiching Machine</h3>
    
    <div class="specs">
    <p class="specstxt">Manufactuer: BTE</p>
    <p class="specstxt">Model: BT-2 &amp; BT-4</p>
    <p class="specstxt">Serial No: N/A</p>
    <p class="specstxt">Year: 2010</p>
    <p class="specstxt">Condition: New</p>
    </div>
    <div class="features">
    <p class="main-wide">Features:</p>
    <ul>
    <li class="item">Available in 2 Row &amp; 4 Row</li>
    <li class="item">For biscuits or cracker</li>
    <li class="item">Speeds up to 2500 per minute</li>
    <li class="item">Round or Rectangle Shape</li>
    <li class="item">Fillings-Cream, Cheese, PB &amp; Jam</li>
    </ul>
    </div><!--Closes features-->
    <div class="featuredimage"><img src="images/equipment/bt-2_bt4_sandwichmachine.jpg" /></div>
    <img src="images/quote.png" /></div>
    </div><!--Closes item-->
    
    </div><!--Closes wide-content-->
    
    <div class="wide-middle-bottom">
    <p class="sister">If you are looking for used equipment<br />Please visit our sister site: <a href="http://allfoodequip.com" class="sister">www.AllFoodEquip.com</a></p></div>
    
    </div><!--Closes middle-wide-->
    css for the middle section
    Code:
    #wide-middle {
    	width:803px;
    	height:auto;
    	float:left;
    	}
    	
    .wide-top {
    	background-image:url(images/full-main-top.png);
    	width:803px;
    	height:95px;
    	float:left;
    	}
    	
    #wide-content {
    	background-image:url(images/wide-middle-main.png);
    	background-repeat:repeat-y;
    	width:803px;
    	height:auto;
    	float:left;
    	}
    	
    .wide-middle-bottom {
    	background-image:url(images/wide-middle-bottom.png);
    	width:803px;
    	height:63px;
    	float:left;
    	}
    
    #item {
    	width:800px;
    	height:auto;
    	float:left;
    	}
    	
    	
    .specs {
    	width:200px;
    	height:150px;
    	background-color:#03C;
    	float:left;
    	margin-left:5px;
    	}
    	
    p.specstxt {
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:14px;
    	color:#fff;
    	font-weight:bold;
    	padding:0px 0px -5px 2px;
    	margin-top:2px;
    	}
    	
    p.main-wide {
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:16px;
    	margin-left:15px;
    	margin-right:25px;
    	}
    	
    li.item {
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:12px;
    	}
    	
    .features {
    	width:400px;
    	height:auto;
    	float:left;
    	font-size:10px;
    	}
    
    .featruedimage {
    	width:150px;
    	height:250px;
    	float:left;
    	margin-top:15px;
    	}
    Thanks In Advance

    David

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    3 things, tho they may be more :
    #1 you have MULTIPLE DIVs with#item. you can only use IDs ONCE. If you need to use an identifier more than once, use a CLASS.
    #2 Why do you have #item {float:left; } if they extend across the container anyway (#item {width:800px; } that does nothing but take them out of the regular flow. Remove both float:left and width from #item ; it might simplify things for you. Also you don't need height:auto; It is redundant, unless you are overriding a previously declared height.

    OR!!!
    #3 ( and here s you problem)... IN YOUR HTML , your last #item is OUTSIDE #wide-content ( which holds your bg image), if you move that lat item INSIDE #wide-content your problem should be solved.


    hope that helps.

  3. #3
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    610
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I looked at the #3 (#item being after the closing tag of #wide-content) and I see that it is in, unless I am missing something.
    Thanks In Advance

    David

  4. #4
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    610
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just found it. I had an extra closing </div> after an image

    <div class="featuredimage"><img src="images/equipment/bt-2_bt4_sandwichmachine.jpg" /></div>
    <img src="images/quote.png" /></div>
    Thanks In Advance

    David

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    Glad you found it.
    Those details will get you. It always saves a lot of headaches to validate your markup, far too often we begin by assuming it's a CSS error. A great validation tool

  6. #6
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    610
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I knew it was something simple. I even said it in the OP about a closing tag. I just couldnt find it.

    I appreciate the link, will bookmark it so if I get the brain farts again..lol
    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
  •