On Fri, 28 Jan 2005 19:56:20 +0100, Ali Babba <Al******@40Bandits.com>
wrote:
[...]
(i have no clue how to get a horizontal scrollbar in FF)
But for heavens sake; this is elementary...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sidescroller</title>
<style type="text/css">
body { width: 200%; }
p.to-the-left { text-align: left; }
p.to-the-right { text-align: right; }
</style>
</head>
<body>
<p class="to-the-left">Hello World!</p>
<p class="to-the-right">Hello again World!</p>
</body>
</html>
....and off you scroll.
What is it in the basic CSS box model rendering that is so terribly
difficult to understand for so many?
It seems to me that just about every amateur out there gets him self
directly stuck in a poisonous spider web of pixel based sizing of boxes
as soon as he just comes close enough to CSS to get a hunch that it may
have something to do with layout.
What can we do to convey the real truth about CSS, i.e. that CSS can be
used to suggest how to render a page but that resulting page will, in a
visual browsing situation, at all times be placed _behind_ a "peephole",
represented by a visual browsers current viewing window.
Most often we do try to suggest a rendering that directly fits the
available width of the peephole and we also accept that a rendered
document may be taller than the height of the peephole, in which case
the peephole will develop a 'vertical scroll bar that can be used to
move the peephole up or down over the rendered document.
Note what I said; the scrollbars moves the peephole _over_ an already
rendered document, it's not the document that moves behind the peephole.
Hopefully that way to look at things might help some poor pixel fixated
soul out there, may he then suddenly realize the illusionary effect that
is built into a dynamic viewing of a document in a visual browser.
That means that the real available size of "rendering canvas" is
basically unlimited but we have out of convenience established a
situation where a calculated 100% wide canvas is "mentally linked" to
the peephole and thus supposed to be equal in width to the currently
available peephole (this is part of the basic thinking behind liquid
design techniques).
The side note here is CSS fixed positioning, which effectively breaks
lose bits and pieces of a document and gives possibilities to attach
those pieces directly to the physical coordinates of the currently
available peephole instead.
But that also means that those bits and pieces do not really stay as
fully qualified members of the document content flow any more either.
They do, as part of markup of course, but may not, as part of a visually
rendered result. (go figure...)
--
Rex
