PDA

View Full Version : Resolved Menu won't stay in place



FrancisK7
Mar 22nd, 2010, 02:15 AM
I'm having an issue figuring out why the menu will not stick in place...

http://www.franciscossette.com/

If you resize the browser window menu will move... everything else stays in position as it should.

My HTML and CSS both validate, so it's not a bug. Likely a coding error I can no longer see :(

Thanks for your help

Swish
Mar 22nd, 2010, 03:41 AM
If I understood you question correctly then -


ul#menunav {
list-style:none outside none;
padding-left:25%;
padding-bottom:15px;
padding-top:21px;
}

should fix that for you :)

Excavator
Mar 22nd, 2010, 04:45 AM
Hello FrancisK7,
Have a look at these changes -
#menu {
width:100%;
/*margin: 0 auto; #menu is full width so no need for auto. Will inherit margin:0;padding:0; from reset*/
height: 93px;
background:url(img/continuousparchment_bottom.jpg) top center repeat-x;
text-align:left;
}
ul#menunav {
width: 1000px; /*I just grabbed the same width as your #container*/
margin: 0 auto; /*centered the same as your #container
padding: 21px 0 15px;
list-style:none;


}

FrancisK7
Mar 22nd, 2010, 04:47 AM
What I mean is that if you resize the browser window horizontally, you'll see that the top menu doesn't stay in place relative to the rest of the page. It "slides" horizontally.

I need it to stay where it is no matter how you resize the window. The "Home" should be always aligned with the left border of the orange panels... your proposed fix did not change that.

Thanks for trying though!

FrancisK7
Mar 22nd, 2010, 04:50 AM
Excavator, your fix worked. Though I don't understand why it did.

Could you explain? Why is setting the width important? At my resolution, when browser window is fully open, the menu was in place where it was suppose to be.

Excavator
Mar 22nd, 2010, 05:04 AM
Excavator, your fix worked. Though I don't understand why it did.

Could you explain? Why is setting the width important? At my resolution, when browser window is fully open, the menu was in place where it was suppose to be.

To center an element you need three things:

a DocType Declaration
an element with a width
that elements left/right margins set to auto

I just grabbed the 1000px width because that's what your #container is and the menu fit in it. Now #menunav moves exactly the same as #container.

It was working before, just the way you told it to - padded over from the left side ???px That padding only worked on your screen, anyone with a different resolution or browser size would still have the menu padded over that far but #container would be centered to the new screensize.