CSS issues I am unable to resolve. Need help

Dev Shed Forums Sponsor:

January 22nd, 2013, 04:09 PM

keithscatch

Registered User

Join Date: Jan 2013

Posts: 16

Time spent in forums: 3 h 8 m 43 sec
Reputation Power: 0

CSS issues I am unable to resolve. Need help

Can someone lend a hand? I for the life of me cannot get this form I created to fit where I want it to fit. It is supposed to nicely fit in the lower right hand part of the page. Yet, it is falling outside of everything and to the left. Arrgghh. It is labeled contentbottomright.

Also, I have some tracking icons at the bottom that are not lining up to the footer with no space between them. As it is now, there is a ton of space between them and the footer and I can't figure out why?

Also, since I have 2 types of links I tried some code I found online to make some links white (Nav and footer) but the business link for softcooler I want to be blue. Both need to be yellow for the hover. Seems to work in Firefox but not IE.

Thanks for the help.

Here is the 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>
		<!--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: white;
	text-decoration: underline
	}

a:hover 
	{
	color: #fc0;
	text-decoration: none
	} 

--></style>
	</head>

	<body>

				<div id="nav">
			<a href="#" class="white">&nbsp;HOME</a>&nbsp; | <a href="#"class="white">&nbsp;ABOUT US</a> &nbsp; | <a href="#"class="white">&nbsp;FEATURED PRODUCTS</a>&nbsp; | <a href="#"class="white">&nbsp;COUPONS&nbsp;</a> |<a href="#"class="white">&nbsp; MADE IN THE USA&nbsp;</a>|<a href="#"class="white">&nbsp; REVIEWS&nbsp;</a>|<a href="#"class="white">&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&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 &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>

January 23rd, 2013, 08:56 AM

keithscatch

Registered User

Join Date: Jan 2013

Posts: 16

Time spent in forums: 3 h 8 m 43 sec
Reputation Power: 0

Not one reply huh?

Anyone willing to help?

January 23rd, 2013, 12:49 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 459

Folding Points: 29722 Folding Title: Starter Folder

Time spent in forums: 2 Weeks 1 Day 21 h 45 m 3 sec
Reputation Power: 216

I highly doubt that anyone is going to be able to help you with all of your code residing on a single line.
Please redo the layout of your code listing, so, its readable.
I normally just use an opening [code] tag , then copy/paste your code into your post, then, use a closing [/ code] tag (remove the space).
then, you will most likely be able to be helped.

January 23rd, 2013, 12:55 PM

keithscatch

Registered User

Join Date: Jan 2013

Posts: 16

Time spent in forums: 3 h 8 m 43 sec
Reputation Power: 0

Quote:

Originally Posted by DonR

Don, that is exactly how I added it. I am puzzled as to why the code is all on one line like this.

I recopied it and pasted it again and this time it made it correct. Weird. I also figured out the form thing in the lower right. I saw I had a } showing up in the wrong place.

I still have an issue with having my a.links all showing up as white. I want to have white links in my Nav and footer areas with yellow as the hover color but I want blue links in the main body area for any other link I wish to show. I can't seem to get that to show up as blue without making all a.links blue.

Here is the link I would like to be blue:
<a href="http://www.softcoolers.com">www.softcoolers.com</a>

Can you help with that?

Thanks

January 23rd, 2013, 02:45 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 459

Time spent in forums: 2 Weeks 1 Day 21 h 45 m 3 sec
Reputation Power: 216

I would setup the styling for your normal links first,then, create rules to target just the nav ID and the foot ID [and get rid of the white class).

Code:

a{color:<yournormal bluelinkcolor>;}
a:hover{color:<yournormal hovercolor>;}
#nav a, #foot a{color:"white";}
#nav a:hover, #foot a:hover{color:"yellow";}

similar to that

January 24th, 2013, 04:09 PM

keithscatch

Registered User

Join Date: Jan 2013

Posts: 16

Time spent in forums: 3 h 8 m 43 sec
Reputation Power: 0

Thanks for the help Don. I will see if I can implement that.

CSS issues I am unable to resolve. Need help

Developer Shed Advertisers and Affiliates