2 replies [Last post]
gfonline
Offline
newbie
Lake Tahoe
Last seen: 12 years 19 weeks ago
Lake Tahoe
Timezone: GMT-8
Joined: 2010-01-06
Posts: 2
Points: 3

If i understand correctly the spiders look at the content highest up on the page, so i am tring to do some SEO on my index.html page. The way my page was laid out it has some testimonials and an opt-in box as some of the first content on the page. i want to move these down without changing the layout of the page. Do i do this within CSS? If so how?

i tried to just cut and paste the div id “sidebar” which contains the testimonials and container down below everything but it changed the layout.

this is page I am referencing: www.lowcostloanmodificaiton.com

If there is a good tutorial on css that can help me better get up to speed on CSS without going over the top complicated please point me to it. thanks!

Here is the CSS:

/********************************************
   HTML ELEMENTS
********************************************/ 
 
/* top elements */
* { padding: 0; margin: 0; }
 
body {
	margin: 10px 0 20px 0; 	padding: 0;
	font: normal .9em/1.6em 'Trebuchet MS', sans-serif;
	color: #000;
	background: #6D5434;
	text-align: center;	
	height: 100%;	
}
 
/* links */
a { background: inherit; color: #000099; text-decoration: underline; }
a:hover { background: inherit; color: #006699; text-decoration: underline; }
 
/* headers */
h1 {
	font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #FF0000;
}
h2, h3 {
	font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #000;
}
h1 { font-size: 1.2em; }
h2 { font-size: 1.2em;}
h3 { font-size: 1.0em; }
 
p, h1, h2, h3 {
	margin: 10px 15px;
}
ul, ol {
	margin: 10px 30px;
	padding: 0 15px;	
	color: #000;	
}
ul span, ol span {
	color: #000;
}
 
/* images */
img {
  border: 0px solid #DDD; 
  padding: 5px;
  background-color: #FFF;
}
img.float-right {
  margin: 5px 0px 5px 15px;  
}
img.float-left {
  margin: 5px 15px 5px 0px;
}
blockquote {
	margin: 15px; 	padding: 0 10px 0 20px;  	
/*  background: #FAFAFA url(quote.gif) no-repeat 3px 5px; 
	border: 1px solid #eee;
	font: bold 1.2em/1.5em 'Trebuchet MS', Tahoma, sans-serif; 
	color: #666666;	 */
}
 
 
#shadow-container {
	position: relative;
	left: 3px;
	top: 3px;
	margin-right: 3px;
	margin-bottom: 3px;
}
 
#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
	position: relative;
	left: -1px;
	top: -1px;
}
 
	#shadow-container .shadow1 {
		background: #F1F0F1;
	}
 
	#shadow-container .shadow2 {
		background: #DBDADB;
	}
 
	#shadow-container .shadow3 {
		background: #B8B6B8;
	}
 
	#shadow-container .container {
		background: #ffffff;
		border: 1px solid #848284;
		padding: 3px;
		text-align: center;	
	}
	/* New version as class */
	.shadow-container {
	position: relative;
	left: 3px;
	top: 3px;
	margin-right: 3px;
	margin-bottom: 3px;
}
 
.shadow-container .shadow2,
.shadow-container .shadow3,
.shadow-container .container {
	position: relative;
	left: -1px;
	top: -1px;
}
 
	.shadow-container .shadow1 {
		background: #F1F0F1;
	}
 
	.shadow-container .shadow2 {
		background: #DBDADB;
	}
 
	.shadow-container .shadow3 {
		background: #B8B6B8;
	}
 
	.shadow-container .container {
		background: #ffffff;
		border: 1px solid #848284;
		padding: 3px;
		text-align: left;	
	}
	.shadow-container .container1 {
	position: relative;
	left: -1px;
	top: -1px;
}
	.shadow-container .container1 {
		background: #ffffff;
		color: #FF0000;
		border: 1px solid #848284;
		padding: 3px;
		text-align: left;	
	}
	.shadow-container .container1 ol {
		color: #FF0000;
	}
 
.form_buy {
		text-align: center;	
	}
/***********************
	  LAYOUT
************************/
 
