Specifying tabular position with CSS

[Steven Simpson]

Hello!

I could arrange some HTML elements so that they have a sensible order
without stylesheets:

<div id="sections">
<div id="content"> The bulk of the content that people actually want to read </div>
<div id="navigation"> Some short site map </div>
<div id="gumph"> Adverts and stuff... </div>
</div>

....and then set CSS to present these in a table (with 'display:
table-cell' etc) to achieve a three-column layout, but the components
will appear in their HTML order. If I want #content in the middle, or
some other re-ordering, perhaps with extra rows (e.g. navigation on
top), it seems I need CSS3 features, still under development. Any way
to do it with CSS2?

Can the move-to property only be used to defer content, and not to send
it back up the document? I don't suppose this is a big problem, since a
move up could always be expressed as moving everything else down,
right? Also, it might help when a 'content: pending()' is associated
with a non-id selector (since there could be multiple matching
elements), right?

Is there a way to set the row- or column-span of a CSS table cell? And
to generate a pseudo-element around a group of sibling elements (which
could then be declared as a table-row)?

Thanks,

Steven

--
ss at comp dot lancs dot ac dot uk

[Spartanicus]

Steven Simpson <[e-mail]> wrote:

I could arrange some HTML elements so that they have a sensible order
without stylesheets:

<div id="sections">
<div id="content"> The bulk of the content that people actually want to read </div>
<div id="navigation"> Some short site map </div>
<div id="gumph"> Adverts and stuff... </div>
</div>

...and then set CSS to present these in a table (with 'display:
table-cell' etc) to achieve a three-column layout,
Given that IE doesn't support the CSS table model, I assume that this is
not a web site and/or that you are not supplying styling for IE?
but the components
will appear in their HTML order. If I want #content in the middle, or
some other re-ordering, perhaps with extra rows (e.g. navigation on
top), it seems I need CSS3 features, still under development. Any way
to do it with CSS2?
Floating and absolute positioning are the only CSS2 ways that allow
content to be displayed in a different order than listed in the HTML.
Needless to say that both methods deprive you of the features offered by
tables.
Can the move-to property only be used to defer content, and not to send
it back up the document?
The "move-to" property is part of the CSS3 proposals, afaik no browser
has implemented it.
Is there a way to set the row- or column-span of a CSS table cell?
The CSS2 table model does not provide for that.
And
to generate a pseudo-element around a group of sibling elements (which
could then be declared as a table-row)?

Not sure what you mean by that. If needed the CSS table model auto
generates anonymous elements to complete a CSS table as per the rules
laid out in the spec. You cannot target anonymously generated elements,
thus you cannot attach styling properties to them.

--
Spartanicus

[Steven Simpson]

Spartanicus wrote:

Given that IE doesn't support the CSS table model, I assume that this is
not a web site and/or that you are not supplying styling for IE?

No, I'm just looking theoretically at approaches to achieve popular
layouts while still properly separating style from content. I'm
exploring and checking my understanding of the CSS table approach.

Floating and absolute positioning are the only CSS2 ways that allow
content to be displayed in a different order than listed in the HTML.
As I thought.

The "move-to" property is part of the CSS3 proposals, afaik no browser
has implemented it.

I realise that. I should have indicated that it was a question on the
theory/intention of the property, not its current implementation.

Is there a way to set the row- or column-span of a CSS table cell?

The CSS2 table model does not provide for that.

I thought so, but also that perhaps I had missed something.

You cannot target anonymously generated elements,
thus you cannot attach styling properties to them.

In CSS3, ::outside, ::before and ::after are proposed to generate
anonymous elements, to which style can be applied, but ::outside only
goes around a single (non-generated) element. I couldn't see a way to
extend it over the original element's siblings.

Thanks,

Steven

--
ss at comp dot lancs dot ac dot uk

[Spartanicus]

Steven Simpson <[e-mail]> wrote:

Given that IE doesn't support the CSS table model, I assume that this is
not a web site and/or that you are not supplying styling for IE?

No, I'm just looking theoretically at approaches to achieve popular
layouts while still properly separating style from content. I'm
exploring and checking my understanding of the CSS table approach.

Note that CSS table layouts have the same problems as HTML tables, minus
the semantic problem. Reflows and/or delayed rendering that are common
with the automatic table layout model are a big part of that. This can
be remedied by selecting the fixed table layout model, but that destroys
many of the behaviors that many people find so appealing about using
tables for layout.

Content that is supposed to be "moved", as might become possible with
the CSS3 move-to property, is only going to make reflow and/or delayed
rendering problems worse, especially when the content is external.

Perhaps the promised CSS3 "advanced layout" module will address some of
these issues, unfortunately it is not publicly known if any work has
been carried out on that module.

The "move-to" property is part of the CSS3 proposals, afaik no browser
has implemented it.

I realise that. I should have indicated that it was a question on the
theory/intention of the property, not its current implementation.

In that case I'll pass on commenting further, my interest is mostly
limited to CSS methods that have at least one implementation.

--
Spartanicus

[Martin Eyles]

"Steven Simpson" <[e-mail]> wrote

I could arrange some HTML elements so that they have a sensible order
without stylesheets:

<div id="sections">
<div id="content"> The bulk of the content that people actually want to read </div> <div id="navigation"> Some short site map </div>
<div id="gumph"> Adverts and stuff... </div>
</div>

...and then set CSS to present these in a table (with 'display:
table-cell' etc) to achieve a three-column layout, but the components
will appear in their HTML order. If I want #content in the middle, or
some other re-ordering, perhaps with extra rows (e.g. navigation on
top), it seems I need CSS3 features, still under development. Any way
to do it with CSS2?
SNIPPED
Is there a way to set the row- or column-span of a CSS table cell? And
to generate a pseudo-element around a group of sibling elements (which
could then be declared as a table-row)?

I would recommend the following approach

a) choose the width of the left and right columns, and which content you
want in each.
b) set up the left and right styles as follows

#left1, #left2 {width: (the width you chose); float: left}
#right1, #right2 {width: (the width you chose); float: right}

c) set up the content bits (or whatever is in the middle - nav, ads or
whatever) style as follows

