Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Absolute positioning



9:15 am on Apr 21, 2006 (gmt 0)

10+ Year Member

Ive create the template for my site using <div> all the properties are held within CSS.

However for SEO purposes im trying to move my link code to the bottom so the main content is crawled first.


Header Section
Navigation Links

Could someone please provide a rough template of the code i should use so that Navigation Links is positioned at the bottom of the code, but the design layout remains the same?

I can provide the URL in a sticky if required


2:56 pm on Apr 21, 2006 (gmt 0)

10+ Year Member

It all depends on how flexible you need the design to be.

If your header and nav are a fixed size, then you can simply use absolute position, but if the header and/or nav are variable height, then it's going to be tricky.


7:37 pm on Apr 21, 2006 (gmt 0)

5+ Year Member


For a 2 column layout I would float the content right and the navigation left, assigning them each a precentage width. This way you can place the navigation div at the bottom of the code and it will float into the space next to the content.

Best Wishes


7:57 pm on Apr 21, 2006 (gmt 0)

10+ Year Member

Here is what i have currently:


<DIV id="frame">
<div class="headerhome" id="header"> </div>
<div id="topnav"> menu to be positioned here </div>
<div id="cookiecrumb"><a href="/">Holiday Park</a></div>
<div id="centcol">body text here</div>


body { margin: 10px; background-color: #FFCC00; text-align: center;}
img { border: 0; }
div#frame {
width: 729px;
margin: 0 auto;
background-color: #FFFFFF;
div#topnav {
width: 729px;
height: 30px;
text-align: center;
margin-bottom: 8px;
clear: both;
left: 394px;
top: 23px;
div#cookiecrumb { width: 699px; height: 15px; repeat-x; text-align: left; clear: both; float: left; margin-left: 30px;}

div#centcol {
float: left;
width: 530px;
text-align: left;
display: block;
visibility: visible;
margin-top: -18px;
margin-right: 9px;
margin-bottom: 0;
margin-left: 0;
padding-left: 30px;
width: 729px;
height: 159px;
background-color: transparent;
background: url(images/homepage.jpg);

In the code is wish:
<div id="topnav"> menu to be positioned here </div>

to be positioned near the bottom of the code, but the design to remain the same?

The reason is that this section will hold bulky code and links, so i wish the main body content to be crawled first.

thanks for any help


9:26 am on Apr 22, 2006 (gmt 0)

10+ Year Member

I have not fully understand the idea of page composition, so sorry, if something is not ok with this (cookiecrumb, etc), but the main idea is clear. Try some thing like this :

<style type="text/css">
body { margin: 0; padding : 0; background-color: #fc0; text-align: center;}
img { border: 0; }
a {font-family : Arial, sans-serif; font-size : 12px;}

#frame_outer, #frame_inner, #header, #topnav, #cookiecrumb, #centcol {position : absolute;}

#frame_outer {top : 10px; left : 0; width : 100%; padding : 0; margin : 0; background-color: #f00;}

#frame_inner {top : 0px; left : 50%; width : 730px; height : auto; margin: 0 auto 0 -365px; background-color: #fff;}

width: 730px;
height: 159px;
top : 0px;
left : 0px;
background-color: #00f;

#topnav {
width : 730px;
height : 30px;
top: 159px;
left: 0px;
text-align: center;
margin-bottom: 8px;
background-color: #ffc;

#cookiecrumb {
width : 700px;
height : 15px;
top : 189px;
left : 15px;
text-align: left;
background-color: #669;

#centcol {
width: 530px;
height : auto;
top : 204px;
left : 100px;
text-align: left;
background-color: #000;
color : #fff;

<div id="frame_outer">
<div id="frame_inner">
<div id="header">Header</div>
<div id="cookiecrumb"><a href="/">Holiday Park</a></div>
<div id="centcol">
<p>body text here</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<div id="topnav"> menu to be positioned here </div>

If you got the idea, you can easily adjust all the rest for your needs I believe.


Featured Threads

Hot Threads This Week

Hot Threads This Month