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
  • September 15, 2010 at 6:11 am #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;
    
}
    September 15, 2010 at 6:44 am #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.

    September 15, 2010 at 6:56 am #79670
    jamygolden
    Member

    Do you have a link to an example?

    Here is a simple navigation menu tutorial.

    September 15, 2010 at 6:58 am #79671
    UFNITE
    Member

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

    September 15, 2010 at 7:14 am #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.

    September 15, 2010 at 7:24 am #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;
    
}
    September 15, 2010 at 7:28 am #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?

    September 15, 2010 at 7:42 am #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.

    September 15, 2010 at 8:28 am #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?

    September 15, 2010 at 8:50 am #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;
    July 7, 2011 at 7:15 pm #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

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