homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Absolute positioning

5+ Year Member

Msg#: 8970 posted 9:15 am on Apr 21, 2006 (gmt 0)

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



5+ Year Member

Msg#: 8970 posted 2:56 pm on Apr 21, 2006 (gmt 0)

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.


5+ Year Member

Msg#: 8970 posted 7:37 pm on Apr 21, 2006 (gmt 0)


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


5+ Year Member

Msg#: 8970 posted 7:57 pm on Apr 21, 2006 (gmt 0)

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


10+ Year Member

Msg#: 8970 posted 9:26 am on Apr 22, 2006 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved