#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep 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&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>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0

    Not one reply huh?


    Anyone willing to help?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    829
    Rep Power
    275
    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.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by DonR
    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.
    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
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    829
    Rep Power
    275
    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
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0
    Thanks for the help Don. I will see if I can implement that.

IMN logo majestic logo threadwatch logo seochat tools logo