Previous Message
Next Message

tableless css pedigree

Sent by James Denholm-Price on 13 October 2004 23:11


Hi Michael & all@css-d,
On Wed, 13 Oct 2004 15:41:41 -0400, Michael Halvorsen
[EMAIL-REMOVED]> wrote:
> I need help getting a pedigree, like the link below, using css without tables:
> http://protism.com/pedigree.html

Would a pile of nested lists be semantic in this case? (Sort of
indicating the descendant nature of family trees?)

For presentation one could fix the widths and position the nested
lists absolutely within relatively-positioned list elements so that
they become the containers for the next level of descendants. The
downside of this is that it seems necessary to hard-wire the number of
levels and some widths into the CSS...

E.g.

    li,ul {padding:0;margin:0;}
    ul {list-style:none;width:24em;line-height:12em;position:relative;}
    ul ul {line-height:6em;width:8em;position:absolute;left:8em;top:0;}
    ul ul ul {line-height:3em;}
    ul li {position:relative;}

<ul>
    <li>Me
        <ul>
            <li>Mother
                <ul>
                    <li>Grandmother</li>
                    <li>Grandfather</li>
                </ul>
            </li>
            <li>Father
                <ul>
                    <li>Grandmother</li>
                    <li>Grandfather</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Does this make sense? It looks OK in Firefox, untested in IE!

James
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: