Displaying Genealogy with CSS3/HTML

Question

What I want

I am trying to get a pedigree-like view with CSS.

• Not a TABLE
• It needs to be compatible IE8+ (I might consider IE9+ if I don't find any solution for IE8)
• It needs to be printable by the browser

The thing is: on the web we have resources for family trees (parent -> childs), but not for pedigree (child -> parents)

---

Useful link but for a family tree :

I had this script working http://thecodeplayer.com/walkthrough/css3-family-tree

But I need to inverse it completely (my main node need to be on the bottom) and I failed to try a solution for that.

---

What I am trying to have in visual ouput:

            G FATHER
      FATHER
            G MOTHER
CHILD

      MOTHER

(I can also accept the solution where the child can be located at the bottom and its parents at the top)

But I want to get it done with a clean HTML and CSS if possible.

I am working with simple UL containers, and A containers for information. This means:

<ul>
    <li>
        <a>Child</a>
        <ul>
            <li>
                <a>Father</a>
                ...other ULs if available...
            </li>
            <li>
                <a>Mother</a>
                ...other ULs if available...
            </li>
        </ul>
    </li>
</ul>

---

What I have tried (jsfiddles)

I have tried several cases, one with floats, the other with more absolute positioning but I am not getting the result I want.

I have to fiddles to show:

http://jsfiddle.net/darknessm0404/bZGFA/

And the old version:

http://jsfiddle.net/darknessm0404/4SDNm/

If you have any suggestion or solution let me know. There are good family tree with CSS on the web but I do not want them since they are the inverse of what I want.

Answer 1

Just take the code from http://thecodeplayer.com/walkthrough/css3-family-tree and add to the css

.tree{
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   transform:  rotate(180deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */
   -ms-transform: rotate(180deg);
}

[EDIT] You could also add a script called Sandpaper to make life easier in IE.

and add to .tree li a also the rotation. This will rotate everything around and you can still read the text. The problem is, that you have to reposition the div. So add to .tree the following lines and play around with the values:

   position: relative;
   top: 300px;
   left: -200px;