Re: Stylings only possible with Tables

>>
>> [1] http://java.sun.com/j2se/1.4.2/docs/api/java/awt/BorderLayout.html
>> [2] http://www.terrainformatica.com/htmlayout/flow.whtm
>> [3] http://www.terrainformatica.com/htmlayout/fspu.whtm
>>
>>
> This is similar to what I was calling a 'list' in my original post. I 
> considered that, currently, HTML only allows blocks to stack vertically 
> (unless they are inline blocks and then they may wrap or other undesirable 
> behavior). I would like to have a layout ability in CSS (display-mode) 
> that allows users to toggle this behavior between horizontal and vertical. 
> Embedding blocks, which have horizontal stacking ON, within a second 
> block, with vertical stacking ON, would allow grid-like layouts, or things 
> similar to your example. I will attempt an ASCII drawing of what I am 
> thinking. I apologize in advance for the crudeness of the diagram.
>
> <!-- this block uses the standard HTML layout: blocks stacked 
> vertically -->
> -------------------------------------------------------------------------------
> |                 <!-- this block stacks blocks side by side --> 
> |
> |                 |---------------------------------------------| 
> |
> |                 |  BLOCK1: BUTTON  | BLOCK2: BUTTON | ...     | 
> |
> |                 |---------------------------------------------| 
> |
> | <!-- this block also stacks horizontally, but it fills the screen 
> width -->  |
> | 
> |-------------------------------------------------------------------------| 
> |
> | | <!--vertical block1-->  <!--vertical block2-->  <!--vertical block3--> 
> |  |
> | | |--------------------|  |--------------------| 
> |---------------------| |  |
> | | | BLOCK3:            |  |                    |  | 
> | |  |
> | | |                    |  |                    |  | 
> | |  |
>  ... Fill left block with menu items, center block with text, right block 
> with images. Or flow text between center and right block. When finished, 
> close
> second horizontal block and place a third one for a footer, if desired. 
> ...
> | | |--------------------|  |--------------------| 
> |---------------------| |  |
> | 
> |-------------------------------------------------------------------------| 
> |
> |                <!-- final block, with copyright or page number --> 
> |
> |                |-------------------------------------------------| 
> |
> |                |       Copyright, 2007, by James Elmore          | 
> |
> |                |-------------------------------------------------| 
> |
> |------------------------------------------------------------------------------|
>
> Proposed (theoretical, possibly incomplete) HTML/CSS:
>
> <style>
>     .vert   { display-mode: list-vertical; }
>     .horiz  { display-mode: list-horizontal; }
>     .center { margin-left: auto; margin-right: auto; }
>     .wide   { width: 100%; }
>     .thin   { width: 33%; }
> </style>
> ...
> <div class="vert">
>     <form class="horiz center">
>         <button>BLOCK1: BUTTON</button>
>         <button>BLOCK2: BUTTON</button>
>         ...
>     </form>
>     <div class="horiz wide">
>         <ul class="vert thin">
>             <li>BLOCK3:</li>
>             ...
>         </ul>
>         <div class="vert thin">
>              <p>Text to fill vertical block2 goes here.</p>
>              <p>More text.</p>
>              <p>This stuff is stacked inside vertical block2
>                 just the way it would inside a body or other HTML
>                 element.
>              </p>
>         </div>
>         <div class="vert thin">
>             <img ... />
>             <img ... />
>            <!-- images are stacked in vertical block3 -->
>         </div>
>     </div>
>     <h2 class="center">Copyright, 2007, by James Elmore</h2>
> </div>
>
> With this suggestion, <div> can be used, but so can any other block type 
> element (e.g., <form>, <ul>, <h2>) simply by setting their display-type to 
> list-horizontal or list-vertical. List-vertical is the usual HTML/XHTML 
> block filling mode. List-horizontal has table-like properties, where the 
> elements may control the width of the parent block, or the parent block 
> may cause the children to widen, to fill the space.
>
> It would take hours to give complete details, so I will stop here. 
> Interested parties may extend the thread or contact me directly so I don't 
> bore those not interested in my views of Advanced Layouts.
>
>

James, first of all name 'display-mode' is already taken by CSS3 [1]
And second your 'display-mode: list-horizontal' is exactly my
flow: horizontal. So I will use 'flow' instead of 'display-mode' below.

( I also have flow: h-flow - multi-row layout when 'clear' attribute allows
to break blocks explicitly on rows. This is close to 'float' but different
as only-blocks-inside model introduces concept of free space so
flexes can be used. )

I think that your idea of 'display-mode: list-horizontal'
just demonstrates that it is very needed.

Problem is that 'flow' by itself is not enough. It should be accompanied by
flex units too. Think about HTML tables - what they would be without
their peculiar dimensional attributes and algorithms.

Currently flex units exist in CSS but implicitly:

width: auto is exactly width:* for block elements.

Something like:
{ width: XXpx; margin-left: auto; margin-right: auto; }

is a direct equivalent of
{ width: XXpx; margin-left: *; margin-right: *; }

('auto' has other meanings in other context  in CSS - this is why
I prefer to use * units)

flow + flex units allows to reproduce all layouts that
are possible only by tables currently and give much more.

As a real example:
Screen layout of this application uses solely flows and flexes:
http://en.wikipedia.org/wiki/Norton_Internet_Security -
no tables there at all.

My engine works in extreme conditions when HTML/CSS
is used for UI layout purposes of desktop applications
so this flow and flexes are the must.  I think that
standard CSS will also benefit from these features.

BTW: Mozilla/XUL also has a concept of flexes that
is incarnated there as 'flex' XUL attribute[2] but I think
having flexes as a length units is, well, more flexible.

Its concept is simple and implementation is I would say
trivial. I belive that in the shed of HTML5 light it is a
good time to introduce something like flow and flexes
as some layout constructs there cannot be presented
without flow and flexes.

Andrew Fedoniouk.
http://terrainformatica.com

[1] http://www.w3.org/TR/css3-box/#L706
[2] http://developer.mozilla.org/en/docs/XUL:Attribute:flex

Received on Monday, 25 June 2007 05:30:04 UTC