• Locked
3 replies [Last post]
Sun, 2003-12-07 20:31
compmatt
Offline
Regular
Last seen: 17 years 27 weeks ago
Joined: 2003-11-05
Posts: 28
Points: 0

I have been reading up a bit on SEO (search engine optimization), and was trying to figure out how to make my content appear first in the html, while still having the navigation above it (for viewers).

Here is a very simplified version of my code:

<div id="container">

	<div id="header1">
		<!-- navigation goes here -->
	</div>

	<div id="spacer1">
		&nbsp;
	</div>	
	
	<div id="content">	
		<!-- content goes here -->
	</div>

</div>

and heres some css for it :

#container {
	margin-left: auto;
	margin-right: auto;
	width: 700px;
	height: 100%;
}

#header1 {
	height: 100px;
	background-color: #BBB;
}

#spacer1 {
	height: 20px;
	background-color: #FFF;
}

#content {
	background-color: #BBB;
}

Pretty Basic. Everything is just one column.. No floating or anything, the container is centered on the page.

Any Ideas? Thanks.

Top
Tags:
Mon, 2003-12-08 00:39
#1
Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 26 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

making content the first 'text' in the html

Probably something like this

<div id="container"> 

   <div id="content">    
      <!-- content goes here --> 
   </div> 


   <div id="header1"> 
      <!-- navigation goes here --> 
   </div> 
</div>

and this

body{text-align: center} /*added as IE does not recognise margin-left or right: auto.*/

#container { 
   position:relative; /*needed to contain the absolute position of the header*/
   width: 700px; 
   height: 100%; 
   margin-left: auto; 
   margin-right: auto; 
   text-align: left; /*needed to reverse body text align*/
} 

#header1 { 
   position: absolute; /*Needed to position header using top and left*/
   top: 0px
   left: 0px;
   height: 100px; 
   background-color: #BBB; 
} 

#spacer1 { 
   height: 20px; 
   background-color: #FFF; 
} 

#content { 
   background-color: #BBB;
   margin-top: 105px; /*needed to make room for the header*/  
}

Regards
Day

The only way to learn is to do it yourself

Top
Mon, 2003-12-08 02:06
#2
compmatt
Offline
Regular
Last seen: 17 years 27 weeks ago
Joined: 2003-11-05
Posts: 28
Points: 0

making content the first 'text' in the html

Well I think I must of simplified my html and css a bit too much for the post Smile
That gives me quite strange results, I will keep working on it though.

Edit: scratch that, got it working Smile

(I had several more header and spacer divs, i made a div to encompass everything above the content div)

div container
-> div content
-> div headercontainer

Thanks!

Top
Thu, 2003-12-18 20:21
#3
JohnO
Offline
Regular
Rochester NY
Last seen: 17 years 21 weeks ago
Rochester NY
Timezone: GMT-5
Joined: 2003-12-18
Posts: 16
Points: 0

making content the first 'text' in the html

the most important concepts for SEO is good meta tags, and use of H1-4 tags.. and title tags in the head...

or...

if your server handles SSI, you could include the same navigation on every page.. and then it wouldn't even show when the search engine crawls the page.. and it would hit the content... and it would be nice for changes as well

Top
  • Locked