At 10:38 AM 7/22/2005, Juanita wrote:
Different pages contain text of different lengths, and are in a container
which expands as necessary, meaning some pages need to scroll - some
don't. Consequently, the pages 'jump' when switching between pages that
scroll and those that don't.
...
Does anyone know what I can do so all the pages stay in the same place
regardless of the length of the page.
...
http://www.kcsm.org/railroadempire.htm
Juanita,
As you've pointed out, your page content is 'jumping' horizontally when the
vertical scrollbar appears & disappears. This is because the position of
your content column is tied to the window width through centering. In
other words, your page is doing exactly what you've told it to do.
There are a number of solutions ranging from terrible to not too bad,
including:
- One (possibly awful) way to combat this is to force a vertical scroll bar
at all times, even with short pages. Perhaps the best way to do this is to
design your pages with a minimum height that's slightly more than 600
pixels, the height of an 800x600 resolution screen, or slightly more than
768, the height of the next size up on the PC. (The jumping would still
occur on taller monitors, but would be less noticeable.)
- You could also do this by including a kind of vertical "spacer" page
element that's a few thousand pixels high that would force a scroll bar on
every page, regardless of screen resolution. I wouldn't like this, myself,
because scroll bars are usually an indicator that there's content down
there to look for, and if all I found was dead space I'd be subliminally
irritated.
- You could set the horizontal position of your column without regard to
the window width. If you use a fixed margin-left, your column will only be
centered on one particular width of window; you could optimize it for the
width you believe is most common or use script to tweak it on the fly.
- You can create a kind of "max-margin-left" effect by centering your
content column inside a div with a fixed width. If that width is the
usable width of a window that's got a vertical scroll bar, then your
column's position won't be affected by whether or not the scrollbar is
present. However, the container would be a fixed width so it would be
optimized for one window size. (Again, you can use javascript to tweak
dimensions based on usable window width, but that's grist for a different
mill.)
- You can eliminate scroll bars altogether by setting body {overflow:
hidden;} which I wouldn't recommend since it will prevent people with small
windows from scrolling to see your content.
- You can design your page so that everything shows on an 800x600 screen,
and then put your long content into a scrolling div. One drawback of this
approach is that, at least in some browsers, you can't use the mouse wheel
to scroll down inside a clipped div with {overflow: scroll;}.
- You might have to consider simply living with the "jumping"; it's not the
end of the world.
Regards,
Paul
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
