Re: Displaying a structure in CSS

It seems to me that the straightforward way to handle this situation is (1)
identify the HTML element most suited for representing an organizational
chart and (2) evaluating how CSS can best suggest its presentation.

1. Nested lists, probably unordered, are the closest thing HTML has to an
"orgChart" element.
2. Depends on the guidelines in effect at the organization.

The 'natural' storage medium for an organizational chart is, of course, XML
nodes.  A single div element should suffice as a generic container for the
nested lists.  When users interact with the node structure, the XML nodes
may be re-evaluated to update the lists within the div.

The main problem with the div-based approach initially given is one of
expandability.  How do you conveniently handle it when a user decides that
node B now contains sibling nodes F and G, each of which has their own
children?

later,
gordon

----- Original Message -----
From: "ValerieGSharp" <ValerieGSharp@netscapeonline.co.uk>
To: <www-style@w3.org>
Sent: Friday, August 04, 2000 6:52 AM
Subject: 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 15:49:26 UTC