| SitePoint Sponsor |
Static Div's and scrolling
I'm constructing a page that contains 2 Div's. One as a small title bar with some navigational controls, and then a second div, potentially containing alot of information which will probably scroll out of the viewport.
I need to keep the first Div (title) on the page at all times while the user scrolls the page!!
Can anybody offer any guidance on how to make this happen, I've tried fixing the position and setting z-indexes on one and both Div's but with no effect.
Mitch
How about assigning "overflow:scroll" to the 2nd <div> and making its content area smaller? Something like this:
Hope this helps!Code:<html> <head> <style type="text/css"> #topframe { width: 100%; height: 200px; } #content { height: 300px; overflow: scroll; } </style> </head> <body> <div id="topframe"> Nav links, header images, etc........... </div> <div id="content"> <h3>Welcome</h3> <p>Once this content area grows to more than 300 pixels in height, the scrollbars should appear.</p> </div> </body>
That does work but it's not really what I was trying to achieve.
in effect, I want one Div to be affected by viewport scrollbars but not the other (so it appears to float)
Thanks for replying
I understand what you're trying to accomplish, but fixed positioning is not supported well in all browsers yet. Wish I could help you out more.
Fixed positioning works great in Gecko-based browsers (Mozilla, Netscape--recent versions, of course), but not at all in IE. I use it for the main navigation on my site ( http://www.goodchrist.com ). It keeps the navigation in view when the user scrolls down in Mozilla, but in IE, you still have to either scroll back up or all the way down (to the text nav at the bottom) to navigate. At least once IE catches up I won't have to change a thing (unless they do something stupid).
I'd imagine you could come up with some sort of javascript hack to get the effect you're looking for cross-browser, I just didn't feel like going to the trouble for mine.
Hi,
This is probably not any help but:
Mozilla 1.1 supports fixed positioning so your idea would work on that platform.
IE6 supports fixed positioning of the background image. So if you only needed a title and not any navigation you could fix an image in one place on the background.
i.e.
Otherwise there's always frames or javascript - (both unpleasant).Code:<style type="text/css"> <!-- body { background-image: url("image.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position :50% 50%; } --> </style>
Paul
Posting Permissions
Bookmarks