RE: Displaying a structure in CSS

Thanks for your very helpful points and comments.
I am trying to represent an organisational chart on a webpage, but it has to
be automatically generated from the database so that the customer can update
it themselves without any knowledge of HTML.  It is easier to go into the
database at the root and pull the root value, then for each child, pull out
it's children, doing this recursively and then move onto the next child.
This results in a list with the root at the top its children and childrens
children below.  So, for the earlier example : 

> > >         A
> > > B    C    D     E
> > > F         H
> > > G

[1]

it would be represented

A
B
F
G
C
D
H
E

[2]

and my problem is getting from 2 to 1!

I have a TCL script which is querying the database and outputting the HTML
file.

Matthew said that the content should be as meaningful without the
presentational markup and in this case it clearly isn't.  I think absolute
positioning is my best bet at the moment unfortunately.  Either that or I
manipulate the input to make it more suited to flowing out before generating
the HTML.

Either way, it's giving me a headache!!

thanks,
Gregor

> -----Original Message-----
> From: Matthew Brealey [mailto:webmaster@richinstyle.com]
> Sent: 02 August 2000 11:10
> To: www-style@w3.org
> Subject: 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 08:46:05 UTC