homepage Welcome to WebmasterWorld Guest from 54.197.189.108
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, Moderator: open

CSS Forum

    
Absolute positioning
Carpy




msg:1216886
 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.

IE:

Header Section
Navigation Links
Content

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

 

coopersita




msg:1216887
 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.

evo81




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

Hey,

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

Carpy




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

Here is what i have currently:

HTML CODE:

<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>
</DIV>

EXTERNAL CSS:

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;
repeat-x;
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;
}
div.headerhome{
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

Moby_Dim




msg:1216890
 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 :

<head>
<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;}

#header{
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;
}
-->
</style>
</head>

<body>
<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>
<div id="topnav"> menu to be positioned here </div>
</div>
</div>
</body>

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