SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
Mar 28, 2008, 20:16 #1
- Join Date
- Apr 2006
- Location
- Vancouver, WA
- Posts
- 340
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How to have html content first when Nav is horizontal
I was wondering how to get my main content at the top of my html document when the Navigation goes across under the header. Here is how my main layout looks:
<div id="wrapper">
<div id="header>
</div>
<div id="nav">
</div>
<div id="content">
</div>
<div id="footer>
</div>
</div>
Thanks
If this is discussed somewhere a link would be great because I did not find it.
-
Mar 29, 2008, 07:59 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
It all depends on the exact structure of your page but if your navigation and header are fixed heights then you simply absolutely place them into position from the end of the html.
You will need to preserve the space by using a place holder such as some margin or padding top on the wrapper and then absolutely place the elements in that preserved space.
To account for text re-sizing you should allocate the space using ems to allow the are to grow with the text.
If your header and nav are fluid heights then it can't really be done as you can't make room for an unknown height.
Here is the basic example.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> * {margin:0;padding:0} h1,p{margin:0 0 1em 0;padding:5px;} #wrapper{ margin:auto; width:760px; border:1px solid #000; position:relative; padding:11em 0 0 0; background:blue; color:#fff; } #header{ width:760px; background:#ffffcc; color:#000; position:absolute; left:0; top:0; height:9em; } #content{width:760px} #header ul{ text-align:center; background:red; color:#fff; border-top:1px solid #000; border-bottom:1px solid #000; padding:.5em 0; } #header li { display:inline; list-style:none; } </style> </head> <body> <div id="wrapper"> <div id="content"> <p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p> <p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p> <p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p> </div> <div id="header"> <h1>Header goes here</h1> <p>Some header content</p> <ul id="nav"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </div> <div id="footer"> <p>footer</p> </div> </div> </body> </html>
-
Mar 29, 2008, 09:55 #3
- Join Date
- Apr 2006
- Location
- Vancouver, WA
- Posts
- 340
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you so much Paul. I had never used absolute positioning because I never really understood how it works and when I had tried it gave odd results. I will follow your example and give it a try. Thanks for the explanation.
Bookmarks