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:
<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:
<!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"> HOME</a> | <a href="#"> ABOUT US</a> | <a href="#"> FEATURED PRODUCTS</a> | <a href="#"> COUPONS </a> |<a href="#"> MADE IN THE USA </a>|<a href="#"> REVIEWS </a>|<a href="#"> SIGNUP </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> </font><font color="yellow"><font size="4">Discounts for Fishermen </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&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 © 2012 Tackle Box of Savings 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.