Display Genealogy Using CSS3 / HTML

Question

What I want

I am trying to get a kind of look with CSS.

• NOT TABLE
• It should be compatible with IE8 + (I could consider IE9 + if I can't find any solution for IE8)
• It must be a printable browser.

The fact is that on the Internet we have resources for family trees ( parent → childs ), but not for a pedigree ( child → parents )

---

Useful link, but for a family tree:

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

But I need to completely invert it (my main node should be down), and I could not try the solution for this.

---

What I'm trying to do in a visual representation:

G FATHER FATHER G MOTHER CHILD MOTHER 

(I can also make a decision in which the child can be located below and his parents at the top)

But I want to do this with pure HTML and CSS, if possible.

I work with simple UL containers and information containers. It 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 have I tried (jsfiddles)

I tried several cases, one with floats, the other with more absolute positioning, but I don't get the result I want.

I need to play to show:

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

And the old version:

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

If you have any suggestions or solutions, let me know. There is a good family tree on the Internet with CSS, but I do not want them, since they are the opposite of what I want.

Answer 1

Just take the code http://thecodeplayer.com/walkthrough/css3-family-tree and add to 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 can also add a script called Sandpaper to make life easier in IE.

and add to .tree li a also a twist. This will turn everything around, and you can still read the text. The problem is that you need to move the div. So add the following lines to .tree and play .tree with the values:

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

Answer 2

If you want, you can use the table to do what you want.

 <table border=1> <tr > <td rowspan=3> test </td> </tr> <tr> <td >test1</td> </tr> <tr> <td >test2</td> </tr> </table> 

You can see the result for 4 generations in this Jsfiddle

Answer 3

Proof of concept

My solution here is pure css, but it can be impractical if the number of ancestors is unknown, or the number displayed is variable or extremely large. It may also require some improvement, especially for a more convenient browser display.

What I worked here is strictly for 3 generations of ancestors (numbers and css will change to display different numbers of generations). It is based on your original html script (with one additional class) and modified CSS and looks good in Chrome and Firefox, good in IE9 (lines are off a bit for me), more in IE7-8 (with 7, of course not showing lines) .

HTML

 <ul class="tree anscestors-3"> <li> <a href="#">Child</a> <ul> <li> <a href="#">Ancestor 1</a> <ul> <li> <a href="#">Ancestor 1A</a> <ul> <li> <a href="#">Ancestor 1AA</a> </li> <li> <a href="#">Ancestor 1AB</a> </li> </ul> </li> <li> <a href="#">Ancestor 1B</a> <ul> <li> <a href="#">Ancestor 1BA</a> </li> <li> <a href="#">Ancestor 1BB</a> </li> </ul> </li> </ul> </li> <li> <a href="#">Ancestor 2</a> <ul> <li> <a href="#">Ancestor 2A</a> <ul> <li> <a href="#">Ancestor 2AA</a> </li> <li> <a href="#">Ancestor 2AB</a> </li> </ul> </li> <li> <a href="#">Ancestor 2B</a> <ul> <li> <a href="#">Ancestor 2BA</a> </li> <li> <a href="#">Ancestor 2BB</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> 

CSS

 ul.tree li { display: block; float: left; clear: left; position:relative; white-space:nowrap; list-style: none; height: 1em; padding-right: 1em; } ul.tree li:after { content: ''; position: absolute; border-right: 1px solid #000; right: .5em; } ul.tree a { display: block; background-color:#CCC; font-size: .8em; position: relative; } ul.tree a:before, ul.tree a:after { content: ''; position: absolute; border-top: 1px solid #000; top: .6em; width: .6em; } ul.tree a:before { right: 100%; } ul.tree li > ul { margin:0; padding:0; position:absolute; left:100%; } ul.anscestors-3 { height: 15em; /*3 for child + 2*1 + 2*2 + 2*3 */ } ul.anscestors-3 > li { margin-top: 7em; } ul.anscestors-3 > li > a:before { display: none; } ul.anscestors-3 > li:after { height: 8em; top: -3.5em; } ul.anscestors-3 anscestors-3 > li > ul > li:first-child { margin-top: -5em; } ul.anscestors-3 > li > ul > li:last-child { margin-top: 3em; } ul.anscestors-3 > li > ul > li:after { height: 4em; top: -1.5em; } ul.anscestors-3 > li > ul > li > ul > li:first-child { margin-top: -3em; } ul.anscestors-3 > li > ul > li > ul > li:last-child { margin-top: 1em; } ul.anscestors-3 > li > ul > li > ul > li:after { height: 2em; top: -.5em; } ul.anscestors-3 > li > ul > li > ul > li > ul > li:first-child{ margin-top: -2em; } ul.anscestors-3 > li > ul > li > ul > li > ul > li:last-child { margin-top: 0em; } ul.anscestors-3 > li > ul > li > ul > li > ul > li > a:after { display: none; }