Forgot how to keep menu buttons from moving

HTML & CSS
1

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

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

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

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.


ul.menu {
list-style:none outside none;
margin-left:200px;
padding:0;
[B]width:1050px;/* or whatever the exact width is*/
[/B]


}

So either a change of design is needed or fix the width as mentioned above :slight_smile:

5

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

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

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


[B]#nav_bg[/B] {
    background:url(../images/nav_bg.png) ;
    height: 70px;
    width: 100%;
    margin: auto;
    [COLOR=Blue]min-width:1039px;[/COLOR]
}


[B]ul.menu [/B]{
    list-style: none;
    [COLOR=Blue]padding: 0 26px;[/COLOR]
   [COLOR=Blue] margin: 0 auto;[/COLOR]
    [COLOR=Blue]width:987px; [/COLOR][COLOR=DarkGreen]/*7 x 141px + 52px padding = 1039px total*/[/COLOR]
}
8

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

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 :slight_smile:

10

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

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. :slight_smile: