...

View Full Version : CSS Layout Help



Script Idgit
05-07-2009, 09:57 PM
I have been working on my health site (http://www.4yourbody.info) on and off for about 4 1/2 years now, and just recently published a complete rewrite.

I just recently learned that in SEO best practices that there is something called first link priority; meaning that the first text links in a page carry the most weight toward ranking for certain search terms. If you look at my site you will see at the top that the first links are home, about us, etc. - very bad for SEO.

What I need to know is if it's possible to change my css and html code so that the layout of the page is still the same, but the code for all those links would be at the end of my page.

If so, please tell me how if it's easy for you, or point me in the right direction so that I can learn how to do it myself.

CSS:

* {
margin: 0;
padding: 0;
}

body {
margin: 0px;
background: #002F43 url(images/bg01.jpg) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 15px;
color: #B9B9B9;
}

h1 {
font-size: 26px;
letter-spacing: -0.03em;
margin-bottom: .5em;
}

h2 {
font-size: 1.25em;
margin-bottom: 1em;
color: #ffffff;
}

h3 {
font-size: 1em;
}

p, ul, ol {
margin-bottom: 1.0em;
line-height: 150%;
}

p {
}

ul, ol {
margin-left: 3em;
}

blockquote {
margin-left: 3em;
margin-right: 3em;
}

a {
color: #8AC800;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

strong {
color: #D7D7D7;
}

/* Background */

#bg1 {
background: url(images/bg02.jpg) no-repeat center top;
}

#bg2 {
background: url(images/bg03.jpg) no-repeat center top;
}

#bg3 {
background: url(images/bg04.jpg) repeat-y center top;
}

#bg4 {
background: url(images/bg05.jpg) no-repeat center top;
}

#bg5 {
background: url(images/bg06.jpg) no-repeat center bottom;
}

/* Header */

#header {
width: 900px;
height: 90px;
margin: 0px auto;
color: #FFFFFF;
}

#header img {
float: left;
margin: 0px;
padding: 6px 0px 0px 25px;
}

#header h2 {
float: right;
margin: 0px;
padding: 62px 35px 0px 0px;
font-size: 24px;
}

/* Header2 */

#header2 {
width: 900px;
height: 88px;
margin: 0px auto;
}

/* Menu */

#menu {
float: left;
}

#menu ul {
margin: 0px;
padding: 34px 0px 0px 0px;
list-style: none;
text-transform: lowercase;
}

#menu li {
float: left;
}

#menu a {
padding-left: 30px;
font-size: 18px;
color: #FFFFFF;
}

/* Search */

#search {
float: right;
}

#search form {
margin: 0px;
padding: 35px 80px 0px 0px;
}

#search fieldset {
margin: 0px;
padding: 0px;
border: none;
}

#search input.text {
width: 160px;
background: none;
border: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 26px;
font-size: 16px;
padding: 0px 0px 5px 0px;
color: #AEC38B;
}

#search input.button {
display: none;
}

/* Page */

#page {
position: relative;
width: 846px;
margin: 0px auto;
padding: 20px 0px 0px 0px;
}

#page .nav {
padding: 0px 0px 5px 28px;
font-size: 12px;
}

/* Content */

#content {
float: right;
width: 583px;
}

.bm {
position: relative;
float: right;
margin-top: 18px;
margin-right: 15px;
}

.post {
}

.post .title {
height: 49px;
background: url(images/img02.gif) no-repeat;
padding: 0px 0px 0px 0px;
}

.post .title h1 {
float: left;
padding: 6px 0px 0px 24px;
color: #FFFFFF;
}

.post .entry {
padding: 13px 17px 0px 17px;
text-align: justify;
}

.post .entry p {
text-indent: 15px;
}

.post .entry .img_right {
margin-left: 10px;
float: right;
background: #ffffff;
}

.post .entry .img_left {
margin-right: 10px;
float: left;
background: #ffffff;
}

.post .entry .gras td {
width: 50%;
}

.post .entry .gras th {
text-align: center;
}

#bmi1 {
margin-left: 10px;
float: left;
background: #003300;
}

#bmi {
line-height: 100%;
margin-left: 10px;
float: right;
background: #ffffff;
}

.post .meta {
height: 100%;
clear: left;
margin: 0px 0px;
padding: 15px 0px 0px 0px;
border-top: 1px solid #262626;
}

/* Sidebar */

#sidebar {
float: left;
width: 236px;
}

#sidebar ul {
margin: 0px;
list-style: none;
}

#sidebar li {
background: url(images/img03.gif) no-repeat;
padding: 0px 0px 0px 0px;
}

#sidebar h2 {
margin: 0px;
padding: 14px 0px 16px 0px;
text-align: center;
font-size: 15px;
color: #FFFFFF;
}

#sidebar li ul {
padding: 0px 19px 5px 19px;
}

#sidebar li li {
background: none;
border-bottom: 1px solid #262626;
}

/* Sidebar ad divs */

.ads {
margin-top: 10px;
margin-bottom:10px;
text-align: center;
}

/* Footer */

