Formatting columns without table - where are documents ?

[Victor Bien]

W3C says somewhere that tables should not be used for formatting
columns etc. but that style sheets should be used instead. This has a
major unlearning/relearning implications for me (and just about everyone
else I suppose). That also makes Hotdog ver 6.5 and "Using htnl 4" by
Molly Holzschlag Publ Que instantly out-of-date! Where are the
documents that show you how to do this? The tutorial on the W3C site is
too elementary for me.

The W3C validator page itself uses this recommended technique but I
have no reference about much of the code it uses. For example:
@import url (alpha import??)
div.navbar {
float: right;
text-align: right;
text-decoration: none;
margin: .1ex .1ex 2.5ex 1ex;
padding: 1ex;
background-color: #eee;
border-left: 1px solid black;
clear: both;
width: 8em;
}
(float?? ex??)

This code properly places a navigation bar which I would have used a
table to create. And so and so forth... ???

TIA

--
My e-mail address to fox the pesky spammers is vbien at attglobal dot net

[Michael Fesser]

Victor Bien wrote:

W3C says somewhere that tables should not be used for formatting
columns etc. but that style sheets should be used instead.
I wouldn't see that as strict as it may sound. Of course, tables are
not meant for layout issues and one should avoid it whenever it's
possible. But in some cases it might be better to use one (one!)
simple table for layout instead of many floated or absolute positioned
elements, which may raise lots of problems in some (older) browsers
and (maybe) decrease the usability of the site.

On my pages I sometimes use the "best of both worlds" - one single
table with 2 or 3 cells for the main layout, CSS for all the rest.

Sometimes you just have to find a compromise between strictly
following the recommendations and usability.
Where are the
documents that show you how to do this? The tutorial on the W3C site is
too elementary for me.
Currently I have no links (at least not in English *g*), but I'm sure
Google knows lots of them.
The W3C validator page itself uses this recommended technique but I
have no reference about much of the code it uses.
The official recommendation is the reference.
http://www.w3.org/TR/REC-CSS2/
For example:
@import url (alpha import??)
div.navbar {
float: right;
[...]
margin: .1ex .1ex 2.5ex 1ex;
[...]
}
(float?? ex??)

This code properly places a navigation bar which I would have used a
table to create. And so and so forth... ???

The navbar is positioned on the right of the surrounding element (body
in this case), the rest of the text floats around it.

9.5.1 Positioning the float: the 'float' property
http://www.w3.org/TR/REC-CSS2/visure...float-position

See the difference:

Using a table Using CSS and
____________ floated elements
| | | ____________
| text | nav | | | |
| text | | | text | nav |
| text | | | text |_____|
| text | | | text text |
| text | | | text text |
| text | | |____________|
|______|_____|

So using floating elements can save you a lot of space which would be
wasted with table layout.

And for the ex values have a look at

4.3.2 Lengths
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units

HTH
Micha

[Stan Brown]

In article <bf**********@merki.connect.com.au> in
comp.infosystems.www.authoring.html, Victor Bien
<ni*****@smartchat.net.au> wrote:

@import url (alpha import??)
div.navbar {
float: right;
text-align: right;
text-decoration: none;
margin: .1ex .1ex 2.5ex 1ex;
padding: 1ex;
background-color: #eee;
border-left: 1px solid black;
clear: both;
width: 8em;
}
(float?? ex??)

If the W3C tutorial is "too elementary for" you as you say, then
surely reading the spec is possible? All these things are explained
there. (See URL below.)

Granted, sometimes it is not immediately obvious how to put various
elements from the spec together to achieve a desired end, but you
seem to be asking about particular details and there's no better way
to answer those questions than to read the spec. Fortunately it is
well indexed and well hyperlinked, and you can jump right to the
paragraph that answers each question.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/