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.