#footer {
}

#footer p {
text-align: center;
color: #566D77;
}

#footer a {
color: #8097A1;
text-decoration: underline;
}

Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Contact Information</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="contact, contact us" />
<meta name="description" content="Contact information page for 4yourbody." />
<meta name="Distribution" content="Global"/>
<meta name="Rating" content="General"/>
<meta name="Language" content="en-us"/>
<meta http-equiv="Revisit-After" content="30 days"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="bg1">
<div id="header">
<img src="images/4yourbody_logo.gif" alt="4yourbody Logo: Free health and nutrition information." width="375" height="80" />
<h2>Health, Nutrition and Proper Diet</h2>
</div>
<!-- end #header -->
</div>
<!-- end #bg1 -->
<div id="bg2">
<div id="header2">
<div id="menu">
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="privacy.html">Privacy</a></li>
<li><a href="site_map.html">Site Map</a></li>
<li><a href="http://www.4yourbody.info/disclaimer">Disclaimer</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="search">
<form method="get" action="http://www.google.com/custom" target="google_window">
<fieldset>
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="ie" value="windows-1252" />
<input type="hidden" name="oe" value="windows-1252" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="client" value="pub-4855258898460788" />
<input type="text" name="q" value="Search by Google" id="q" class="text" />
<input type="submit" value="Search" class="button" />
</fieldset>
<input name="sitesearch" type="radio" value="http://www.4yourbody.info" value="checked">
<font size="2" face="Arial">4yourbody</font>
<font size="2" face="Arial">
<input type="radio" name="sitesearch">
Web</font>
</form>
</div>
<!-- end #search -->
</div>
<!-- end #header2 -->
</div>
<!-- end #bg2 -->
<div id="bg3">
<div id="bg4">
<div id="bg5">
<div id="page">
<div id="content">
<div class="post">
<div class="title">
<h1>Contact Us</h1>
<div class="bm">
<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_pub="4yourbody";</script>
<a href="http://www.addthis.com/bookmark.php?v=20" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()">
<img src="images/bookmarks/img01.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<!-- AddThis Button END -->
</div>
</div>
<div class="entry">
<div class="img_right">
<script type="text/javascript"><!--
google_ad_client = "pub-4855258898460788";
/* 300x250, created 12/21/08 */
google_ad_slot = "5145830753";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div><p>Questions --------- Suggestions,
Corrections ----------- Comments:
<a href="mailto:support@4yourbody.info">
support@4yourbody.info</a><p>Snail Mail:<br/>4yourbody.info<br/>
818 Greentree Dr.<br/>Talladega, AL 35160</p>
</div>
<div class="meta">
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<h2>Health Information Articles</h2>
<ul>
<li><a href="diet_weight_loss/default.html">Diet and Weight Loss</a></li>
<li><a href="diseases_conditions/default.html">Diseases and Conditions</a></li>
<li><a href="general_health/default.html">General Health</a></li>
<li><a href="mental_health/default.html">Mental Health</a></li>
<li><a href="nutrition/default.html">Nutrition</a></li>
<li><a href="personal_care/default.html">Personal Care</a></li>
<li><a href="senior_health/default.html">Senior Health</a></li>
<li><a href="womens_health/default.html">Women's Health</a></li>
</ul>
</li>
<li>
<h2>Nutritional &amp; Health Books</h2>
<!--webbot bot="Include" u-include="includes/books/health_default.htm" tag="BODY" --></li>
<li>
<h2>Give the Gift of Health</h2>
<!--webbot bot="Include" u-include="includes/general_health/donate.htm" tag="BODY" --></li>
<li>
<h2>Clean, Healthy Air &amp; Water</h2>
<!--webbot bot="Include" u-include="includes/ads/125x125_environment.htm" tag="BODY" --></li>
<li>
<h2>Amazon Health</h2>
<!--webbot bot="Include" u-include="includes/ads/125x125_amazon.htm" tag="BODY" --></li>
<li>
<h2>Related Health Links</h2>
<div class="ads">
<script type="text/javascript"><!--
google_ad_client = "pub-4855258898460788";
/* 160x90, created 12/21/08 */
google_ad_slot = "9002037867";
google_ad_width = 160;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</li>
<li>
<h2>Spread the Health</h2>
<!--webbot bot="Include" u-include="includes/general_health/add_2.htm" tag="BODY" --></li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 40px;">&nbsp;</div>
</div>
<!-- end #page -->
</div>
</div>
</div>
<!-- end #bg3 -->
<!--webbot bot="Include" u-include="includes/general_health/copyright.htm" tag="BODY" --><!-- end #footer --><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-914607-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body></html>

marilynn.fowler
05-07-2009, 11:21 PM
You could use absolute positioning; then you could have your links anywhere you want. Keep in mind, however, that people with handhelds might resent having to scroll to the bottom to get to the links.

Script Idgit
05-07-2009, 11:25 PM
Huh? And, please type slow - I'm slightly retarded.

Script Idgit
06-08-2009, 06:43 PM
No edit button available. Please mark resolved.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum