Forum Moderators: not2easy
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
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.
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
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
<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.
