Results 1 to 2 of 2

Thread: Absolute Positioning: Nav Bar

  1. #1
    Join Date
    Jul 2007
    Posts
    5

    Absolute Positioning: Nav Bar

    I am trying to use absolute positioning to get my nave bar where I want it. I need it 250px from the top and 80px from the right.

    When I use abs. pos., it places it relative to the browser window, but when I float it, it places it relative to the content div, just all the way to the right where I don't want it.

    Here is the markup for css and html.
    CSS below:

    body {
    background-color:#99bf60;

    }
    #wrapper {
    text-align: left;
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    }
    #content {
    width: 850px;
    height: 530px;
    background-image:url(../images/home_bg.jpg);
    }
    #navigation {
    margin-top: 250px;
    float: right;
    width: 240px;
    height: auto;
    border: solid 1px #ffbfef;
    background-color:#bf60a7;
    }

    HTML below:

    <div id="wrapper">
    <div id="content">
    <div id="navigation">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="Pages/our_team.html">Our History</a></li>
    <li><a href="Pages/past_projects.html">Past Projects</a></li>
    <li><a href="Pages/contact_us.html">Contact Us</a></li>
    <li><a href="Pages/contact_us.html">Contact Us</a></li>
    <li><a href="Pages/contact_us.html">Contact Us</a></li>
    </ul>
    </div>
    </div>
    </div>

    Any suggestions?

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    That's right; position: absolute will be related to the top left corner of the screen normally.

    However, if you put a position: absolute element inside a container that has position: relative, it will take its position from the top left corner of that container.

    So if you make your wrapper position: relative and put the nav position: absolute inside it, the nav div will be fixed inside the wrapper, but if the wrapper moves (for instance centralising in different size windows), the nav will move with it but stay fixed relative to the wrapper.

    http://www.wickham43.supanet.com/tutorial/divboxes.html
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Posting Permissions

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