Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] 100% width Horizontal Nav

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #30254
    UFNITE
    Member

    I’m creating a navigation bar that has a 100%width background and the container for the list nav items will be 940px.

    I did this with position: relative but everytime i resize the browser these items move across the background container, unless i set the margin to 0 auto, from which they will just stay in the center position. What can i do to keep the nav items to the left side of my 940px container while maintaining the 100% background width.

    Thanks.

    < div id="navHold" >

    #navHold {
    background-repeat: repeat-x;
    width: 100%;
    height: 30px;
    top: 150px;
    z-index: 9999;
    position: relative;
    background-color: #333;
    }

    #Navigation li {
    float: left;
    list-style: none;
    padding: 8px 6px;
    line-height: 14px;
    color: #FFF;
    height: 14px;
    }
    #Navigation li a {
    display: block;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    font-family: Helvetia, Arial;
    float: left;
    }
    #79679
    UFNITE
    Member

    Thanks muthu2010, That fixed it partially. But when i try to add a left: 150px; with position relative declaration to #Navigation li so i can put the items at the edge of the 940px container it starts to move around again when i resize.

    #79670
    jamygolden
    Member

    Do you have a link to an example?

    Here is a simple navigation menu tutorial.

    #79671
    UFNITE
    Member

    sure i do, is there some site which allows you to upload code and view it live?

    #79662
    UFNITE
    Member

    Here is the page.
    http://ufunite.justfree.com/test.html

    As you can see i want the nav links to line up with the left of the top header without moving when i resize the browser page. I was thinking about adding another div to the outter UL div and give it a fixed width 700px and maybe float to the left , but it didnt work.

    Once i figure out how to master navigation menus, hopefully i wont run into these problems.

    #79664
    jamygolden
    Member

    Add this:

    #Navigation{height: 35px; margin: 0 auto; width: 960px;}

    and change #Navigation li to this:

    #Navigation li  {
    float: left;
    list-style: none;
    padding: 8px 6px;
    line-height: 14px;
    color: #FFF;
    height: 14px;
    margin: 0;
    padding: 0;
    }
    #79665
    UFNITE
    Member

    Thank you jamy_za that worked. So really it was just adding some declarations to specify the width of the main #navigation so that it would stay inside the container?

    #79667
    jamygolden
    Member

    Exactly.

    I think a more efficient way of laying out the page would be like this.

    Instead of having #navigation absolutely positioned and stretch across the screen like that, I would have it centered, like the other elements, and have the background image of <body> that dark-grey block, background-position it and and repeat-x.

    #79668
    UFNITE
    Member

    I’m just thinking of adding a fixed footer to the bottom of that e.g.

    #footer {
    clear: both;
    color: #999999;
    background-color: #DCC2A7;
    background-attachment: scroll;
    width: 100%;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0pt;
    margin-left: auto;
    padding-top: 30px;
    font-weight: normal;
    height: 30px;
    }

    can this be easily done with my code or will i have to restyle things?

    #79654
    jamygolden
    Member

    It can be done. There is nothing wrong with the way you have done it. I was just giving a tip to simplify the layout for next time :)

    Another tip:
    You could use shorthand for this:

    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0pt;
    margin-left: auto;

    The same effect can be achieved with this:

    margin: 0 auto;
    #83017
    jamesspratt
    Member

    Ok, I’m sure you’ve all got better things to do, but…

    CSS is not my bag, I just dabble, I want to extend just the colouring and bordering of the header and footer, leaving the nav as is. My CSS is a bit of a mess but anyone got a quick fix?

    Appreciated.

    James

    http://jamesspratt.org

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.