Forum Moderators: not2easy
but i want my navigation to appear at the top of the page but in the html coding or without css styling appear at the bottom of the page!>?
any suggestions?
thanking you!
position: absolute;
top: 0;
left: 25px;
Below I've copied an example of how you can accomplish what you are after. It's by no means a solid layout, but good for playing with.
The trick here is to use absolute positioning, as RonPK said.
If you play around with the layout, try switching the width on #wrap to 750px. See how the navigation moves with the wrapper? That is because the #wrap is set to 'position:relative'.
An absolutely positioned element will position itself with respect to its nearest absolutely positioned ancestor. So in the example, the #nav positions itself absolutely with reference to the wrapper.
If a 'nearest absolutely positioned ancestor' does not exist, the element will position itself according to the viewport. To see this, try moving the final closing </div> above the <ul id="nav"> and see what happens (you'll need to have 'width:750px' for the #wrap to see the effect here). The nav now positions itself accoding to the viewport, and since it has 'left:0', the nav moves to absolute the left of the browser, and not the #wrap div.
Whew - longwinded. HTH!
ok so how do i go about positioning sumthing absoloutly within a centred layout?
Set the #wrap {width:750px} for a centering example.
<!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>
<title>test layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"><!--
body,html{margin:0;padding:0;text-align:center;font-family:"Trebuchet MS", sans-serif}
#wrap {text-align:left;margin:0 auto 0;width:100% /*set to 750px for an 800x640 layout*/;position:relative}
#header {width:100%;border:0px solid #000;background:#369;color:#ccc;height:90px;font-size:120px;line-height:100px;}
ul#nav, ul#nav li {list-style:none;margin:0;padding:0;font-size:14px;line-height:20px}
ul#nav {width:100%;position:absolute;top:80px;left:0}
ul#nav li a,ul#nav li {float:left;display:block;width:186px}
ul#nav li a:link,ul#nav li a:visited {background:#666;color:#ccc;text-align:center;border-left:1px solid #cc;border-right:1px solid #ccc}
ul#nav li a:hover{background:#369;color:#ccc;}
#leftcolumn {float:left;width:34.5%;background:#ccc;color:#369;height:500px;font-size:40px}
#rightcolumn {float:right;width:65.5%;background:#999;color:#369;height:500px;border-left:0px solid #000;font-size:40px}
#footer {width:100%;background:#369;color:#ccc;font-size:38px;margin:0;padding:0;line-height:30px}
--></style>
</head><body><div id="wrap">
<div id="header">Header
</div>
<div id="rightcolumn">rightcolumn
</div>
<div id="leftcolumn">leftcolumn</div>
<div id="footer">footer</div>
<ul id="nav">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div></body></html>
