Re: layout idea

On Mar 15, 2009, at 8:19 PM, Andrew Fedoniouk wrote:

> Consider this typical web page layout:
>
> | .Header                  |      |
> |----|---------------------|      |
> |.LSB| Some text here      | .RSB |
> |    |---------------------|      |
> |    ....                         |
> |    |---------------------|      |
> |    | Some other lorem    |      |
> |    | ipsum here          |      |
> |--------------------------|------|
>     | .Footer                    |
>
> It can be defined by following styling:
>
> body { flow:grid; }
> .header { top: 1#; left:1#; right:-2#; }
> .footer { top: -1#; left:2#; right:-1#; }
> .LSB    { top: 2#; left:1#; bottom:-2#; }
> .RSB    { top: 1#; left:-1#; bottom:-2#; }
>
>
> So if you have something like this
> <body>
>  <div .header>Header</div>
>  <div .footer>Header</div>
>  <div .LSB>left side bar</div>
>  <div .RSB>right side bar</div>
>  <p>Content #1</p>
>  <p>Content #2</p>
>  .......
>  <p>Content #N</p>
> </body>

It strikes me that all these methods, including Jonathan's, Andrew's,  
and Advanced Layout Module, (and to some extent, Grid Positioning)  
seek to create table-like structures. What they then add, which  
display:table-cell lacks, is:

1. the ability to do rowspans and colspans (i.e. the equivalent of  
using grid units for widths and heights [or edge positions]),
2. the ability to have new rows specified without having a  
display:table-row element, and
3. the ability to move content to cells in a different order than they  
appear in the source.

But since we are basically talking about a table-cell-like display  
model here, wouldn't it be better to just fix the deficiencies of the  
table-* display types, rather than adding new properties that are very  
similar but different?

For instance, what about something like this, to replicate your layout  
above:

body {
   display: table;
   columns:3;
   rows:3;
   /* or maybe just 'display: table 3 3;' */
}
.header {
   display: table-header-group;
   /* if anonymous child cells auto-span entire row */
}
.footer { display: table-footer-group; }
.LSB { display: table-cell; }
.RSB {
   display: table-cell;
   col#:3;
   /* or maybe just
      'display: table-cell 3 auto;'
      to indicate it goes in the third column
      with automatic row placement
   */
}

I think that should be pretty easy to follow without a lot of  
explanation. That would just about do it for the example above, if  
there was also an anonymous table-cell around the middle part (with  
the P elements). And by specifying the number of rows and columns in  
the 'display:table' element, and the column index of the RSB cell, you  
would be able to do that (using that table headers and footers are  
part of the row count, otherwise you'd edit the above to be a one-row  
table, instead of 3-row).

Specifying the number of columns and rows in the container (in the  
'display:table' element for this) is not too different from the idea  
of 'columns' being specified in "Multi-Column Layout", the ASCII art  
templates in the parent elements of "Advanced Layout", and the 'grid- 
columns' and 'grid-rows' of "Grid Positioning".

When the author specified the number of columns, then any extra  
'display: table-cell' elements beyond that number would force the  
creation of anonymous new rows.

Knowing the number of rows and columns of the 'table' element should  
also make rowspans and colspans simpler for the UA to know what to do  
with, as they would contribute to the count that determines where the  
anonymous row elements go. I imagine a syntax like this:

.header { display: table-cell; colspan:3; }

or perhaps a combined form, so that there is less inter-property  
dependency (or this could be a shorthand for the above):

.header { display: table-cell 3 1; }
/* <table-element-type> <colspan> <rowspan>  */

Received on Monday, 16 March 2009 05:41:06 UTC