SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Manna's Avatar
    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    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>
    It's not always a good solution to have your navigation after your content because you may have a lot of content and search engines may fail to index the site because they may only read so much content. (See the stickies in the SEO forum for more info).

  3. #3
    SitePoint Addict Manna's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •