4

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.

3 Answers 3

6

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;
3
  • Pretty nice idea! However it doesn't work with re-transforms on LIs so I had to rotate the li > a instead! I'll check if it works on IE, in chrome it looks awesome. For the reposition of the tree I think I'll work with Javascript to get the real values and reposition my tree. Commented Nov 21, 2012 at 10:55
  • Ok the transform will not work properly in IE. I've checked some scripts like useragentman.com/blog/2010/03/09/… however it will not work at the end because it needs to be printed. I'm open to other suggestions that are IE compatible (>=IE8). Commented Nov 21, 2012 at 11:07
  • 1
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 / -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" / IE8 */; This rotates 90°. Play with the value to find out 180° Commented Nov 21, 2012 at 11:17
2

If you want you can use a 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

1
  • Thanks but I know how to do it that way. I don't want to use a table. Commented Nov 21, 2012 at 10:47
2

Proof of Concept

My solution here is pure css, but could be impractical if either the number of ancestors is unknown, or the number displayed is variable or exceedingly large. It also might take some refining, especially for nicer display cross browser.

What I have worked up here is strictly for 3 generations of ancestors (numbers and css would change for different numbers of generations displaying). It is based on your original fiddle html (with one extra class) and modified css, and looked good in Chrome and Firefox, okay in IE9 (lines slightly off for me), more off in IE7-8 (with 7 of course not showing the 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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.