Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0

    How do I center my page and make the background a different color?


    I can do this in HTML but I am learning CSS and am having major problems doing this very simple task. So, can a veteran lend me a hand? My site is all the way to the left and I want it centered. Then I want to have a seperate color for the background than white. Been trying it to no avail. I can add this code in my body tag to get what I want:
    Code:
    <table border="0" width="100%" bgcolor="#cae2a1">
    <tr>
       <td height="" align="center" valign="top" ><br />
    However when I try to validate this it says to use CSS to do this. This is where I am struggling. Can anyone help me figure this out?

    Here is the code to the page in question:

    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>
    Thanks for any help.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    I can get your content to center, but not your header. You need to remove the code in red for a start:
    Code:
    .centerComponents
    
    			
    body 
    	{
    	width:1000px;
    	color: #6b6c5a;
    	font-size: 19px;
    	font-family: Arial,Verdana, Geneva, sans-serif; 
    	line-height: 0px;
    	margin:0px;
    	padding:0px
    	}
    Get rid of that class. The way CSS read this is "apply the styles in the curly braces to a body element, only when it is within a container with a of 'centerComponents'" <---Well, pretty much (Kravvits! helps please!)

    As you can see, the <body> element is your 'outermost' containing element. Delete that in red anyhow.

    I managed to get your content centered by removing the 'left' property and adding margin: auto;, overwrite your div#columns declaration with this:
    Code:
    div#columns {
        position: relative;
        width: 1000px;
    	height: 1280px;
        top: -117px;
    	margin: auto;
        background-color: #e6e6d9;
    }
    Also, I just ran your code through the HTML validator and it returned 18 errors and 8 warnings, mostly deprecated tags such as <font>. Just use CSS to manipulate the 'font-family' property as you have done for the body element.

    Edit: Just got your header to center. Ok overwrite div#head with this:
    Code:
    div#head {
        background-color: #6B6C5A;
        height: 92px;
        width: 1000px;
        margin: auto;
    }
    Deleted position: absolute, top: 5px andleft: 0px.
    Added margin: auto;

    AND overwrite your div#nav with this:
    Code:
    #nav {
        background: url("images/nav-green.png") repeat scroll 0 0 transparent;
        color: #FFFFFF;
        height: 23px;
        margin: auto;
        position: relative;
        text-transform: uppercase;
        width: 1000px;
    }
    Deleted top and left and added margin: auto

    Here is what your site will look like if you follow what I've said. PS-click on ss1.png: http://www.labtec.0fees.net/

    Kind regards,

    NM.
    Last edited by Nanomech; February 11th, 2013 at 03:55 PM.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Originally Posted by Nanomech
    Get rid of that class. The way CSS read this is "apply the styles in the curly braces to a body element, only when it is within a container with a of 'centerComponents'" <---Well, pretty much (Kravvits! helps please!)
    Yes, that style would only be applied when the <html> element, the only ancestor of the <body> element, had that class.

    The term you're looking for is "declaration block".

    Originally Posted by Nanomech
    As you can see, the <body> element is your 'outermost' containing element.
    Is it?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Originally Posted by Kravvitz
    Yes, that style would only be applied when the <html> element, the only ancestor of the <body> element, had that class.

    The term you're looking for is "declaration block".


    Is it?
    Lol, thank you for that. I believe so in terms of being able to put content, for example you wouldn't put any content directly in the <html> tag, before the <body>, although this is very badly explained having sat and thought about my post.

    well to be honest, my time spent on forums I have come across people putting content directly within the <html> tag

    Thanks for the actual terminology also ^^

    Kind regards,

    NM.
    Last edited by Nanomech; February 8th, 2013 at 09:53 PM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Originally Posted by Nanomech
    Lol, thank you for that. I believe so in terms of being able to put content, for example you wouldn't put any content directly in the <html> tag, before the <body>, although this is very badly explained having sat and thought about my post.

    well to be honest, my time spent on forums I have come across people putting content directly within the <html> tag
    You're welcome.

    Yes, only the <head> and <body> elements (and optionally, comments) may be children of <html>.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0

    Thank you very much


    Nanomech thank you very much for your expertise. Also Kravitz. While I am not sure I really understand all that you said, I will apply your fixes and see what happens. I was not able to see your example with the link you provided NM. It just took me to a hosting companies home page.

    Thanks for helping me because well I need it. This is still kinda foreign to me.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0

    Corrections made but not working....HELP


    Nanomech,

    I made the changes you highlighted above and it has completely altered my page. No header is even seen, nothing is centered, so I am not sure what is wrong? I am using Firefox to view this.

    Here is my code with the changes you recommended.

    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">
    		
    
    			
    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") repeat scroll 0 0 transparent;
        color: #FFFFFF;
        height: 23px;
        margin: auto;
        position: relative;
        text-transform: uppercase;
        width: 1000px;
    }
    
    div#head {
        background-color: #6B6C5A;
        height: 92px;
        width: 1000px;
        margin: auto;
    }
    
    div#columns {
        position: relative;
        width: 1000px;
    	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;
        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>
    Any thoughts on why this is not working?

    Thanks
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0

    New changes still not working


    Anyone, please reveiw this and let me know what is the deal? I separated the CSS from the HTML page. So I want to post the CSS code and the HTML code.

    CSS Code first:

    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>
    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>
    Thanks for any help.
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure it's set it to use "CSS level 3".)

    At least one white-space character is required between HTML attributes. So each
    Code:
    <a href="#"class="white">
    should be
    Code:
    <a href="#" class="white">
    HTML tags are not allowed in an external stylesheet (e.g. a ".css" file).

    <font> elements are obsolete and their use has been considered bad practice for many years.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0
    At least one white-space character is required between HTML attributes.
    Thanks for the reminder. I actually needed to remove those class attributes and forgot to do so. I just removed them entirely.
    HTML tags are not allowed in an external stylesheet (e.g. a ".css" file).
    I didn't know that so I removed them, thanks
    <font> elements are obsolete and their use has been considered bad practice for many years.
    OK, so how would I handle different styles for text within the same div? Here is another problem I am having for the head div.
    Code:
    <div id="head">
         <img src="images/logo_img.png" alt="Tackle Box of Savings Logo" height="88" width="153" border="0"><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>
    I have a logo that I want left justified with some space like 5px from the left. I then have that text Value in Every Tackle box that I want on the right and to be font size "5". How do I get rid of the inline styling and add it to the CSS div only?

    Thanks
    Last edited by Kravvitz; February 11th, 2013 at 03:51 PM. Reason: added [quote] tags
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by Kravvitz
    Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure it's set it to use "CSS level 3".)

    At least one white-space character is required between HTML attributes. So each
    Code:
    <a href="#"class="white">
    should be
    Code:
    <a href="#" class="white">
    HTML tags are not allowed in an external stylesheet (e.g. a ".css" file).

    <font> elements are obsolete and their use has been considered bad practice for many years.
    The following HTML code has passed with 0 errors yet it still doesn't work right.

    Code:
    <!DOCTYPE html>
    
    <html>
    
    	<head>
    	<meta charset="utf-8">
        <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
        <meta name="dcterms.created" content="Mon, 11 Feb 2013 21:13:43 GMT">
        <meta name="description" content="">
        <meta name="keywords" content="">
    		<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"></div><div style="overflow:hidden;"><BR><STRONG>"Value in Every Tackle Box"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Discounts for Fishermen&nbsp;&nbsp;&nbsp;</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" >
         </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="#">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="#"> SIGN UP</a></div>
    </div>
    </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"></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"
    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"></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"></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>
    Ideas?
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    It looks like the remaining problems are due to your incomplete understanding of how the positioning and layout properties work. For example, what relative positioning does is shift where an element appears to be without affecting the footprint of the element, so that other elements (that are not descendants of it) will act as if it's not relatively positioned. It's mostly only useful for making slight adjustments to positioning or sometimes for changing the order of columns. Here's a demo: http://www.css-101.org/relative-positioning/index.php

    It's best to use floats and margins to position things (at least until you're ready to learn some more advanced techniques like "inline-blocks" and "CSS tables").

    OK, so how would I handle different styles for text within the same div? Here is another problem I am having for the head div.
    [...]

    I have a logo that I want left justified with some space like 5px from the left. I then have that text Value in Every Tackle box that I want on the right and to be font size "5". How do I get rid of the inline styling and add it to the CSS div only?
    You can apply styles directly to the <strong> element. You could also wrap some of the text in a semantically neutral <span> elements. I suggest you learn how semantics apply to [X]HTML. Semantics is really a very important subject when it comes to [X]HTML.
    Last edited by Kravvitz; February 11th, 2013 at 04:01 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  24. #13
  25. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Hi keith,

    Sorry for the late reply, been working all day. I have attached the image of what I got, when I applied those styles which I spoke of:

    Are you sure you did exactly as I said?

    I'll have a go at debugging your new code. Have you got a live version of the new code? If not i'll just copy and paste your code for now.

    P.S - Does the image show the effect you wanted?

    Kind regards,

    NM.
    Attached Images
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by Nanomech
    Hi keith,

    Sorry for the late reply, been working all day. I have attached the image of what I got, when I applied those styles which I spoke of:

    Are you sure you did exactly as I said?

    I'll have a go at debugging your new code. Have you got a live version of the new code? If not i'll just copy and paste your code for now.

    P.S - Does the image show the effect you wanted?

    Kind regards,

    NM.
    Well your image looks good except the logo is not there. But that is right. I am not sure how you got that when I copied your code and pasted it and didn't?

    Since then, I have got other replies elsewhere (Trying to get this finished) and applied their suggestions and I am getting nowhere fast haha. Well, I now have the CSS in it's own page which is good. The HTML code has passed verification but it is not showing the head or the nav div and I do not know why.

    I can upload it to my server to help you see what I am getting.

    Thanks for your help NM

    Here is my site live with my current coding. http://tackleboxofsavings.com/new_tbos/TBOS4.html
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by Kravvitz
    It looks like the remaining problems are due to your incomplete understanding of how the positioning and layout properties work. For example, what relative positioning does is shift where an element appears to be without affecting the footprint of the element, so that other elements (that are not descendants of it) will act as if it's not relatively positioned. It's mostly only useful for making slight adjustments to positioning or sometimes for changing the order of columns. Here's a demo: http://www.css-101.org/relative-positioning/index.php

    It's best to use floats and margins to position things (at least until you're ready to learn some more advanced techniques like "inline-blocks" and "CSS tables").


    You can apply styles directly to the <strong> element. You could also wrap some of the text in a semantically neutral <span> elements. I suggest you learn how semantics apply to [X]HTML. Semantics is really a very important subject when it comes to [X]HTML.
    You are right Kravitz, my incomplete understanding of... (fill in the blanks) is my problem. I guess if I had complete understanding I would not be asking for help.

    Thanks for your help & suggestions.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo