Re: Displaying a structure in CSS

Bert Bos wrote:

> 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

Add the missing </DIV> before <DIV>C<DIV>, and add the following DIV style, and it
appears to give the desired result in IE5.0:

    div {position:relative; float:left; padding-right:10; text-align: center}

(Funny things happen in M16 - but giving the topmost DIV a  style="float:none"
makes it OK, apart from that first line, which then becomes much too wide in both
browsers.)

--
Regards,
Val Sharp - Edinburgh

Received on Friday, 4 August 2000 11:38:49 UTC