PDA

View Full Version : Make page scroll but navbar stay put?


scifin
09-18-2006, 02:53 PM
I'm making a new site and I'd like to have a navbar either at the top or bottom of the screen that always stays locked there but still allows the rest of the page to scroll underneath it.

This is the test page I've been working on: http://www.scifinmusic.com/test.html

This is a picture of what I'd like it to look like:
http://scifinmusic.com/sample.html

I'd really appreciate some help on this one as I have no clue how to make the frickin' thing do what I want it to.

domedia
09-18-2006, 03:38 PM
No picture in your post.

The basics of this is to set height and width of the area you want to be scrollable, and then set overflow:auto in CSS.

A quick tutorials on making scrollable areas was written by Ranjan and is here:
http://www.dreamweaverclub.com/css-scroller.php

scifin
09-18-2006, 06:46 PM
OK, I'm not sure why the pic didn't show up but I just added it to a page so you can see what I'm saying; the addy is:
http://www.scifinmusic.com/sample.html

I read that tutorial yesterday but I'm not looking to do anything to the scroll bars; I want to fix the position of a navbar at the bottom of the screen and lock it there.

chriskq
09-19-2006, 01:10 AM
so should be able to do using position absolute and relative.
aldo putting a higher z-index on the nav div than the pageWrap div should work.

i think what u r trying to do could also be done with a dhtml menu.... or *shudders* frames.

domedia
09-19-2006, 01:05 PM
I read that tutorial yesterday but I'm not looking to do anything to the scroll bars; I want to fix the position of a navbar at the bottom of the screen and lock it there. Styling the scrollbars is totally optional. The article describes how you can set a fixed size on an area. If you want to have the non-scrollable area on bottom of the viewport, you can look into the Catfish technique described by Sitepoint
http://www.sitepoint.com/blogs/2005/10/18/the-catfish-part-1/
It goes a little further and explains how you can make some areas transparent which you can ignore, it's optional as well. :-)

scifin
09-20-2006, 04:40 PM
OK, I'll see if I can work it out. Thanks for the info.