Re: Displaying a structure in CSS

Spowart Gregor writes:
> First off, sorry to mail this to the list when it's already been mailed to a
> newsgroup.
> If anyone can help me with the following problem i'd be very grateful!!!
> 
> I want to display the structure in HTML:
> 
>            A
> B    C    D     E
> F           H
> G
> 
> and have it represented in the following format (or similar) in the HTML:
> 
>  <DIV>A
>   <DIV>B
>    <DIV>F
>     <DIV>G</DIV>
>    </DIV>
>    <DIV>C</DIV>
>    <DIV>D
>     <DIV>H</DIV>
>    </DIV>
>   <DIV>E</DIV>
>  </DIV>
> 
> That is : the immediate children of A are B, C, D and E,
> the immediate children of B is F and of F is G and
> the immediate children of D is H.
> 
> I think what I need is 'display: block' nested inside 'display: inline',
> which is understand isn't possible, but there is 'display: inline-block',
> but which I haven't been able to get to work and I can't find many
> references to it on the web.  I am using MSIE 5.5, but would prefer to get
> it to work on MSIE 5.0.

Very interesting challenge...

"Inline-block' is only a proposal. I expect it to go into CSS3, but it 
is no surprise that there are no implementations yet.

If somebody has a prototype implementation, maybe he could test the
following:

    DIV { display: inline-block; text-align: center; border: thin solid }
    DIV:first-child:before { content: "\A" }

However, I guess the only solution for current browsers is to position
each DIV by absolute positioning. At least I don't see much
opportunity for automatic layout. Here's a solution that is at least
somewhat generic, although it assumes there are no more than four
children:

    DIV { position: relative; border: thin solid; text-align: center }
    DIV DIV { position: absolute; top: 1.2em; width: 25%; left: 0 }
    DIV DIV:first-child + DIV { left: 25% }
    DIV DIV:first-child + DIV + DIV { left: 50% }
    DIV DIV:first-child + DIV + DIV + DIV { left: 75% }

Looks not too bad in Mozilla M16... But something more sophisticated
than the 25% width would be nice.

If browsers don't support the :first-child- and +-selectors, I guess
the DIVs will have to be given individual IDs instead.



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos/                              W3C/INRIA
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Tuesday, 1 August 2000 13:45:55 UTC