#wrap {
	width: 870px;
	margin: 0 auto;
	background: #FFF url(wrap-bg1.jpg) repeat-y;
}
#header-content, #content {
	width: 840px;	
}
 
/* header */
#header {
	position: relative;
	height: 98px;
	text-align: left;		
	margin: 0; padding: 0;	
	background: #FFF;
}
#header .headerphoto {
	position: absolute;
	right: 15px ; top: 15px;
	width: 455px;
	height: 78px;
	background: #FFF url(oaktown1.jpg) no-repeat;	
}
#header #logo-box {
	position: absolute;
	left: 15px ; top: 15px;
	width: 380px;
	height: 78px;	
	background: #4E3525;
}
#logo-box #logo {
	position: absolute;	
	font: bold 16px 'Trebuchet MS', Sans-serif;
	/*letter-spacing: -2px; */
	color: #F3F0EB;
	margin: 0; padding: 0;
 
	/* change the values of left and top to adjust the position of the logo */
	top: 12px; left: 49px;
}
#logo-box #slogan {
	position: absolute;	
	font: bold 24px 'Trebuchet Ms', Sans-serif;
	text-transform: none;
	color: #F3F0EB;	
	margin: 0; padding: 0;
 
	/* change the values of left and top to adjust the position of the slogan */
	top: 27px; left: 30px;
}
#logo-box #slogan2 {
	position: absolute;	
	font: bold 12px 'Trebuchet Ms', Sans-serif;
	text-transform: none;
	color: #F4CC8B;	
	margin: 0; padding: 0;
 
	/* change the values of left and top to adjust the position of the slogan */
	top: 52px; left: 49px;
}
/* header menu */
#menu {	
	clear: both;
	margin: 0; 
	padding: 0 0 10px 0;		
	width: 870px;		
	background: #FFF url(wrap-bg1.jpg) repeat-y;
	float: left;
}
#menu ul {
	font: bolder 12px 'Trebuchet MS', sans-serif;
	width: 840px;
	color: #FFF;
	background-color: #4E3525;		 	
	margin: 0 15px;
	padding: 0;
	display: inline;
	border-bottom: 6px solid #FFF;
	float: left;	
}
#menu li {
	float: right;
	list-style: none;
}
#menu li a {
	display: block;
	padding: 5px 15px;	
	color: #FFF;	
	text-decoration: none;	
}
#menu li a:hover {
	background: #F3F0EB;
	color: #4E3525;
}
#menu li a#current  {
	background: #FF9933;
	color: #4E3525;
}
 
/* content */
#content-wrap {
	clear: both;
	float: left;
	width: 100%;
	background: #FFF url(content2.jpg) repeat-y;
}
#content {
	clear: both;
	text-align: left;	
	padding: 0;
	margin: 0 auto;			
}
 
/* sidebar */
#sidebar {
	float: left;
	width: 21%;
	margin: 0 0 10px 5px; padding: 0;	
}	
#sidebar h1 {
	padding: 10px 0px 5px 10px;
	margin: 0;	
	color: #660000;	
}
.testimonial {
	margin: 10px 0 15px 0;
}
.opt-in {
	margin: 10px 0 15px 0;
}
.opt-in p{
	margin: 10px 5px;
}
 
 
/* sidebar menu */
#sidebar ul.signature {
	list-style:none;
	margin: 10px 0 15px 0;
	padding: 0;		
}
#sidebar ul.signature li {
	padding: 10px 10px;
	border-bottom: 1px dashed #D5D5D5;
	color: #990000;
}
#sidebar ul.signature a {
	display:block;
	font-weight:normal;
	color: #333;
	height: 1.5em;	
	padding:.3em 0 .3em 15px;
	line-height: 1.5em;
	border-bottom: 1px dashed #D5D5D5;
	text-decoration:none;
}
#sidebar ul.signature a.top{	
	border-top: 1px dashed #D5D5D5;
}
#sidebar ul.signature a:hover {
	padding: .3em 0 .3em 10px;
	border-left: 5px solid  #993333;
	color: #993333;		
}
 
