Re: Displaying a structure in CSS

Bert Bos wrote:
> 
> Spowart Gregor writes:
> > 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.

Win MSIE 4+ does, although not specifically as inline-block. Setting a
width or height on an inline element will create an inline-level block,
as will intrinsic elements (as in other browsers).

> 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" }

I can't see that working, since inline blocks would default (unless
anyone can think of any other way to do it) to being the size of the
content - text-align is ineffective.

More specifically to this case, the problem is that the markup is not
suited to the presentation desired of it: an essential part of CSS is
that the content should be equally meaningful without the presentational
hints. Therefore, something that degrades to this:

A
B
F
G
C
D
H
E

is not suited to the desired formatting.

> However, I guess the only solution for current browsers is to position
> each DIV by absolute positioning. 

Which is bad, since it is generally undesirable to layout documents in
this way.

The other problem I see is that the desired layout is rather abstract,
and without being able to see what is actually intended it is difficult
to comment. In other words, unless a more concrete example is given, it
appears that the desired effect is not suitable - just as it would be
undesirable to manually position each letter, it is possibly undesirable
to do this.

> 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.

Display: inline-block?

-----------------------------------
Please visit http://RichInStyle.com. Featuring:
MySite: customizable styles.         AlwaysWork style 
Browser bug table covering all CSS2 with links to descriptions.
Lists of > 1000 browser bugs         Websafe Colorizer 
CSS2, CSS1 and HTML4 tutorials.      CSS masterclass 
CSS2 test suite: 5000++ tests and 300+ test pages.

Received on Wednesday, 2 August 2000 06:10:44 UTC