PDA

View Full Version : navigation bar is fixed while page content stil scrolls?


monkeymedia
10-04-2010, 01:42 PM
http://www.avagarosa.redwebhosting.co.uk/

Hi again

how would I go about making the grey bar continue all the way across the screen, but keep the nav stuff in the middle. the background image is fixed so in theory I can add the side portions of the grey bar to that. So I guess my question really is how to make the nav bar not scroll off the screen with everything else?

Corrosive
10-04-2010, 01:57 PM
Try wrapping the nav bar in another div but move the whole thing out of the wrapper (so it ends up being full width). Then wrap the nav bar again with a width and auto margins to centre it. If you then don't want it to scroll off the screen you can use position:fixed; << usual story with IE6 though!

Corrosive
10-04-2010, 02:12 PM
Have just read that back... Does it make any sense?

monkeymedia
10-04-2010, 04:22 PM
yep makes perfect sense, cheers Corrosive.

Corrosive
10-04-2010, 05:19 PM
That's good, I was half expecting you to say 'What the hell are you talking about?' ;)

gentleone
10-04-2010, 06:01 PM
position:fixed; << usual story with IE6 though!

If you want position fixed also working in IE6 then this piece of CSS will do the trick.

* {
margin:0;
padding:0;
}

html, body {
height: 100%; overflow:auto;
}

body #fixedElement {
position:fixed !important;
position: absolute;
bottom: 0;
}

Corrosive
10-04-2010, 06:02 PM
Nice tip, I like that one :)

gentleone
10-04-2010, 07:17 PM
Nice tip, I like that one :)

Yes, just in case you might need it, but I didn't invent this little trick... I'm just searching for these kind of things on the net when I need it... it's one of those many snippets that's sitting in my code snippets folder. :)

Here's my code snippet folder:
http://snipplr.com/

Just joking :) nonetheless a very handy site