Forum Moderators: not2easy
Preface:
Either one of the two CSS3 proposals, Grid Positoning [w3.org] or Advanced Layout [w3.org] should according to the Working Drafts finally enable CSS to become the Page Layout method of choice.
My personal preference, though neither is perfect and either would do!, of the 2 proposed Layout Modules is available as a JS plugin.
The Module
The Advanced Layout Module is edited by Bert Bos, and as part of his Ph.D Thesis, César Acebal and his research team, advised in part by Bos have released (courtesy of their project funders) the outcome of that research:
The Plugin
ALMcss [cesaracebal.com]
ALMCss is an experimental browser plugin written in JavaScript that implements the CSS3 Advanced Layout Module. It is part of the current research being conducted by César Acebal for his Ph. D. Thesis, advised by Juan Manuel Cueva and Bert Bos.
I downloaded this last night and after a quick play around with the examples to familiarise myself with the slightly different syntax required because it's a plugin (see the Documentation page on the above link) am happy to report it does what it says on the tin.
I think this module will be slightly more intuitive than the Grid Positioning one for those coming from table layouts as you basically build your own grid/table via the CSS, the choose which slot you want to put which div into (again just by choosing a letter (or @)
example using the plugin code (working from my experimenting last night)
#container {
display-model: "
b b b (30px),
a a a (30px),
c e d (intrinsic),
. g @ (40px)"
(300px * 200px)
;
}that in essence constructs a tabular like layout like:
<table width="100%" border="1">
<tr style="height: 30px;">
<td colspan="3">bbb</td></tr>
<tr style="height: 30px;">
<td colspan="3">aaa</td></tr>
<tr><td>C</td><td>E</td><td>D</td></tr>
<tr style="height: 40px;">
<td style="width: 300px;">cell c (spacer as denoted by '.')</td>
<td>cell g</td>
<td style="width: 200px;">default (any content not explicitly placed as denoted by '@')</td>
</tr>
</table>Just take the letters in the CSS above and imagine borders around them all and "see" the table layout.. with the bottom (200px * 300px) giving the column widths
Thean you take your divs, no matter their order in the HTML and assign a letter to them depending on which "cell" or slot you want to put them in e.g.
<div id="header">..
CSS:
#header
{
[b]situated: b;[/b]
background: #dad;
text-align: center;
}it seems intuitive to me, but I haven't yet got to grips with what all it can do (and remember it is experimental code so I'm not suggesting mainstream use yet!).
Included the download example pack are several CSS Zen Garden entries converted to use this method (again without touching the HTML!).. and apart from that it says apart from a couple of changes in the Syntax the W3C working draft is the best documentation to follow
Have fun, and if you do download & experiment, let us know what you think!
edited: hehe got my table code wrong, am a little rusty with them!
[edited by: SuzyUK at 11:05 am (utc) on Oct. 3, 2008]
