[thelist] Scrolling, no layers

[Chris Kaminski]

On Wednesday, June 26, 2002, at 01:12 PM, Michael Galvin wrote:

> But the problem is that I want the contents to be be centred on
> screen, so
> I'm pretty sure I can't use layers (I could be wrong) and I
> certainly don't
> want to use frames.

You'll have to use layers--if you want it to work in NN4.x, at
least. Only absolutely-positioned <div>s or <layer>s (NN4.x's
proprietary tag) can be moved about the page in NN4.x.

If you know how wide your content will be ahead of time, you can
use the following in an external stylesheet to get it centered:

#linksAndFaceDiv  {
	position: absolute;
	left: 50%;
	margin-left: -200px;
	width: 200px;
	}

Of course, the usual caveats regarding varying box models apply.

When it comes time to script the thing, you'll need to get the
actual position so you can move it to the side and back. To do
that, you should be able to use
document.layers['linksAndFaceDiv'].x for NN4.x,
document.all['linksAndFaceDiv'].offsetLeft for IE 4 (and any IE
except IE 6 in standards mode, actually) on Mac & Win and
document.getElementById.offsetLeft for IE 5+ (both platforms),
Opera 5+ (both platforms) and all Gecko-based browsers (Mozilla,
NS6.x, NS7.x, Galeon, Chimera, etc.).

The trouble you're liable to have is if you're positioning your
content off the page to the right, you may wind up with horizontal
scrollbars. That might also whack the browser's calculation of
where, exactly '50%' lies. That is, it might take 50% of the width
of the document including the elements that are lying offscreen to
the right, rather than taking 50% of the viewport.

I'm not sure how you'd work around that. Setting overflow: hidden
on the body and html elements in a stylesheet might do it in IE 5+,
Opera and Gecko (NN4 doesn't pay any attention to absolutely
positioned elements when calculating page size, so you won't have a
problem with that browser), but then there will be no vertical
scrolling either. Maybe that's OK.

If not, then the easiest route to go is probably put in a container
<div> around the portfolio items that has a width of 100% and has
overflow: hidden. That /should/ prevent the scrollbars, but I
haven't tested to be sure.


chris.kaminski { functionNewMedia :: <http://www.function.de> }