Re: Stylings only possible with Tables

Andrew Fedoniouk wrote:
> 
> 
> ----- Original Message ----- From: "James Elmore" <James.Elmore@cox.net>
> To: <www-style@w3.org>
> Sent: Saturday, June 23, 2007 5:24 PM
> Subject: Re: Stylings only possible with Tables
> 
> Would like to remaind again one more approach
> for that famous border layout[1]:
> 
> Markup:
> 
> <body>
>  <div id=header />
>  <div id=body />
>      <div id=leftbar />
>      <div id=content />
>      <div id=right />
>  </div>
>  <div id=footer />
> </body>
> 
> and styling
> 
> div#body { flow:horizontal; height:*}
> div#body > * { height: * }
> div#body > div#content  { width: * }
> 
> will give us rendering close to this:
> http://www.terrainformatica.com/w3/sidebars.jpg
> 
> All blocks inside div#body will be placed horizontally in single row 
> (flow:horizontal) and
> will have height of content box of div#body (second CSS rule)
> div#body will take height left from #header and #footer in the view 
> (first rule).
> And div#content will take full height of #body and width left from 
> #leftbar and #rightbar
> (third rule).
> 
> Such layout is imposible corrently without tables in standard CSS.
> We are using flow CSS attribute[2] and flex length units[3] almost 3 
> years -
> they are recognized as highly useful and yet simple mechanisms.
> 
> To test them I recommend to download htmlayout demo browser
> http://www.terrainformatica.com/htmlayout/HTMLayoutDemo.zip
> and visit folders:
> /html_samples/generic
> /html_samples/flows
> 
> Andrew Fedoniouk.
> http://terrainformatica.com
> 
> 
> [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 Elmore
22162 Windward Way
Lake Forest, CA 92630
Home	(949) 830-9534
Email	James.Elmore@cox.net

Received on Sunday, 24 June 2007 23:24:43 UTC