Re: layout idea

On Mar 18, 2009, at 9:56 PM, Jonathan Snook wrote:

>> div {
>> display: table;
>> table-rows: 5 / 1em * 3* 20px 4em;
>> table-columns: 5 / 20px;  /* Pattern could repeat */
>> }
>
> The more I look at it, the more I like the syntax defined in the  
> Grid Positioning Module (whether it's table-rows or grid-rows makes  
> no difference to me):
>
> table-rows: * * (0.5in * *)[2];
>
> I like that repeating patterns (for things like gutters) can be  
> defined. I'm not sure that the number of rows or columns needs to be  
> explicitly defined as you have it above.

Rows would be pretty optional, since anything that didn't fit into the  
specified number of columns would need to move to a new row. If you  
don't specify columns, and you don't have elements that are acting as  
table-row elements (that is, you don't need the row element to be an  
anonymous generated row), then you would end up with a one row table.

> table-position: cell(1,2, 3,5);
> table-position: cell(1,2) span(2,3); /* not sure I love this but  
> just an example */

The first one seems less clear, and the second one seems too long. I  
could see combining the two spans though. Like this:

table-position: 1,2;
table-spans: 2,3;

But I still prefer this:

row#:1;
col#:2;
row-span:2;
col-span:3;

I think it is more clear (to the point of being obvious), you don't  
have to remember which number comes first, and you can set the  
position in one direction without having to know where it is in the  
other direction (which would be important for column position  
especially). And the properties are short, so not much typing  
required. But table-position and table-spans could be used as  
shorthand also.


>> Now, what about this scenario?
>
> <div id="out">
>  <div id="in"></div>
> </div>
>
> #out { table-position: cell(1,1); position:relative; }
> #in { table-position: cell(2,2); position:absolute; }
>
> Is #in relative to #out (ignoring table-position) or relative to  
> table-position (ignoring container element)?

Once it is aligned to the upper left corner of cell(2,1), then its  
left, right, top, and bottom properties are relative to that element  
too, right? But its width (if not specified, and if right and left are  
not both specified) would be the width of #out's content box.

> Another scenario:
>
> #a { table-position: cell(2,2); float:left; }
>
> How do you contain the float? Maybe with pseudo-elements? Like so:
>
> ::table-cell(2,2) { overflow: hidden; }

I think the positioning over-rides the float, so it would be one or  
the other, not both.[1]  Anyway, I didn't think you could give table  
cells hidden overflow.

> Which leads me to ask, if I've got a cell(2,2) but you try and  
> define a span on an element positioned from that cell, how would you  
> handle overflow set to only one cell? Maybe overflow gets ignored?  
> Or maybe it only applies when the cell/span is the same as the  
> pseudo-element? Example:
>
> #a { table-position: cell(1,1, 2,2); }
> #b { table-position: cell(1,1, 1,1); }
> ::table-cell(1,1, 1,1) { overflow:hidden; }
>
> Then overflow would get clipped for anything in #b but not in #a.  
> (I'm not loving this, btw...just trying to think through the  
> possibilities.)

TDs in HTML cannot be overflowed, as they automatically grow to  
contain their contents. If table-cells don't already act the same way,  
they really should (as Andrew also mentions).


[1] http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

Received on Thursday, 19 March 2009 06:45:34 UTC