/* main */
#main {
	float: left;
	width:77%;	
	margin: 0 0 10px 0; padding: 0 0 0 5px;	
}
#main h1 {
	padding: 10px 0 5px 5px;
	margin: 0 0 0 10px;
/*	border-bottom: 1px dashed #D5D5D5; 	*/
}
#main h2 {
	padding: 10px 0 5px 5px;
	margin: 0 0 0 10px;
	text-align: center;
/*	border-bottom: 1px dashed #D5D5D5; 	*/
}
#main ul.benefit li{
	font-size: 1.2em;
}
#main ul.benefit i{
	font-size: .825em;
	font-weight:normal;
}
.intro {
	margin: 0; padding: 0;	
	font-size: 110%;
	font-weight:bold;
	text-align: center;
}
.intro h1 {
	text-align: center;
	margin: 0; padding: 0;	
	color: #FF0000;
	font-size: 190%;
}
.intro h2 {
	text-align: center;
	margin: 0; padding: 0;	
	color: #000000;
	font-size: 120%;
}
.book_content {
	/* padding (top right bottom left)*/
	margin: 0; padding: 0 15px 0 55px;
 
}
.book_content h1 {
	text-align: center;
	margin: 5px 0 0 15px; padding: 0;	
	color: #FF0000;	
	font-size: 160%;
}
.book_content p {
	margin: 0; padding: 0;
	font-size: 120%;
	padding: 15px 0 0 25px; 	
	background: #FFF url(check.gif) no-repeat 3px 50%;	
}
.centered {
	margin: 0 0 10px 0; padding: 0 15px 0 15px;
	font-size: 110%;
	font-weight:bold;
	text-align: center;
}
.centered h1 {
	text-align: center;
	margin: 0; padding: 0;	
	color: #FF0000;
	font-size: 150%;
}
.centered h2 {
	text-align: center;
	margin: 0; padding: 0;	
	color: #000000;
	font-size: 120%;
}
.letter {
	/* padding (top right bottom left)*/
	margin: 0; padding: 5px 0 0 15px;
	font-size: 100%;
}
.letter h2 {
	text-align: center;
	margin: 0; padding: 0;	
	font-size: 140%;
	color: #FF0000;	
}
.facts h2{
	/* padding (top right bottom left)*/
	text-align: center;
}
.jumpstart1 {
	/* padding (top right bottom left)*/
	margin: 0 5px 0 15px; padding: 5px 5px 5px 15px;
	background: #FFFFCC;
	border: 1px solid #000;
	font-size: 14px;
}
.note {
	font-size: 10px;
	font-style: italic;
}
.faq a {
	font-size: 12px;
	font-weight:bold;
}
.faq li {
	font: bold 12px 'Trebuchet MS', Tahoma, Sans-serif;
}
.preq {
	clear: both;
	text-align: left;
	font-size: .9em;
	padding: 10px 25px 10px 25px;
	margin: 0 25px 0 25px;
}
 
/* footer */
#footer {
	clear: both;
	margin: 0; padding: 12px 0 0 0;
	font: normal .92em/1.5em 'Trebuchet MS', Tahoma, Arial, sans-serif;
	height: 45px;
	background: url(footer-bg2.jpg) no-repeat left bottom;
	color: #666666;
	text-align: center;
}
#footer p {
	margin: 0; padding: 0;
}
#footer a {
	text-decoration: none;
	color: #777;	
}
#footer a:hover {
	text-decoration: underline;
	color: #333;
}
 
/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right {	text-align: right; }
 
/* additional classes */
.clear { clear: both; }
.gray  { color: #BFBFBF; }
 
 
 
.Highlight {
	background-color: #FF0;
}
.highlight_center {
	background-color: #FF0;
	text-align: center;
}
[code]

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Its best to keep the page in

Its best to keep the page in its natural flow. Moving blocks of Content with css, will not change the content search bots see. The read html. You should structure the page in such a way where all the most important stuff is high up.

gfonline
Offline
newbie
Lake Tahoe
Last seen: 12 years 19 weeks ago
Lake Tahoe
Timezone: GMT-8
Joined: 2010-01-06
Posts: 2
Points: 3

correct url