How do I force/enable vertical scrolling in this html5/css3 page?
[ redacted ] is the sample I'm monkeying with.
[ redacted ] is the related css file.
It's just filler text and a sample image, but I'm new to this and don't know what I'm doing.
I want: The logo image and 3 color-animated links to be stationary in the top-left of the page. A blue bar to run horizontally across the page, underneath the logo+links. Content to flow in a liquid fashion (dynamic resizing?) Scrolling to work.
I'm having trouble with that last part. Through CSS witchcraft and negative margins, I can get it to look "right" on my 1280x1024 Chromium browser, but if I open it in firefox or change the resolution, the content overflows and there isn't a scrollbar with which to look at the rest of the content. I can't even use the [DOWN] key to scroll.
What am I doing wrong? How do I force the rest of the content to be displayed and navigable? Am I improperly implementing CSS?
EDIT: I was using
position:fixed rather than
position:absolute. Changing all of those references from fixed to absolute (and then revising the margins) worked beautifully.
The finished product is up at [ http://blasdev.heliohost.org/apx/about.html ].
Thanks, El Yobo!
Styling the #content div with position:absolute rather than position:fixed will solve your scrolling issues, but you will need to tweak other things. Absolute position pulls the content completely out of the normal flow, so scrolling no longer works; a good example of CSS positioning is available on A List Apart.