#content1, #content2 {margin-left: (width you chose for the left column);
margin-right: (width you chose for the right column)}

Hopefully that should work. If not, I recomend http://www.alistapart.com/ as
that has something on 3 column layouts I think.

Martin

--
Martin Eyles
ma**********@NOSPAM.bytronic.com

[Steven Simpson]

Hello!

Martin Eyles wrote:

"Steven Simpson" <[e-mail]> wrote

...and then set CSS to present these in a table (with 'display:
table-cell' etc) to achieve a three-column layout,

I would recommend the following approach

a) choose the width of the left and right columns,
I'm looking at the (CSS) table approach in order to avoid (what appears
to be) an arbitrary choice of width.
I recomend http://www.alistapart.com/ as
that has something on 3 column layouts

Hmm, I wouldn't recommend it as an example of a good web design,
however. Reduced font size for the main text; and too wide for my
browser window. Eugh!

Thanks anyway! :)

--
ss at comp dot lancs dot ac dot uk

[Martin Eyles]

"Steven Simpson" <[e-mail]> wrote in message
news:dl**********@news.freedom2surf.net...

Hello!
Hi!
Martin Eyles wrote:

"Steven Simpson" <[e-mail]> wrote

...and then set CSS to present these in a table (with 'display:
table-cell' etc) to achieve a three-column layout,

I would recommend the following approach

a) choose the width of the left and right columns,
I'm looking at the (CSS) table approach in order to avoid (what appears
to be) an arbitrary choice of width.

In that case, I think that the only ways of doing 3 columns in just css are
either the method suggested, or using absolute positioning for the lot
(involves fixing even more widths). The other methods require putting the
HTML in a specific order, and then in divs. (one for each column).

I'm not even sure if CSS3 helps much, as the columns feature is really for
flowing text in columns rather than page layout. Then again, I might have
missed some of the features, as I only fiddled with it briefly for one page
on my personal site.
I recomend http://www.alistapart.com/ as
that has something on 3 column layouts

Hmm, I wouldn't recommend it as an example of a good web design,
however. Reduced font size for the main text; and too wide for my
browser window. Eugh!

Yeah, I know what you mean, only really works at 1024x768 and up. It is a
shame they made the shift to 4 faux columns (I don't think the left column
is a proper column), as they used to have a much better (accesibility wise)
2 column layout. Still, if you can get round this (turn off the styles,
should be able to see it in a narrower window without trouble, as the
underlying HTML is OK), many of the articles are worth looking at (they're
not all written by the person who came up with the latest stylesheet of the
site).
Thanks anyway! :)
No Problem
ss at comp dot lancs dot ac dot uk

ooooooh, proper comp sci guy, are you the department webmaster?

Ciao,
Martin

--
Martin Eyles
ma**********@NOSPAM.bytronic.com