SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Forgot how to keep menu buttons from moving

    I have created a new site for my business and have a header with a container and a menu with a container. When I contract the page the menu drops down and the background nav image does not go all the way across the page. The header and the nav should go all the way across no matter what resolution is being used or whatever size the browser window is. I forgot how to stop the problem. I have looked through other code I have and just can't seem to get this to work. The site is at www.foxdenwebsolutions.com/new_site/index.html. Please help this old mind remember how this is done. Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,586
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Firstly, I would suggest getting rid of the #nav_bg div and placing its styles directly on #header_container (you don't need two divs).

    Then you could try adding overflow:hidden to #header_container to stop the nave items from visually dropping.

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I tried to follow your directions but the nav completely disappears. I am not understanding exactly what you mean by removing the #nav_bg div. There is an image that runs the length of the page that is the background for the nav images I have in place. Also I didn't explain that I want the nav to be fluid like the rest of the page but not drop down when the page is contracted.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by cgacfox View Post
    I tried to follow your directions but the nav completely disappears. I am not understanding exactly what you mean by removing the #nav_bg div. There is an image that runs the length of the page that is the background for the nav images I have in place. Also I didn't explain that I want the nav to be fluid like the rest of the page but not drop down when the page is contracted.
    Hi,

    There is a conundrum here in that you have a fixed width nav containing elements of fixed width. There is no way that the nav can shrink unless you set the widths of the elements in percentages and use percentages for the margins also.

    There would still come a point when the nav would drop but it would be much later than it presently does and you could probably set a min-width to cater for this.

    Presently your only real option is to make the nav a fixed width so that the elements don't drop.

    e.g.

    Code:
    ul.menu {
    list-style:none outside none;
    margin-left:200px;
    padding:0;
    width:1050px;/* or whatever the exact width is*/
    
    
    
    }
    So either a change of design is needed or fix the width as mentioned above

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,586
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cgacfox View Post
    I am not understanding exactly what you mean by removing the #nav_bg div.
    Silly me, I meant to say #menu_container, not #header_container. Anyway, I just meant that you already have a #menu_container div, and so you could put the background image on that, rather than creating a div just for the background image.

    As for the other issues, follow Paul's advice.

  6. #6
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If I go with a change of design, can Sprite be used or do I need to think about some other type of horizontal nav? I really like Sprite now that I have used it a couple of times in other sites. If I need to think about something else that is fine though.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You can still use the sprite method, it is actually the best way to go since it preloads the hover state of the image.

    I think it would look best if you centered your nav items then you could eliminate that 200px left margin on the ul.

    You have 987px total width of the seven links, add 26px left and right padding to give it a total width of 1039px and center them up. That 1039px is the width of your main container also.

    You will need to set a min-width on the #nav_bg to hold it together at reduced widths though.
    You can
    Code:
    #nav_bg {
        background:url(../images/nav_bg.png) ;
        height: 70px;
        width: 100%;
        margin: auto;
        min-width:1039px;
    }
    
    
    ul.menu {
        list-style: none;
        padding: 0 26px;
        margin: 0 auto;
        width:987px; /*7 x 141px + 52px padding = 1039px total*/
    }

  8. #8
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur. That seemed to work. However, when I contract the page the menu bar runs all the way to the right but the header background of black does not. I changed the images and width to 1024 because that is better for visitors with 1024X768 resolutions. Also I have the middle content background quite large because I wanted the pattern to show but when I add more content, it doesn't expand as it should. Is it because the background image is too large? Do I need to rethink the background for the content?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, it's possible that the content element is collapsing due to floated children. Untested because I'm leaving soon, but giving the content element (that has the background) "overflow:hidden" should patch it up hopefully
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan, this worked. I am now working on adding the other pages and if I run into any more problems I will be back.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cgacfox View Post
    Thanks Rayzur. That seemed to work. However, when I contract the page the menu bar runs all the way to the right but the header background of black does not. I changed the images and width to 1024 because that is better for visitors with 1024X768 resolutions.
    Hi,
    You probably need to set a min-width:1024px; on your #header_container. You have it at width:100%; currently which is the width of the viewport at any given instance.
    Also I have the middle content background quite large because I wanted the pattern to show but when I add more content, it doesn't expand as it should. Is it because the background image is too large? Do I need to rethink the background for the content?
    You need to rethink that. If you want to keep the pattern and allow it to expand with content also it is going to require a different approach. You need to have the pattern fade out to a solid color where a thin repeat-y image can pick up from there and carry on down to the bottom image. The same thing will need to happen with that bottom image, that is it will need to fade out to a solid color at the top.

    You might be able to set the thin repeat-y slice on the #main_container then that image will pick up where #content_mdl pattern image ends. You will need to set a min-height on #content_mdl instead of height and set the pattern image as no-repeat.

    Update your page with the previous fixes given and the new images so we can see what is going on.


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
  •