I’ve read an article somewhere saying that it is important to place important content at the beginning near the top of the html tag because spiders views that most importantly. I am wondering How I could make my navigation which is at the top of my page not be at the top and use CSS to make it look at the top. Would this be possible?
You’ll have to show us some more of your css and html so we can get an idea of the structure you have.
You should be absolutely placing #nav as far as I can tell and not the inner ul anyway.
Show us the html structure you have - you should be soing something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#test {
padding-top: 50px;
width:760px;
margin:auto;
position:relative;/* needed for stacking context */
border:1px solid #000;
}
ul#nav {
position: absolute;
top: 0;
left: 0;
margin:0;
padding:0;
border-bottom: 5px solid #453d34;
width:760px;
list-style:none;
text-align: center;
font-size: 21px;
}
ul#nav li {
margin-left: 15px;
display: inline;
}
</style>
</head>
<body>
<div id="test">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tincidunt leo nec placerat. Nam diam enim, pretium id ullamcorper eu, ullamcorper dictum nisl. Aliquam eget nisl mauris. Sed commodo euismod purus. Nullam vulputate interdum metus sit amet sollicitudin. Mauris bibendum nunc consequat nibh dignissim quis consectetur leo vestibulum. Phasellus nec neque a tellus fermentum euismod ac eget ante. Quisque et libero lorem. Etiam quis felis varius nibh fermentum feugiat quis sed lectus. Vivamus dui quam, bibendum eget bibendum nec, imperdiet quis leo. Integer nec nibh eu felis fermentum laoreet vel ac orci. Mauris eu velit nulla. Phasellus bibendum, augue sed ornare tincidunt, erat metus dignissim tortor, sit amet bibendum est magna vel mauris. Pellentesque sapien eros, rutrum eleifend porttitor cursus, aliquet in velit. Mauris erat leo, accumsan vitae feugiat eget, rhoncus sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam porta, nunc et luctus tristique, libero ligula venenatis justo, eu consequat odio ipsum eget dolor. Etiam condimentum, justo eu viverra sagittis, erat odio mattis tellus, elementum aliquet diam tortor vitae libero. </p>
<ul id="nav">
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</div>
</body>
</html>
here is my entire css:
@charset "UTF-8";
/* CSS Document */
html, body {
background-color: #1f1e1c;
height: 100%;
padding: 5px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
#container {
width: 980px;
margin: 0;
}
#left {
float: left;
width: 205px;
height: 500px;
background-color: #453d34;
background-image: url(images/side1.png);
background-position: bottom;
background-repeat: no-repeat;
color: #d9c494;
text-align: center;
}
#right {
position: relative;
padding: 3em 10px 0;
float: left;
width: 750px;
background-color: #d9c494;
background-image: url(images/up1.png);
background-repeat: no-repeat;
}
#mascot {
margin-top: 25px;
margin-right: 25px;
}
#nav {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
text-align: center;
font-size: 21px;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #453d34;
}
#nav li {
margin-left: 15px;
display: inline;
}
#nav li:hover {
color: #453d34;
}
h1 {
margin-left: 30px;
font-size: 36px;
}
.inside {
margin-left: 50px;
width: 600px;
font-size: 16px;
}
#footer {
background-color: #453d34;
height: 20px;
margin-right: 50px;
margin-left: 5px;
color: #1f1e1c;
}
.pushfive {
margin-left: 65px;
}
#footerbarimage {
vertical-align: bottom;
}
I changed it to only the nav, and what it has done is put at the top left, however my text isn’t centered and one of my h1 tags which is right beneath that is overlayed above the navigation. also the bottom border isn’t extending the full lenght of the div like it did before.
Thanks for the help so far! 
I’ve read somewhere (maybe on this forum) that it’s possible that when the navigation links are at the bottom of the site, it makes google index site deeper.
Is it true?
You didn’t provide the html so I just have to guess at your structure. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@charset "UTF-8";
/* CSS Document */
html, body {
background-color: #1f1e1c;
height: 100%;
padding: 5px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
#container {
width: 980px;
margin: 0;
border:1px solid #000;
background-color: #d9c494;
}
#left {
float: left;
width: 205px;
min-height: 500px;
background-color: #453d34;
background-image: url(images/side1.png);
background-position: bottom;
background-repeat: no-repeat;
color: #d9c494;
text-align: center;
}
#right {
position: relative;
padding: 3em 10px 0;
float: right;
width: 750px;
background-color: #d9c494;
background-image: url(images/up1.png);
background-repeat: no-repeat;
}
#mascot {
margin-top: 25px;
margin-right: 25px;
}
#nav {
position: absolute;
top: 0;
left: 0;
margin:0;
padding:0;
list-style:none;
text-align: center;
font-size: 21px;
border-bottom: 5px solid #453d34;
width:770px;
}
#nav li {
margin-left: 15px;
display: inline;
}
#nav li:hover {
color: #453d34;
}
h1 {
margin-left: 30px;
font-size: 36px;
}
.inside {
margin-left: 50px;
width: 600px;
font-size: 16px;
}
#footer {
background-color: #453d34;
height: 20px;
color: #1f1e1c;
clear:both;
}
.pushfive {
margin-left: 65px;
}
#footerbarimage {
vertical-align: bottom;
}
</style>
</head>
<body>
<div id="container">
<div id="right">
<h1>Heading</h1>
<p>content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </p>
<ul id="nav">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
<div id="left"> </div>
<div id="footer">footer</div>
</div>
</body>
</html>
You need to set the width of the absolute menu as in the examples I have already given you. If there are overlaps then just add more padding to the top of the right container to preserve the menu.
If you are also looking for equal columns the you should add a repeating image to the container to imitate two full length columns.
It’s definitely not Titanium, that’s a Perl wrapper for CGI::Application, a Perl web framework made of stitching together little CGI modules : )
Saying the content that comes earlier on the page is somehow more important is as silly as saying the first half of an encyclopedia is more important. Lawlz.
I heard that if you sacrifice a year-old goat with a white front left hoof on the Holy Night of the sacred pagan goddess Oester using a dagger made of alloy metal, Google will index more of your site. Just something I heard, though.
Hi,
The answer is still exactly the same and the code I have already given has been close enough for you to accomplish this each time
Here is one last try with the last html you offered tidied up a bit.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jaipai Homepage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@charset "UTF-8";
/* CSS Document */
html, body {
background-color: #1f1e1c;
height: 100%;
padding: 5px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
#container {
width: 980px;
margin: 0 auto;
background-color: #453d34;
overflow:hidden;
}
#left {
float: left;
width: 205px;
min-height: 500px;
background-color: #453d34;
background-image: url(images/side1.png);
background-position: bottom;
background-repeat: no-repeat;
color: #d9c494;
text-align: center;
}
#right {
position: relative;
padding: 3em 10px 0;
float: right;
width: 750px;
background-color: #d9c494;
background-image: url(images/up1.png);
background-repeat: no-repeat;
}
#mascot {
margin-top: 25px;
margin-right: 25px;
}
#nav {
position: absolute;
top: 0;
left: 0;
width:780px;
text-align: center;
font-size: 21px;
border-bottom: 5px solid #453d34;
margin:0;padding:10px 0;
list-style:none;
}
#nav li {
margin-left: 15px;
display: inline;
}
#nav li:hover {
color: #453d34;
}
h1 {
margin-left: 30px;
font-size: 36px;
}
.inside {
margin-left: 50px;
width: 600px;
font-size: 16px;
}
#footer {
background-color: #453d34;
height: 20px;
margin-right: 50px;
margin-left: 5px;
color: #1f1e1c;
}
.pushfive {
margin-left: 65px;
}
#footerbarimage {
vertical-align: bottom;
}
</style>
</head>
<body>
<div id="container">
<div id="right">
<h1>Phasellus eu venenatis ligula</h1>
<p class="inside"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ligula elit. Nam tempus sapien quis nunc faucibus mattis. Pellentesque non magna eros. Praesent leo ligula, viverra ut molestie ut, feugiat luctus nulla. Duis semper scelerisque cursus. Vivamus at iaculis felis. Proin nibh ante, luctus id tristique ac, placerat eget mauris. Aliquam auctor tellus eu nunc sagittis et vehicula arcu molestie. Donec non lectus ut enim varius porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p class="inside">Vestibulum purus leo, imperdiet sed vehicula vel, ullamcorper cursus urna. Nulla accumsan imperdiet lorem ac porta. Integer nec orci magna, in tincidunt quam. Praesent sed varius nibh. Nulla imperdiet dolor et dolor posuere egestas. Mauris varius, ante non aliquet dictum, augue enim bibendum ante, vitae bibendum nisl lectus ac turpis. Phasellus sed sodales tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi rhoncus pharetra consequat. Duis justo nisl, accumsan et imperdiet a, mattis a justo. Ut nec mi quis eros luctus rhoncus. Nulla facilisi. </p>
<ul id="nav">
<li>Home,</li>
<li> Blog,</li>
<li> Portfolio,</li>
<li>Contacts,</li>
<li>Network, </li>
</ul>
<div id="footer">
<p class="pushfive">© 2010 </p>
</div>
</div>
<div id="left"> <img src="images/logo.png" width="205" height="184" alt="jaipai, logo" /> </div>
</div>
</body>
</html>
Hope that helps
For SEO specific questions you should ask in the SEO forums after reading the sticky threads there which will cover most of these issues.
for the guy above me: I’ve read articles saying that search engines take things at the top of the page more meaningful, so when you have navigations after your <html> or <body> tag it will use up some of your meaningful space. (sorta)
here is my html code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jaipai Homepage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="left">
<img src="images/logo.png" width="205" height="184" alt="jaipai, logo" />
</div>
<div id="right">
<h1>Phasellus eu venenatis ligula</h1>
<p class="inside"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut ligula elit. Nam tempus sapien quis nunc faucibus mattis. Pellentesque non magna eros. Praesent leo ligula, viverra ut molestie ut, feugiat luctus nulla. Duis semper scelerisque cursus. Vivamus at iaculis felis. Proin nibh ante, luctus id tristique ac, placerat eget mauris. Aliquam auctor tellus eu nunc sagittis et vehicula arcu molestie. Donec non lectus ut enim varius porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<br /><br />
Vestibulum purus leo, imperdiet sed vehicula vel, ullamcorper cursus urna. Nulla accumsan imperdiet lorem ac porta. Integer nec orci magna, in tincidunt quam. Praesent sed varius nibh. Nulla imperdiet dolor et dolor posuere egestas. Mauris varius, ante non aliquet dictum, augue enim bibendum ante, vitae bibendum nisl lectus ac turpis. Phasellus sed sodales tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi rhoncus pharetra consequat. Duis justo nisl, accumsan et imperdiet a, mattis a justo. Ut nec mi quis eros luctus rhoncus. Nulla facilisi.
<br /><br /></p>
<div id="nav"><ul>
<li>Home,</li>
<li> Blog,</li>
<li> Portfolio,</li>
<li>Contacts,</li>
<li>Network, </li>
</ul>
</div>
<div id="footer"><p class="pushfive">© 2010 </p></div>
</div>
</div>
</body>
</html>
<ot>Your sacrifice is consumed in a burst of flame!–More–
You glimpse a four-leaf clover at your feet.
Actually, it is a ‘Silver Dagger’ but obviously you have to be in good standing with your god - that just grants; “I’m Feeling Lucky™”. ;)</ot>
I think it is more legacy than anything else; in the olden days most crawlers only indexed a specific amount of characters let’s say for example the first 250 characters/words thus the others were basically un-indexed. Things have improved since then and gone are the days of the Penny-farthing.
Really? I heard titanium…I’ll make sure to use alloy and let you know of any differences I notice
okay, so I’ve did what you’ve told me and so far its a step forward, however I have a border-bottom which is a solid colour which stays down.
this is my css for my nav bar.
#nav {
padding-top: 50px;
text-align: center;
font-size: 21px;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #453d34;
}
#nav ul {
position: absolute;
top: 0;
left: 0;
}
#nav li {
margin-left: 15px;
display: inline;
}
If your navigation is a fixed height then yes it would be possible.
You would absolutely place the navigation into position at the top of the page from somewhere lower down the html. The space that you place the navigation into should be preserved which is usually accomplished by applying some padding-top to the page wrapper.
If use use em measurements then this should allow for text to be resized without overlapping. Of course if the nav height changes at a later date you have to also change the amount of padding to match.
The benefits of moving stuff around like this for SEO is debatable and as google itself says if the only reason you are doing something is to influence search results then you are doing it wrong.
Well structured and well written content is what really counts.
There is a danger that if you put your navigation too far down the page then the rest of the site may not get indexed and you lose out anyway.
If your navigation is massive then its probably ill thought out to start with.
Here’s a rough example of how to do it anyway:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:20px 0;
}
#outer {
position:relative;/* stacking context for absolutely placed navigation */
width:960px;
margin:auto;
border:1px solid #000;
font-size:93%;
padding:3em 10px 0;/* preserve space for nav*/
}
h1, h2 {
text-align:center;
font-size:150%;
}
h2 {font-size:120%}
p {margin:0 0 1em}
ul#nav {
list-style:none;
margin:0;
padding:5px 0;
width:980px;
border-bottom:1px solid #000;
position:absolute;
top:0;
left:0;
text-align:center;
background:#fcc;
}
ul#nav li {
display:inline;
white-space:nowrap;
border-right:1px solid #ccc
}
ul#nav li a, ul#nav li span {
text-decoration:none;
color:red;
padding:15px 25px;
position:relative;
}
ul#nav li a:hover,
ul#nav li.current a,
ul#nav li span {
color:#fcc;
background:red;
border:1px solid #000;
padding:14px 24px;
}
</style>
</head>
<body>
<div id="outer">
<h1>Welcome to My page</h1>
<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tincidunt leo nec placerat. Nam diam enim, pretium id ullamcorper eu, ullamcorper dictum nisl. Aliquam eget nisl mauris. Sed commodo euismod purus. Nullam vulputate interdum metus sit amet sollicitudin. Mauris bibendum nunc consequat nibh dignissim quis consectetur leo vestibulum. Phasellus nec neque a tellus fermentum euismod ac eget ante. </p>
<h2>Secondary Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tincidunt leo nec placerat. Nam diam enim, pretium id ullamcorper eu, ullamcorper dictum nisl. Aliquam eget nisl mauris. Sed commodo euismod purus. Nullam vulputate interdum metus sit amet sollicitudin. Mauris bibendum nunc consequat nibh dignissim quis consectetur leo vestibulum. Phasellus nec neque a tellus fermentum euismod ac eget ante. Quisque et libero lorem. Etiam quis felis varius nibh fermentum feugiat quis sed lectus. Vivamus dui quam, bibendum eget bibendum nec, imperdiet quis leo. Integer nec nibh eu felis fermentum laoreet vel ac orci. Mauris eu velit nulla. Phasellus bibendum, augue sed ornare tincidunt, erat metus dignissim tortor, sit amet bibendum est magna vel mauris. Pellentesque sapien eros, rutrum eleifend porttitor cursus, aliquet in velit. Mauris erat leo, accumsan vitae feugiat eget, rhoncus sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam porta, nunc et luctus tristique, libero ligula venenatis justo, eu consequat odio ipsum eget dolor. Etiam condimentum, justo eu viverra sagittis, erat odio mattis tellus, elementum aliquet diam tortor vitae libero. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tincidunt leo nec placerat. Nam diam enim, pretium id ullamcorper eu, ullamcorper dictum nisl. Aliquam eget nisl mauris. Sed commodo euismod purus. Nullam vulputate interdum metus sit amet sollicitudin. Mauris bibendum nunc consequat nibh dignissim quis consectetur leo vestibulum. Phasellus nec neque a tellus fermentum euismod ac eget ante. Quisque et libero lorem. Etiam quis felis varius nibh fermentum feugiat quis sed lectus. Vivamus dui quam, bibendum eget bibendum nec, imperdiet quis leo. Integer nec nibh eu felis fermentum laoreet vel ac orci. Mauris eu velit nulla. Phasellus bibendum, augue sed ornare tincidunt, erat metus dignissim tortor, sit amet bibendum est magna vel mauris. Pellentesque sapien eros, rutrum eleifend porttitor cursus, aliquet in velit. Mauris erat leo, accumsan vitae feugiat eget, rhoncus sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam porta, nunc et luctus tristique, libero ligula venenatis justo, eu consequat odio ipsum eget dolor. Etiam condimentum, justo eu viverra sagittis, erat odio mattis tellus, elementum aliquet diam tortor vitae libero. </p>
<ul id="nav">
<li class="current"><span>Menu</span></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>
</body>
</html>
I don’t find it to be that great a benefit. Links to your site with relevant anchor text will do you more good.
In a simple two column, left hand nav site you might be better off just floating your content and navigation right. That way, the nav appears on the left but is below the content in the HTML.
This can also be a boon to making a single-column mobile stylesheet, where you’d like the content to show up before the nav.
I’ve read those articles and I’ve googled a few things. However, for me I have a 2 column design with my navigation at the top of my second column. Is it still possible?
Yes it is and we’ve both actually given you the answer - what is it that you don’t understand exactly?
The example I showed shows you exactly how to place the navigation at the top of a column. You can have as many columns as you like it makes no difference. You just preserve the space and then absolutely place the code at the top. The position:relative on the parent creates the stacking context fro the absolute child.
Where do you see a problem in doing this and maybe we can point you in the right direction?