www.webdeveloper.com
Results 1 to 10 of 10

Thread: CSS help needed for my page. Trying to center the page. Can someone assist me?

  1. #1
    Join Date
    Feb 2013
    Posts
    7

    CSS help needed for my page. Trying to center the page. Can someone assist me?

    Yes, I am a CSS newb. lol. I am building my site and am sort of copying different code here and there to get to the point I am at now. I learn a lot by doing that. Anyway, here is my site and if anyone could pass on a few pointers to me, I would greatly appreciate it.

    Code:
    <!DOCTYPE html>
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Tackle Box of Savings -Home</title>
    		<!--ls:begin[stylesheet]--><style type="text/css">
    		.centerComponents
    
    			
    body 
    	{
    	width:1000px;
    	color: #6b6c5a;
    	font-size: 19px;
    	font-family: Arial,Verdana, Geneva, sans-serif; 
    	line-height: 0px;
    	margin:0px;
    	padding:0px
    	}
    #nav {
        background: url(images/nav-green.png) ;
        position: relative;
    	color: #fff;
        margin: 108px;
        text-transform:uppercase;
    	width:1000px;
    	height:23px;
    	left:-116px;
    	top:-11px
    }
    
    div#head {
        position: absolute;
        width:1000px;
        height:92px;
        left:0px;
        top: 5px;
        background-color: #6b6c5a;
    	
    }
    
    
    div#columns {
        position: relative;
        width: 1000px;
    	height: 1280px;
        top: -117px;
    	left:-8px;
        background-color: #e6e6d9;
    }
    div#side1 {
        position:absolute;
        width:330px;
        top: 150px;
        left:5px;
        background-color: #e6e6d9;
    	text-align:center;
    	font-size:medium
    }
    div#contenttop {
        position: relative;
        width: 900px;
        top: 15px;
        left: 95px;
        background-color: #e6e6d9;
    	}
    	
    	div#contentmiddle {
        position: relative;
        width: 450px;
        top: 30px;
        left: 350px;
        background-color: #e6e6d9;
    	}
    	div#contentbottomleft {
        position: relative;
        width: 300px;
        top: 45px;
        left: 13px;
        background-color: #e6e6d9;
    	}
    	div#contentbottommiddle {
        position: relative;
        width: 300px;
        top: -195px;
        left: 347px;
        background-color: #e6e6d9;
    	}
    	
    	div#contentbottomright {
        position: absolute;
        width: 315px;
        right: 5px;
    	bottom:5px;
        background-color: #e6e6d9;
    	}
    	
    div#side2 {
        position:absolute;
        width:125px;
        max-height:600px;
        top: 120px;
        right:10px;
        background-color: #e6e6d9;
    }
    div#foot {
        position: absolute;
        width: 1000px;
        bottom:0px;
        color: white;
    	font-size: 11px;
    	line-height: 18px;
    	background-color: #6b6c5a;
    	text-align: center;
    	letter-spacing: 3px;
    	height: 20px;
    	left:0px
    	
    	}
    	div#bottomiconlinks {
    	position: relative;
    	bottom: 80px;
    	 }
    
    	 a{color:#0000FF;}
    a:hover{color:#fc0;}
    #nav a, #foot a{color:white;}
    #nav a:hover, #foot a:hover{color:yellow;}
    	 
    	 
    
    
    --></style>
    	</head>
    
    	<body>
    
    				<div id="nav">
    			<a href="http://www.tackleboxofsavings.com">&nbsp;HOME</a>&nbsp; | <a href="#">&nbsp;ABOUT US</a> &nbsp; | <a href="#">&nbsp;FEATURED PRODUCTS</a>&nbsp; | <a href="#">&nbsp;COUPONS&nbsp;</a> |<a href="#">&nbsp; MADE IN THE USA&nbsp;</a>|<a href="#">&nbsp; REVIEWS&nbsp;</a>|<a href="#">&nbsp; SIGNUP&nbsp;</a></div>			
    		
     <div id="head">
         <div style="width:650px; float:left;"><img src="images/logo_img.png" alt="Tackle Box of Savings Logo" height="88" width="153" border="0"></div><div style="overflow:hidden;"><BR><STRONG><font color="white"><font size="5">"Value in Every Tackle Box"</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="yellow"><font size="4">Discounts for Fishermen&nbsp;&nbsp;&nbsp;</font></font></div></STRONG>
     </div>
     <div id="columns">
         <div id="side1">
             <img src="http://tackleboxofsavings.com/images/softcoolers/softcoolerfeaturedproduct.jpg" width="320" height="547" alt="Soft Coolers">
         </div>
         <div id="contenttop">
          <img src="http://tackleboxofsavings.com/images/Make-a-splash-with-TBOS.jpg" width="728" height="90" alt="TBOS promo"> 
         </div>
    	 <div id="contentmiddle">
    	 <h1>Featured Product</h1>
    	 <p>SoftCoolers, a division of Horizons LTD, has been bringing you top quality soft coolers since 1986. We are known for our outstanding service, top of the line products and the best service you'll find anywhere. We are THE original makers of soft coolers.
    
    <p>Why are our coolers different?
    <ul>
        <li>They are American made with pride by Americans - everything, right down to the zippers!</li>
    <li>We offer a lifetime leak proof guarantee</li>
    <li>We are the original soft cooler</li>
        <li>We have manufactured and sold our coolers for almost 25 years</li>
        <li>We are the #1 cooler in the boating and aviation industry</li>
        <li>Our coolers are sold at dozens of boat and air shows around the world</li>
        <li>Our fusion welded liner will not cold crack down to 52 below zero</li>
        <li>In addition to the main liner there are two additional sweat liners surrounding the insulation so our soft coolers do not sweat</li>
    </ul>
    _____________________________________________________ 
    <br>This is Keith Tauber, owner of Tackle Box of Savings here, I received a 18 Pak Executive soft cooler recently and can personally vouch for their quality and effectiveness. The monogram of my logo as seen in the above picture is top notch, as is the entire product.
    
    <p>I would highly recommend this soft cooler to anyone. Trust me, you will not find a better made soft cooler anywhere. 
    <p>To learn more about this company, please visit their site: <a href="http://www.softcoolers.com">www.softcoolers.com</a>
     </div>
    	 <div id="contentbottomleft">
    	 <script type="text/javascript"><!--
    google_ad_client = "ca-pub-0732288203515052";
    /* index smaller horizontal ad */
    google_ad_slot = "6158344362";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    	 </div>
    	 <div id="contentbottommiddle">
    	 <h2>Email program</h2>
    <p>Our emails are sent weekly and contain valuable discount offers from various tackle manufacturers. Many of these manufacturers are small mom and pop shops that make excellent products that are not typically found in large retail stores. 
    <p>Please fill out this form to sign up to receive these special TBOS deals. Many of these deals are found nowhere else.
    
    <p>Please support these small businesses by purchasing their fine products.
    	 
    	 </div>
    	 <div id="side2">
             
    		 <img src="http://tackleboxofsavings.com/images/120x600ad.jpg" alt="" height="600" width="120" border="0" vspace="10">
         </div>
    	 <div id="contentbottomright">
    	 <script type="text/javascript">document.write(unescape("%3Cscript src='http" +  (document.location.protocol == 'https:' ? 's' : '') + "://www.coffeecup.com/api/sdrive/forms/form.js?name=emailsignup%26slug=94772%26width=310%26height=449' type='text/javascript'%3E%3C/script%3E"));</script>
    	 </div>
         
    
     <div id="foot">
     
         <a href="#"class="white">HOME</a> | <a href="#"class="white">ABOUT US</a>  | <a href="#"class="white">FEATURED PRODUCTS</a> | <a href="#"class="white">COUPONS</a> |<a href="#"class="white"> MADE IN THE USA</a>|<a href="#"class="white"> REVIEWS</a>|<a href="#"class="white"> SIGN UP</a></div>
    </div>
    <a type="1" href="http://www.bigfishtackle.com/top50/3203"
    target="_blank"></a>
    </div>
    <div id="bottomiconlinks">
    <a href=
    "http://www.linkedin.com/company/tackle-box-of-savings?trk=fc_badge"><img src="http://static01.linkedin.com/scds/common/u/img/webpromo/btn_cofollow_badge.png"
    alt="Tackle Box of Savings on LinkedIn"></a><a href="http://www.topfishingsites.com/"><img src="http://www.topfishingsites.com/button.php?u=TBOS"
    alt="Top Fishing Websites at TopFishingSites.Com" border=
    "0"></a><a href=
    "http://www.bigfishtackle.com/top50/3203"><img src=
    "http://www.bigfishtackle.com/cgi-bin/top50/topsites.cgi?action=button&amp;id=3203"
    border="0" alt="bigfishtackle icon"></a><a href=
    "http://4reelfishing.net/topsites/"><img src=
    "http://4reelfishing.net/topsites/button.php?u=TBOS" alt=
    "4reel fishing top fishing sites" border="0"></a><a href=
    "http://cyber-lake.com/topsite/"><img src=
    "http://cyber-lake.com/topsite/button.php?u=TBOS" alt=
    "cyber-lake.com Top Fishing Sites" border="0"></a><br> 
    Copyright &copy; 2012 Tackle Box of Savings &nbsp; All rights reserved.
    </div>
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-31963875-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    
     </body>
    </html>
    Can someone also help me create a separate stylesheet so I can just have the HTML on this page? I have no idea how to do that. Or is it OK to have it all on each page?

    So, what I want my site to do is to be centered and not left justified as it is now. I would also like to have the background in this color: #cae2a1 Again, I have tried and when I add that to my CSS code in body nothing happens. Indeed, if I delete everything in my body code nothing happens. So I know I did something wrong.

    Thanks for the help.

  2. #2
    Join Date
    Aug 2012
    Posts
    155
    To use an external stylesheet (and yes that is the right things to do - you should keep it separate from your HTML) just copy all your CSS into a new file and save it as something like stylesheet.css. Then in the head of your HTML you link to it (below assumes you will save the stylesheet into the same folder as this html page)
    HTML Code:
    <!DOCTYPE html>
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Tackle Box of Savings -Home</title>
    		<link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    To center your content on the page you either need to set the width and auto margin for left and right margins on each containing div on the page, or a better way is to make a main container / wrapper div and put everything inside it
    Code:
    #wrapper {
      width: 1000px;
      margin: auto;
    }
    Then in your HTML
    HTML Code:
    <body>
    <div id="wrapper">
    Content here
    </div>
    </body>
    You cannot set a width on the body element as the body is the browser page and can't be adjusted with CSS, only by the user adjusting the sreen size. Also, if you use the wrapper above you can remove the width: 1000px from all your other divs in your CSS as no longer required.

    To add a background colour to the body:
    Code:
    body {
      background: #cae2a1;
    }
    However, if your content fills the screen you obviously won't see this colour.

  3. #3
    Join Date
    Feb 2013
    Posts
    7
    Simplepixie, thank you for the help. I attempted to do what you suggested and either messed it up or didn't follow everything you suggested because it jumbled my page around big time. Can you take a look at what I did to see what went wrong?

    I created a CSS page seperate and added it to my Stylesheets file and added the appropriate link in the html page as you showed. So I think I got that part right?

    However the wrapper part is not getting it done as it stretches my page to fit the browser dimensions. I don't want that. I want maximum 1000px and the background color to be there rather than the default white. I am not getting that at all.

    Also, all of the other DIV's are not where they need to be on the page now. As I said it moved everything around.

    Here is the CSS code:

    Code:
    <style type="text/css">
    		
    #wrapper {
      width: 1000px;
      margin: auto;
    }
    			
    body 
    	{
    	background: #cae2a1;
        color: #6b6c5a;
    	font-size: 19px;
    	font-family: Arial,Verdana, Geneva, sans-serif; 
    	line-height: 0px;
    	margin:0px;
    	padding:0px
    	}
    #nav {
        background: url("images/nav-green.png") repeat scroll 0 0 transparent;
        color: #FFFFFF;
        height: 23px;
        margin: auto;
        position: relative;
        text-transform: uppercase;
        }    margin: auto;
    
    
    div#head {
        background-color: #6B6C5A;
        height: 92px;
    }
    
    div#columns {
        position: relative;
        height: 1280px;
        top: -117px;
    	margin: auto;
    	background-color: #e6e6d9;
    }
    div#side1 {
        position:absolute;
        width:330px;
        top: 150px;
        left:5px;
        background-color: #e6e6d9;
    	text-align:center;
    	font-size:medium
    }
    div#contenttop {
        position: relative;
        width: 900px;
        top: 15px;
        left: 95px;
        background-color: #e6e6d9;
    	}
    	
    	div#contentmiddle {
        position: relative;
        width: 450px;
        top: 30px;
        left: 350px;
        background-color: #e6e6d9;
    	}
    	div#contentbottomleft {
        position: relative;
        width: 300px;
        top: 45px;
        left: 13px;
        background-color: #e6e6d9;
    	}
    	div#contentbottommiddle {
        position: relative;
        width: 300px;
        top: -195px;
        left: 347px;
        background-color: #e6e6d9;
    	}
    	
    	div#contentbottomright {
        position: absolute;
        width: 315px;
        right: 5px;
    	bottom:5px;
        background-color: #e6e6d9;
    	}
    	
    div#side2 {
        position:absolute;
        width:125px;
        max-height:600px;
        top: 120px;
        right:10px;
        background-color: #e6e6d9;
    }
    div#foot {
        position: absolute;
        bottom:0px;
        color: white;
    	font-size: 11px;
    	line-height: 18px;
    	background-color: #6b6c5a;
    	text-align: center;
    	letter-spacing: 3px;
    	height: 20px;
    	left:0px
    	
    	}
    	div#bottomiconlinks {
    	position: relative;
    	bottom: 80px;
    	 }
    
    	 a{color:#0000FF;}
    a:hover{color:#fc0;}
    #nav a, #foot a{color:white;}
    #nav a:hover, #foot a:hover{color:yellow;}
    	 
    	 
    
    
    --></style>
    Here is the HTML code:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Tackle Box of Savings -Home</title>
    		<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
    		<!--ls:begin[stylesheet]-->
    	</head>
    
    	<body>
    	<div id="wrapper">
    
    				<div id="nav">
    			<a href="http://www.tackleboxofsavings.com">&nbsp;HOME</a>&nbsp; | <a href="#">&nbsp;ABOUT US</a> &nbsp; | <a href="#">&nbsp;FEATURED PRODUCTS</a>&nbsp; | <a href="#">&nbsp;COUPONS&nbsp;</a> |<a href="#">&nbsp; MADE IN THE USA&nbsp;</a>|<a href="#">&nbsp; REVIEWS&nbsp;</a>|<a href="#">&nbsp; SIGNUP&nbsp;</a></div>			
    		
     <div id="head">
         <div style="width:650px; float:left;"><img src="images/logo_img.png" alt="Tackle Box of Savings Logo" height="88" width="153" border="0"></div><div style="overflow:hidden;"><BR><STRONG><font color="white"><font size="5">"Value in Every Tackle Box"</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="yellow"><font size="4">Discounts for Fishermen&nbsp;&nbsp;&nbsp;</font></font></div></STRONG>
     </div>
     <div id="columns">
         <div id="side1">
             <img src="http://tackleboxofsavings.com/images/softcoolers/softcoolerfeaturedproduct.jpg" width="320" height="547" alt="Soft Coolers">
         </div>
         <div id="contenttop">
          <img src="http://tackleboxofsavings.com/images/Make-a-splash-with-TBOS.jpg" width="728" height="90" alt="TBOS promo"> 
         </div>
    	 <div id="contentmiddle">
    	 <h1>Featured Product</h1>
    	 <p>SoftCoolers, a division of Horizons LTD, has been bringing you top quality soft coolers since 1986. We are known for our outstanding service, top of the line products and the best service you'll find anywhere. We are THE original makers of soft coolers.
    
    <p>Why are our coolers different?
    <ul>
        <li>They are American made with pride by Americans - everything, right down to the zippers!</li>
    <li>We offer a lifetime leak proof guarantee</li>
    <li>We are the original soft cooler</li>
        <li>We have manufactured and sold our coolers for almost 25 years</li>
        <li>We are the #1 cooler in the boating and aviation industry</li>
        <li>Our coolers are sold at dozens of boat and air shows around the world</li>
        <li>Our fusion welded liner will not cold crack down to 52 below zero</li>
        <li>In addition to the main liner there are two additional sweat liners surrounding the insulation so our soft coolers do not sweat</li>
    </ul>
    _____________________________________________________ 
    <br>This is Keith Tauber, owner of Tackle Box of Savings here, I received a 18 Pak Executive soft cooler recently and can personally vouch for their quality and effectiveness. The monogram of my logo as seen in the above picture is top notch, as is the entire product.
    
    <p>I would highly recommend this soft cooler to anyone. Trust me, you will not find a better made soft cooler anywhere. 
    <p>To learn more about this company, please visit their site: <a href="http://www.softcoolers.com">www.softcoolers.com</a>
     </div>
    	 <div id="contentbottomleft">
    	 <script type="text/javascript"><!--
    google_ad_client = "ca-pub-0732288203515052";
    /* index smaller horizontal ad */
    google_ad_slot = "6158344362";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    	 </div>
    	 <div id="contentbottommiddle">
    	 <h2>Email program</h2>
    <p>Our emails are sent weekly and contain valuable discount offers from various tackle manufacturers. Many of these manufacturers are small mom and pop shops that make excellent products that are not typically found in large retail stores. 
    <p>Please fill out this form to sign up to receive these special TBOS deals. Many of these deals are found nowhere else.
    
    <p>Please support these small businesses by purchasing their fine products.
    	 
    	 </div>
    	 <div id="side2">
             
    		 <img src="http://tackleboxofsavings.com/images/120x600ad.jpg" alt="" height="600" width="120" border="0" vspace="10">
         </div>
    	 <div id="contentbottomright">
    	 <script type="text/javascript">document.write(unescape("%3Cscript src='http" +  (document.location.protocol == 'https:' ? 's' : '') + "://www.coffeecup.com/api/sdrive/forms/form.js?name=emailsignup%26slug=94772%26width=310%26height=449' type='text/javascript'%3E%3C/script%3E"));</script>
    	 </div>
         
    
     <div id="foot">
     
         <a href="#"class="white">HOME</a> | <a href="#"class="white">ABOUT US</a>  | <a href="#"class="white">FEATURED PRODUCTS</a> | <a href="#"class="white">COUPONS</a> |<a href="#"class="white"> MADE IN THE USA</a>|<a href="#"class="white"> REVIEWS</a>|<a href="#"class="white"> SIGN UP</a></div>
    </div>
    <a type="1" href="http://www.bigfishtackle.com/top50/3203"
    target="_blank"></a>
    </div>
    <div id="bottomiconlinks">
    <a href=
    "http://www.linkedin.com/company/tackle-box-of-savings?trk=fc_badge"><img src="http://static01.linkedin.com/scds/common/u/img/webpromo/btn_cofollow_badge.png"
    alt="Tackle Box of Savings on LinkedIn"></a><a href="http://www.topfishingsites.com/"><img src="http://www.topfishingsites.com/button.php?u=TBOS"
    alt="Top Fishing Websites at TopFishingSites.Com" border=
    "0"></a><a href=
    "http://www.bigfishtackle.com/top50/3203"><img src=
    "http://www.bigfishtackle.com/cgi-bin/top50/topsites.cgi?action=button&amp;id=3203"
    border="0" alt="bigfishtackle icon"></a><a href=
    "http://4reelfishing.net/topsites/"><img src=
    "http://4reelfishing.net/topsites/button.php?u=TBOS" alt=
    "4reel fishing top fishing sites" border="0"></a><a href=
    "http://cyber-lake.com/topsite/"><img src=
    "http://cyber-lake.com/topsite/button.php?u=TBOS" alt=
    "cyber-lake.com Top Fishing Sites" border="0"></a><br> 
    Copyright &copy; 2012 Tackle Box of Savings &nbsp; All rights reserved.
    </div>
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-31963875-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    </div>
     </body>
    </html>
    Can you help me figure this out?

    Thank you kindly simplepixie.

  4. #4
    Join Date
    Aug 2012
    Posts
    155
    The problems you are having are because you are using positioning (absolute and relative) which is totally unnecessary for a simple 3 column layout as you have. I have gone through and cleaned everything up and sorted the layout styling for you (you may need to tweak but I think it is as you need now). Also in the stylesheet you don't need the opening and closing style tags.

    There is a class in the styles called .centercomponents - I have no idea what this is for but I do know that if I remove it the text starts overlapping itself so I presume it may be linked to some javascript you have going on and have therefore left it in place.

    Your stylesheet
    Code:
    .centerComponents
    
    
    body
        {
        color: #6b6c5a;
        font-size: 19px;
        font-family: Arial,Verdana, Geneva, sans-serif;
        line-height: 0px;
        margin:0px;
        padding:0px
        }
    #wrapper {
        width: 1000px;
        margin: auto;
        border: 1px solid;
    }
    #nav {
        background: url(images/nav-green.png) ;
        color: #fff;
        text-transform:uppercase;
        height:23px;
    }
    
    div#head {
        height:92px;
        margin-top: 5px;
        background-color: #6b6c5a;
    
    }
    
    div#columns {
        height: 1280px;
        background-color: #e6e6d9;
    }
    div#contenttop {
        width: 900px;
        padding-top: 5px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }
    #content {
        margin-top: 30px;
    }
    div#side1 {
        float: left;
        width:330px;
        margin-left:5px;
        text-align:center;
        font-size:medium
    }
    div#side2 {
        float: right;
        width:125px;
        max-height:600px;
        margin-right:10px;
    }
    
        div#contentmiddle {
        width: 450px;
        margin-top: 30px;
        margin-left: 350px;
        }
        #contentbottom {
            margin-top: 40px;
        }
        div#contentbottomleft {
        float: left;
        width: 300px;
        margin-left: 13px;
        }
        div#contentbottommiddle {
        width: 300px;
        margin-left: 347px;
        }
    
        div#contentbottomright {
        float: right;
        width: 315px;
        margin-right: 5px;
        }
    
    div#foot {
        color: white;
        font-size: 11px;
        line-height: 18px;
        background-color: #6b6c5a;
        text-align: center;
        letter-spacing: 3px;
        height: 20px;
    
        }
        div#bottomiconlinks {
        padding-top: 20px;
        padding-bottom: 80px;
        text-align: center;
         }
    
         a{color:#0000FF;}
    a:hover{color:#fc0;}
    #nav a, #foot a{color:white;}
    #nav a:hover, #foot a:hover{color:yellow;}
    
    .clearfix:before,
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      overflow: hidden;
    }
    
    .clearfix:after {
        clear: both;
    }
    
    .clearfix {
        zoom: 1; /* IE < 8 */
    }
    Your HTML (you have some inline styling that you need to remove and put in your stylesheet but I hope you can do that for yourself)
    HTML Code:
    <!DOCTYPE html>
    
    <html>
    
        <head>
            <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
            <title>Tackle Box of Savings -Home</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
    </head>
    
        <body>
    <div id="wrapper">
                    <div id="nav">
                <a href="http://www.tackleboxofsavings.com">&nbsp;HOME</a>&nbsp; | <a href="#">&nbsp;ABOUT US</a> &nbsp; | <a href="#">&nbsp;FEATURED PRODUCTS</a>&nbsp; | <a href="#">&nbsp;COUPONS&nbsp;</a> |<a href="#">&nbsp; MADE IN THE USA&nbsp;</a>|<a href="#">&nbsp; REVIEWS&nbsp;</a>|<a href="#">&nbsp; SIGNUP&nbsp;</a></div>
    
     <div id="head">
         <div style="width:650px; float:left;"><img src="images/logo_img.png" alt="Tackle Box of Savings Logo" height="88" width="153" border="0"></div><div style="overflow:hidden;"><BR><STRONG><font color="white"><font size="5">"Value in Every Tackle Box"</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="yellow"><font size="4">Discounts for Fishermen&nbsp;&nbsp;&nbsp;</font></font></div></STRONG>
     </div>
     <div id="columns">
        <div id="contenttop">
          <img src="http://tackleboxofsavings.com/images/Make-a-splash-with-TBOS.jpg" width="728" height="90" alt="TBOS promo">
         </div>
         <div id="content">
         <div id="side1">
             <img src="http://tackleboxofsavings.com/images/softcoolers/softcoolerfeaturedproduct.jpg" width="320" height="547" alt="Soft Coolers">
         </div>
          <div id="side2">
    
             <img src="http://tackleboxofsavings.com/images/120x600ad.jpg" alt="" height="600" width="120" border="0">
         </div>
         <div id="contentmiddle">
         <h1>Featured Product</h1>
         <p>SoftCoolers, a division of Horizons LTD, has been bringing you top quality soft coolers since 1986. We are known for our outstanding service, top of the line products and the best service you'll find anywhere. We are THE original makers of soft coolers.
    
    <p>Why are our coolers different?
    <ul>
        <li>They are American made with pride by Americans - everything, right down to the zippers!</li>
    <li>We offer a lifetime leak proof guarantee</li>
    <li>We are the original soft cooler</li>
        <li>We have manufactured and sold our coolers for almost 25 years</li>
        <li>We are the #1 cooler in the boating and aviation industry</li>
        <li>Our coolers are sold at dozens of boat and air shows around the world</li>
        <li>Our fusion welded liner will not cold crack down to 52 below zero</li>
        <li>In addition to the main liner there are two additional sweat liners surrounding the insulation so our soft coolers do not sweat</li>
    </ul>
    _____________________________________________________
    <br>This is Keith Tauber, owner of Tackle Box of Savings here, I received a 18 Pak Executive soft cooler recently and can personally vouch for their quality and effectiveness. The monogram of my logo as seen in the above picture is top notch, as is the entire product.
    
    <p>I would highly recommend this soft cooler to anyone. Trust me, you will not find a better made soft cooler anywhere.
    <p>To learn more about this company, please visit their site: <a href="http://www.softcoolers.com">www.softcoolers.com</a>
     </div>
     <div class="clearfix"></div>
     </div>
     <div id="contentbottom">
         <div id="contentbottomleft">
         <script type="text/javascript"><!--
    google_ad_client = "ca-pub-0732288203515052";
    /* index smaller horizontal ad */
    google_ad_slot = "6158344362";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
         </div>
         <div id="contentbottomright">
         <script type="text/javascript">document.write(unescape("%3Cscript src='http" +  (document.location.protocol == 'https:' ? 's' : '') + "://www.coffeecup.com/api/sdrive/forms/form.js?name=emailsignup%26slug=94772%26width=310%26height=449' type='text/javascript'%3E%3C/script%3E"));</script>
         </div>
         <div id="contentbottommiddle">
         <h2>Email program</h2>
    <p>Our emails are sent weekly and contain valuable discount offers from various tackle manufacturers. Many of these manufacturers are small mom and pop shops that make excellent products that are not typically found in large retail stores.
    <p>Please fill out this form to sign up to receive these special TBOS deals. Many of these deals are found nowhere else.
    
    <p>Please support these small businesses by purchasing their fine products.
    
         </div>
         <div class="clearfix"></div>
         </div>
    
    
     <div id="foot">
    
         <a href="#"class="white">HOME</a> | <a href="#"class="white">ABOUT US</a>  | <a href="#"class="white">FEATURED PRODUCTS</a> | <a href="#"class="white">COUPONS</a> |<a href="#"class="white"> MADE IN THE USA</a>|<a href="#"class="white"> REVIEWS</a>|<a href="#"class="white"> SIGN UP</a></div>
    <a type="1" href="http://www.bigfishtackle.com/top50/3203"
    target="_blank"></a>
    <div id="bottomiconlinks">
    <a href=
    "http://www.linkedin.com/company/tackle-box-of-savings?trk=fc_badge"><img src="http://static01.linkedin.com/scds/common/u/img/webpromo/btn_cofollow_badge.png"
    alt="Tackle Box of Savings on LinkedIn"></a><a href="http://www.topfishingsites.com/"><img src="http://www.topfishingsites.com/button.php?u=TBOS"
    alt="Top Fishing Websites at TopFishingSites.Com" border=
    "0"></a><a href=
    "http://www.bigfishtackle.com/top50/3203"><img src=
    "http://www.bigfishtackle.com/cgi-bin/top50/topsites.cgi?action=button&amp;id=3203"
    border="0" alt="bigfishtackle icon"></a><a href=
    "http://4reelfishing.net/topsites/"><img src=
    "http://4reelfishing.net/topsites/button.php?u=TBOS" alt=
    "4reel fishing top fishing sites" border="0"></a><a href=
    "http://cyber-lake.com/topsite/"><img src=
    "http://cyber-lake.com/topsite/button.php?u=TBOS" alt=
    "cyber-lake.com Top Fishing Sites" border="0"></a><br>
    Copyright &copy; 2012 Tackle Box of Savings &nbsp; All rights reserved.
    </div>
    </div>
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-31963875-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    
     </body>
    </html>

  5. #5
    Join Date
    Feb 2013
    Posts
    7
    Thanks simple pixie. I copied your code and applied it and it rearranged my entire page. It has everything left justified and no background color at all. Not even color in the columns div now...I guess I need to make all of the inline styling as you suggested before this will look like the page I intend? Thanks for the help. I might need some more since this is still all new to me.

    Thanks

  6. #6
    Join Date
    Aug 2012
    Posts
    155
    If you have copied the code exactly then I don't know why it isn't working for you as I built the page on my server and it appears exactly as required. There must be something else that is affecting your layout. Can you post your complete stylesheet and page html as you have it now (it should match mine).

    Why did you re-arrange your entire page??? What I posted was exactly what you needed.

  7. #7
    Join Date
    Feb 2013
    Posts
    7
    Simplepixie, yesterday I had all sorts of problems with Firefox. WHen I looked at it it was not right. Now, I look at it and it is fine. The only issue I have no is the nav bar is at the top and it should be under the header. Here is a screen shot of it on my PC using Firefox as my browser

    http://tackleboxofsavings.com/new_tb...f-new-page.jpg I added the arrow to show where the nav bar should go. I don't see where in the CSS code that tells the nav bar to be at the top. In fact I see where the head has a top margin property of 5px. Should that put it at the top? Or would it have to be a negative number? I can play around with it to see what I can do. If I new exactly what I was doing I am sure it would be easy.

    Thank you kindly for your help. As for the inline styling, how would you suggest I handle the head were I have text in different colors on the right with the logo on the left?

    You have been a blessing and I appreciate your good work.

    Here is the CSS code:
    Code:
    .centerComponents
    
    
    body
        {
        color: #6b6c5a;
        font-size: 19px;
        font-family: Arial,Verdana, Geneva, sans-serif;
        line-height: 0px;
        margin:0px;
        padding:0px
        }
    #wrapper {
        width: 1000px;
        margin: auto;
        border: 1px solid;
    }
    #nav {
        background: url(images/nav-green.png) ;
        color: #fff;
        text-transform:uppercase;
        height:23px;
    }
    
    div#head {
        height:92px;
        margin-top: 5px;
        background-color: #6b6c5a;
    
    }
    
    div#columns {
        height: 1280px;
        background-color: #e6e6d9;
    }
    div#contenttop {
        width: 900px;
        padding-top: 5px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }
    #content {
        margin-top: 30px;
    }
    div#side1 {
        float: left;
        width:330px;
        margin-left:5px;
        text-align:center;
        font-size:medium
    }
    div#side2 {
        float: right;
        width:125px;
        max-height:600px;
        margin-right:10px;
    }
    
        div#contentmiddle {
        width: 450px;
        margin-top: 30px;
        margin-left: 350px;
        }
        #contentbottom {
            margin-top: 40px;
        }
        div#contentbottomleft {
        float: left;
        width: 300px;
        margin-left: 13px;
        }
        div#contentbottommiddle {
        width: 300px;
        margin-left: 347px;
        }
    
        div#contentbottomright {
        float: right;
        width: 315px;
        margin-right: 5px;
        }
    
    div#foot {
        color: white;
        font-size: 11px;
        line-height: 18px;
        background-color: #6b6c5a;
        text-align: center;
        letter-spacing: 3px;
        height: 20px;
    
        }
        div#bottomiconlinks {
        padding-top: 20px;
        padding-bottom: 80px;
        text-align: center;
         }
    
         a{color:#0000FF;}
    a:hover{color:#fc0;}
    #nav a, #foot a{color:white;}
    #nav a:hover, #foot a:hover{color:yellow;}
    
    .clearfix:before,
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      overflow: hidden;
    }
    
    .clearfix:after {
        clear: both;
    }
    
    .clearfix {
        zoom: 1; /* IE < 8 */
    }
    Here is the HTML
    [code]

  8. #8
    Join Date
    Feb 2013
    Posts
    7
    Hmm, forgot to add the HTML code. I don't see where I can edit the post so here it is:

    Code:
    <!DOCTYPE html>
    
    <html>
    
        <head>
            <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
            <title>Tackle Box of Savings -Home</title>
    <link rel="stylesheet" type="text/css" href="http://tackleboxofsavings.com/new_tbos/stylesheet.css">
    </head>
    
        <body>
    <div id="wrapper">
                    <div id="nav">
                <a href="http://www.tackleboxofsavings.com">&nbsp;HOME</a>&nbsp; | <a href="#">&nbsp;ABOUT US</a> &nbsp; | <a href="#">&nbsp;FEATURED PRODUCTS</a>&nbsp; | <a href="#">&nbsp;COUPONS&nbsp;</a> |<a href="#">&nbsp; MADE IN THE USA&nbsp;</a>|<a href="#">&nbsp; REVIEWS&nbsp;</a>|<a href="#">&nbsp; SIGNUP&nbsp;</a></div>
    
     <div id="head">
         <div style="width:650px; float:left;"><img src="images/logo_img.png" alt="Tackle Box of Savings Logo" height="88" width="153" border="0"></div><div style="overflow:hidden;"><BR><STRONG><font color="white"><font size="5">"Value in Every Tackle Box"</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="yellow"><font size="4">Discounts for Fishermen&nbsp;&nbsp;&nbsp;</font></font></div></STRONG>
     </div>
     <div id="columns">
        <div id="contenttop">
          <img src="http://tackleboxofsavings.com/images/Make-a-splash-with-TBOS.jpg" width="728" height="90" alt="TBOS promo">
         </div>
         <div id="content">
         <div id="side1">
             <img src="http://tackleboxofsavings.com/images/softcoolers/softcoolerfeaturedproduct.jpg" width="320" height="547" alt="Soft Coolers">
         </div>
          <div id="side2">
    
             <img src="http://tackleboxofsavings.com/images/120x600ad.jpg" alt="" height="600" width="120" border="0">
         </div>
         <div id="contentmiddle">
         <h1>Featured Product</h1>
         <p>SoftCoolers, a division of Horizons LTD, has been bringing you top quality soft coolers since 1986. We are known for our outstanding service, top of the line products and the best service you'll find anywhere. We are THE original makers of soft coolers.
    
    <p>Why are our coolers different?
    <ul>
        <li>They are American made with pride by Americans - everything, right down to the zippers!</li>
    <li>We offer a lifetime leak proof guarantee</li>
    <li>We are the original soft cooler</li>
        <li>We have manufactured and sold our coolers for almost 25 years</li>
        <li>We are the #1 cooler in the boating and aviation industry</li>
        <li>Our coolers are sold at dozens of boat and air shows around the world</li>
        <li>Our fusion welded liner will not cold crack down to 52 below zero</li>
        <li>In addition to the main liner there are two additional sweat liners surrounding the insulation so our soft coolers do not sweat</li>
    </ul>
    _____________________________________________________
    <br>This is Keith Tauber, owner of Tackle Box of Savings here, I received a 18 Pak Executive soft cooler recently and can personally vouch for their quality and effectiveness. The monogram of my logo as seen in the above picture is top notch, as is the entire product.
    
    <p>I would highly recommend this soft cooler to anyone. Trust me, you will not find a better made soft cooler anywhere.
    <p>To learn more about this company, please visit their site: <a href="http://www.softcoolers.com">www.softcoolers.com</a>
     </div>
     <div class="clearfix"></div>
     </div>
     <div id="contentbottom">
         <div id="contentbottomleft">
         <script type="text/javascript"><!--
    google_ad_client = "ca-pub-0732288203515052";
    /* index smaller horizontal ad */
    google_ad_slot = "6158344362";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
         </div>
         <div id="contentbottomright">
         <script type="text/javascript">document.write(unescape("%3Cscript src='http" +  (document.location.protocol == 'https:' ? 's' : '') + "://www.coffeecup.com/api/sdrive/forms/form.js?name=emailsignup%26slug=94772%26width=310%26height=449' type='text/javascript'%3E%3C/script%3E"));</script>
         </div>
         <div id="contentbottommiddle">
         <h2>Email program</h2>
    <p>Our emails are sent weekly and contain valuable discount offers from various tackle manufacturers. Many of these manufacturers are small mom and pop shops that make excellent products that are not typically found in large retail stores.
    <p>Please fill out this form to sign up to receive these special TBOS deals. Many of these deals are found nowhere else.
    
    <p>Please support these small businesses by purchasing their fine products.
    
         </div>
         <div class="clearfix"></div>
         </div>
    
    
     <div id="foot">
    
         <a href="#"class="white">HOME</a> | <a href="#"class="white">ABOUT US</a>  | <a href="#"class="white">FEATURED PRODUCTS</a> | <a href="#"class="white">COUPONS</a> |<a href="#"class="white"> MADE IN THE USA</a>|<a href="#"class="white"> REVIEWS</a>|<a href="#"class="white"> SIGN UP</a></div>
    <a type="1" href="http://www.bigfishtackle.com/top50/3203"
    target="_blank"></a>
    <div id="bottomiconlinks">
    <a href=
    "http://www.linkedin.com/company/tackle-box-of-savings?trk=fc_badge"><img src="http://static01.linkedin.com/scds/common/u/img/webpromo/btn_cofollow_badge.png"
    alt="Tackle Box of Savings on LinkedIn"></a><a href="http://www.topfishingsites.com/"><img src="http://www.topfishingsites.com/button.php?u=TBOS"
    alt="Top Fishing Websites at TopFishingSites.Com" border=
    "0"></a><a href=
    "http://www.bigfishtackle.com/top50/3203"><img src=
    "http://www.bigfishtackle.com/cgi-bin/top50/topsites.cgi?action=button&amp;id=3203"
    border="0" alt="bigfishtackle icon"></a><a href=
    "http://4reelfishing.net/topsites/"><img src=
    "http://4reelfishing.net/topsites/button.php?u=TBOS" alt=
    "4reel fishing top fishing sites" border="0"></a><a href=
    "http://cyber-lake.com/topsite/"><img src=
    "http://cyber-lake.com/topsite/button.php?u=TBOS" alt=
    "cyber-lake.com Top Fishing Sites" border="0"></a><br>
    Copyright &copy; 2012 Tackle Box of Savings &nbsp; All rights reserved.
    </div>
    </div>
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-31963875-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    
     </body>
    </html>

  9. #9
    Join Date
    Feb 2013
    Posts
    7
    I tried to adjust the header and came up with this

    http://tackleboxofsavings.com/new_tbos/TBOS4.html

    I was able to have the header at the top with the contents of the nav bar under the header but the background color for the nav bar is not showing??? Also, I tried to remove the inline styling for the head and the text is not spaced right or showing white and yellow test as I had it before. How can I change that? I want the text centered on itself and the text "Value in Every Tackle Box" to be larger and white and the text Discounts for fishermen to be smaller and yellow and centered under the Value in Every Tackle Box text.

    How can I do this?

    Also, how would I add my other pages? Would I have to create the same code for the header and footer on each page? I saw that in PHP it can be done but that would change my page extensions to .php instead of .html Since I already have a site using the .html extension I wouldn't want to change that as I would lose my rankings for those pages now and start all over with. Plus I would have people who link to my site suddenly with bad links. So can a header and footer be created easily for each page or do I have to add all of the code for each page?

    Thanks simple pixie

  10. #10
    Join Date
    Feb 2013
    Posts
    7
    Here is the CSS code I changed to get the new look:
    Code:
    .centerComponents
    
    
    body
        {
        color: #6b6c5a;
        font-size: 19px;
        font-family: Arial,Verdana, Geneva, sans-serif;
        line-height: 0px;
        margin:0px;
        padding:0px;
        border:0px;
        }
    #wrapper {
        width: 1000px;
        margin: auto;
        border: 1px solid;
    }
    #nav {
        background: url(images/nav-green.png) ;
        color: #fff;
        text-transform:uppercase;
        height:23px;
        margin-top: 94px;
    }
    
    div#head {
        height:92px;
        margin-top: -118px;
        background-color: #6b6c5a;
        color: #fff;
    }
    
    div#columns {
        height: 1280px;
        background-color: #e6e6d9;
    }
    div#contenttop {
        width: 900px;
        padding-top: 28px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }
    #content {
        margin-top: 30px;
    }
    div#side1 {
        float: left;
        width:330px;
        margin-left:10px;
        text-align:center;
        font-size:medium
    }
    div#side2 {
        float: right;
        width:125px;
        max-height:600px;
        margin-right:10px;
    }
    
        div#contentmiddle {
        width: 450px;
        margin-top: 30px;
        margin-left: 350px;
        }
        #contentbottom {
            margin-top: 40px;
        }
        div#contentbottomleft {
        float: left;
        width: 300px;
        margin-left: 10px;
        }
        div#contentbottommiddle {
        width: 300px;
        margin-left: 347px;
        }
    
        div#contentbottomright {
        float: right;
        width: 315px;
        margin-right: 10px;
        }
    
    div#foot {
        color: white;
        font-size: 11px;
        line-height: 18px;
        background-color: #6b6c5a;
        text-align: center;
        letter-spacing: 3px;
        height: 20px;
    
        }
        div#bottomiconlinks {
        padding-top: 20px;
        padding-bottom: 80px;
        text-align: center;
         }
    
         a{color:#0000FF;}
    a:hover{color:#fc0;}
    #nav a, #foot a{color:white;}
    #nav a:hover, #foot a:hover{color:yellow;}
    
    .clearfix:before,
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      overflow: hidden;
    }
    
    .clearfix:after {
        clear: both;
    }
    
    .clearfix {
        zoom: 1; /* IE < 8 */
    }
    The HTML
    Code:
    <!DOCTYPE html>
    
    <html>
    
        <head>
            <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
            <title>Tackle Box of Savings -Home</title>
    <link rel="stylesheet" type="text/css" href="http://tackleboxofsavings.com/new_tbos/stylesheet.css">
    </head>
    
        <body>
    <div id="wrapper">
                    <div id="nav">
                <a href="http://www.tackleboxofsavings.com">&nbsp;HOME</a>&nbsp; | <a href="#">&nbsp;ABOUT US</a> &nbsp; | <a href="#">&nbsp;FEATURED PRODUCTS</a>&nbsp; | <a href="#">&nbsp;COUPONS&nbsp;</a> |<a href="#">&nbsp; MADE IN THE USA&nbsp;</a>|<a href="#">&nbsp; REVIEWS&nbsp;</a>|<a href="#">&nbsp; SIGNUP&nbsp;</a></div>
    
     <div id="head">
         <div style="width:650px; float:left;"><img src="images/logo_img.png" alt="Tackle Box of Savings Logo" height="88" width="153"></div><div style="overflow:hidden;"><h3>"Value in Every Tackle Box"</h3> <h4>Discounts for Fishermen</h4></div>
     </div>
     <div id="columns">
        <div id="contenttop">
          <img src="http://tackleboxofsavings.com/images/Make-a-splash-with-TBOS.jpg" width="728" height="90" alt="TBOS promo">
         </div>
         <div id="content">
         <div id="side1">
             <img src="http://tackleboxofsavings.com/images/softcoolers/softcoolerfeaturedproduct.jpg" width="320" height="547" alt="Soft Coolers">
         </div>
          <div id="side2">
    
             <img src="http://tackleboxofsavings.com/images/120x600ad.jpg" alt="" height="600" width="120" border="0">
         </div>
         <div id="contentmiddle">
         <h1>Featured Product</h1>
         <p>SoftCoolers, a division of Horizons LTD, has been bringing you top quality soft coolers since 1986. We are known for our outstanding service, top of the line products and the best service you'll find anywhere. We are THE original makers of soft coolers.
    
    <p>Why are our coolers different?
    <ul>
        <li>They are American made with pride by Americans - everything, right down to the zippers!</li>
    <li>We offer a lifetime leak proof guarantee</li>
    <li>We are the original soft cooler</li>
        <li>We have manufactured and sold our coolers for almost 25 years</li>
        <li>We are the #1 cooler in the boating and aviation industry</li>
        <li>Our coolers are sold at dozens of boat and air shows around the world</li>
        <li>Our fusion welded liner will not cold crack down to 52 below zero</li>
        <li>In addition to the main liner there are two additional sweat liners surrounding the insulation so our soft coolers do not sweat</li>
    </ul>
    _____________________________________________________
    <br>This is Keith Tauber, owner of Tackle Box of Savings here, I received a 18 Pak Executive soft cooler recently and can personally vouch for their quality and effectiveness. The monogram of my logo as seen in the above picture is top notch, as is the entire product.
    
    <p>I would highly recommend this soft cooler to anyone. Trust me, you will not find a better made soft cooler anywhere.
    <p>To learn more about this company, please visit their site: <a href="http://www.softcoolers.com">www.softcoolers.com</a>
     </div>
     <div class="clearfix"></div>
     </div>
     <div id="contentbottom">
         <div id="contentbottomleft">
         <script type="text/javascript"><!--
    google_ad_client = "ca-pub-0732288203515052";
    /* index smaller horizontal ad */
    google_ad_slot = "6158344362";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
         </div>
         <div id="contentbottomright">
         <script type="text/javascript">document.write(unescape("%3Cscript src='http" +  (document.location.protocol == 'https:' ? 's' : '') + "://www.coffeecup.com/api/sdrive/forms/form.js?name=emailsignup%26slug=94772%26width=310%26height=449' type='text/javascript'%3E%3C/script%3E"));</script>
         </div>
         <div id="contentbottommiddle">
         <h2>Email program</h2>
    <p>Our emails are sent weekly and contain valuable discount offers from various tackle manufacturers. Many of these manufacturers are small mom and pop shops that make excellent products that are not typically found in large retail stores.
    <p>Please fill out this form to sign up to receive these special TBOS deals. Many of these deals are found nowhere else.
    
    <p>Please support these small businesses by purchasing their fine products.
    
         </div>
         <div class="clearfix"></div>
         </div>
    
    
     <div id="foot">
    
         <a href="#"class="white">HOME</a> | <a href="#"class="white">ABOUT US</a>  | <a href="#"class="white">FEATURED PRODUCTS</a> | <a href="#"class="white">COUPONS</a> |<a href="#"class="white"> MADE IN THE USA</a>|<a href="#"class="white"> REVIEWS</a>|<a href="#"class="white"> SIGN UP</a></div>
    <a type="1" href="http://www.bigfishtackle.com/top50/3203"
    target="_blank"></a>
    <div id="bottomiconlinks">
    <a href=
    "http://www.linkedin.com/company/tackle-box-of-savings?trk=fc_badge"><img src="http://static01.linkedin.com/scds/common/u/img/webpromo/btn_cofollow_badge.png"
    alt="Tackle Box of Savings on LinkedIn"></a><a href="http://www.topfishingsites.com/"><img src="http://www.topfishingsites.com/button.php?u=TBOS"
    alt="Top Fishing Websites at TopFishingSites.Com" border=
    "0"></a><a href=
    "http://www.bigfishtackle.com/top50/3203"><img src=
    "http://www.bigfishtackle.com/cgi-bin/top50/topsites.cgi?action=button&amp;id=3203"
    border="0" alt="bigfishtackle icon"></a><a href=
    "http://4reelfishing.net/topsites/"><img src=
    "http://4reelfishing.net/topsites/button.php?u=TBOS" alt=
    "4reel fishing top fishing sites" border="0"></a><a href=
    "http://cyber-lake.com/topsite/"><img src=
    "http://cyber-lake.com/topsite/button.php?u=TBOS" alt=
    "cyber-lake.com Top Fishing Sites" border="0"></a><br>
    Copyright &copy; 2012 Tackle Box of Savings &nbsp; All rights reserved.
    </div>
    </div>
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-31963875-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    
     </body>
    </html>

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