CSS3 Family Tree

Web-Gate

Really nice !

Nick

Not bad, excellent use of code. Problem is if you wanted to use it as a family tree, you would have to find someway to show marriages, and possible other data. Still it is an excellent start to what could be a very useful library/resource.

roberto

and works for a small family tree, when you use this code for more than 4 childs doesn’t work. but this is really useful and beauty, thanks a lot.

what can i use for make this code horizontal? instead vertical?

thanks a lotttt

Ruby On Tails

@roberto
It should work for any number of children provided that the width of the container can support it. Just increase the width and it will work. Though you get horizontal a scroller then.

Ruben Cepeda

Good work.

Dennis Thrysøe

Great stuff!

Any chance this can be made to work in IE also? For example from version 8+?

The lines don’t show.

I tried adding selectivizr etc., but it dodn’t seem to help any.

Valerij Primachenko

i played with your code and wanted to share my changes

.tree li::before, .tree li::after{
content: ”;
position: absolute; top: 0;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.tree li::before {
left:0;
width: 50%;
border-right: 1px solid #ccc;
}
.tree li::after{
left: 50%;
border-left: 1px solid #ccc;
}

/*this way only-child still have a upper connector and do not need to be moved up*/
.tree li:only-child::after, .tree li:only-child::before {
border-top:0 none;
border-radius:0 !important;
}

.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}

really good resource! cheers!

NacaYoda

This is nice CSS. But it is not a family tree. Not unless you’re a family of self replicating micro-organisms. It takes two to make a child (last I checked) and this very elegant tree, does not allow that to be recorded. A tree it is, sans-family.

Correct me if I’m wrong.

Ruby On Tails

@NacaYoda

Yes you are right, this is good for organizational data display but not a practical solution for a family tree. I am working on a solution to support multiple parents which will solve that issue. I hope to get that working soon in some time.

Ruby On Tails

@Dennis Thrysøe

I am working on the next version of this code which will have IE support to some extent and a feature of multiple parents.

Madhu Sudhan Adhikari

Oh Really Gud bt IE iz not support ….. What is solution for IE ?

iamseventh

This is sick. Awesome! Got to learn this thing

Glenn

This is excellent. It’s a shame there aren’t timestamps on the comments. I have no way to judge if you just started working on the multiple parents or if that comment was left a year ago. (When did you start working on that? Have a timeframe?) Great site!

Jason

I’m with Glenn, wish I knew when you were starting work on multiple parents and IE compatibility. Once those are in I think this will be great!

Nguyen Tuan Trung

How can I change the width of the tree? My tree’s big and it’s broken, unless I zoom out to make it fit in the browser. How to add the horizonal scroll?

Thanks,
Trung

Pictures

Great work. When using this as a chart for organizational data, would it be possible to enable ‘lanes’ for it? This is what I mean: not every child sits on the same (vertical) level, where the child of parent might be on the same level as the grand child of parent. Perhaps this could be done using data-attributes?

pirrmann

Thanks ! Although this may not be accurate to represent family tree, it is very nice when it comes to representing expression trees !
http://www.pirrmann.net/linq-provider-an-attempt-part-4/

JC

Any update on the update to the family tree to allow multiple parents? This is so freaking awesome..I just need to use it!

Daniel

Great work on this, thanks for sharing!

Peter

Nice, thanks for sharing! Trees rock!

Sumesh

Great work and thanks for sharing!

Please update to the family tree to allow multiple parents

Thanks

Oleg

Hi guys,

I need multiple parents and IE compatibility too. I’ve contacted the author. He didn’t have time until now to add a support for multiple parents and IE compatibility. Should we create a project on GitHub maybe to develop this great stuff on?

Regards.
23.07.12

Oleg

Also theming (support of jQuery ThemeRoller) and drag-&-drop like jQuery OrgChat http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/ would be great. Another feature would be “showing/hiding a particular branch of the tree by clicking on +/- icon below any parent node”.

As I already said we need a project on GitHub. What do you think?

Mangesh

If we provide the below style in place of the float:left for “li” elements – then we get the horizontal scrolling without the need of specifying the exact width for the container (eliminating the wrapping of “li” elements)

display: inline-block;
white-space: nowrap;
vertical-align: top;

However with this, there is a tiny gap left between the “li” elements – which I found in Mozilla as well as Chrome – so I put in a negative left and right margin to fix the same.

margin: 0 -2px 0 -2px;

The entire “li” element should now be styled as

.tree li {
display: inline-block;
white-space: nowrap;
vertical-align: top;
margin: 0 -2px 0 -2px;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

Yashwant

I like the way you explain the example with live demo along with coding Its easy to understand how it is working, First time i have seen such demo

Cool :)

Thanks
Yashwant

S.M.Mousavi

Cool CSS!
I made some changes into my code like as @Mangesh and also i replaced :: with : and + with ~ and i added -o-… as -moz-… into css classes (e.g. -o-border-radius). Now it works fine on Opera, Chrome, FF.
Thanks many :)

Mike Goodstadt

Thanks for the demo.
Was using an 8 year old version of this on my site… will update.
A side note if I may…
I think there is a misunderstanding here in the comments about the display of family trees.
A Pedigree tree (your ancestors) has a simple split into 2 at each level – mother and father. So this codeplayer example works great.
A Descendants tree shows each partner as a “child” (using the term shown here in this walkthrough) from which springs the children. So again this is a good example.
These are the two core methods of visualizing graphically genealogy for analysis.
For a more holistic display of data, a more complex network is often used (Ancestry.com’s Family view) which is interesting to browse all the connections for multiple lines. Such presentational diagrams obviously require a more complicated arrangement and coding.

moslem

pause button does not work some times. and please add a stop button to stop playback and show the result. ;)

Madalin

Amazing effect, love it.

Jagannathan

How can i make it work on IE 8 and IE7 ?

Jim

Very nice.

Craig Gingell

Great resource – I’ve been using a similar approach to display family trees on my website the old way using tables, but have now updated it to use CSS3.

My version supports multiple marriages and shades males and females in blue and pink.

Take a look at an example here with over 1600 names -

http://www.gingell.com/familytree/trees.asp?id=00001&type=css3

Karan Vir Singh Sidhu

Has anyone worked out a way to get multiple parents side by side?

MD

Would it be possible to add CSS such that when you hover over any child, grand child, or great grand child element, it would highlight that element’s lineage?

Hessel

Hey Ruby,

I really like your code. Could you give us an estimation when you’re done with the ‘multiple parent’ option.

Or please just give a hint how to solve it… Did you also about divorced people, remarried and getting new children… etc?

Greetings from the Netherlands!

dave

Thanks to Ruby and commenters for all this – really helpful!

As a workaround for the marriage thing you can set up subclasses for husband and wife eg a.husb and a.wife where you set “border:none;” and remove the border radiuses on one side. Then render these as inline blocks in a div with a class eg. “marriage” where the div is styled with the border and border-radius. Result is that you have one box containing two individuals (with separate links and hovers) and the connectors flow into / out of the box with ruby’s existing css.

Sara C. Schvartzman

I have made a simple multiple parent tree starting from this example.

You can find at
http://www.gmrv.es/~sschvartzman/Sara_C._Schvartzman/multipleParent.html

with css file:

http://www.gmrv.es/~sschvartzman/Sara_C._Schvartzman/tree.css

Craig Gingell

You have to display partners BELOW the individual’s name and NOT to the side, because it won’t work for family trees where an individual is married more than once. How else will you show King Henry VIII and his SIX wives?

schoo

This is great!
Does anyone have the updated code to support multiple parents?

schoo

Sara, can you put more complex example of your code please?
E.g. with 2 grandparants, parents and child? I mean HTML code for this with use of your upgraded CSS?

Sara C. Schvartzman

You are right Craig, with my code a person can only marry 2 people. Also, it can not allow more complex examples like:
Grandparents of father, Grandparents of mother, father, mother, children.

Craig Gingell

Hi Sara, I have a solution to show both paternal and maternal grandparents in the SAME tree along with the parents and the children. It’s not yet a CSS3 solution, but you can view it on my website at -

http://www.gingell.com/familytree/?fam=00002&indi=00008

When I get time, I will post a pure CSS3 solution.

schoo

Can this tree be horiznotal? If so, does anyone knows how?

schoo

Or inverse tree, so that Parent is at the bottom?

vnkrsv

css not compatible with IE7 and earlier, please check back.

Falguni Debnath

I want to know the person who created css family tree.

If any one can say or who can develop Family Tree in css code kindly intimate me replydesk@gmail.com

oto

How would it be to do something like that?
  http://www.oficinadanet.com.br/imagens/coluna/1554/gd_organograma_01.jpg

Sanket

This is just amazing!

umer

If you hate yourself than do this…it will work.

Visweshwar

The tree wouldn’t bleed if you add this to the CSS

.tree {
white-space: nowrap;
overflow: auto;
}

@Craig Gingell good catch…

Visweshwar

Also for larger trees in DIVs

tree li should have

float:none;
display:inline-block;
vertical-align:top;

in addition to

the above comment

Rick Kevin

how about that name grand child, child, parent come from a database?
i’m using a database and want to build that family tree.
how can i use it?
thank you..

gh0st

Every comment I have read is “this is nice but “Supposed to be a family tree…Not unless you’re a family of self replicating micro-organisms” — are your serious? I mean, SERIOUS?

This is some slick code, absolutely showed me what I was trying to grasp, and I totally appreciate the author for putting this up. Thank you sir from all us self replicating micro-organisms!!!

edy

Nice..

But any idea for add partner? i mean before add child, i want to add partner first, like father and mother

Thanks

Ciaran Mooney

Hey great code.
Some relationships appear broken not sure if its
the size of container or my HTML mark up,
Wat do u think, any feedback much appreciated.
Link is
http://www.mooneycallans.com/mooneyTree1.html

Craig Gingell

I gave up trying to make this work on IE8. Instead, I’m detecting IE8 (and earlier) on the server and rendering the page with a totally different template. Here’s my tree with support for multiple marriages

http://www.gingell.com/familytree/?tree=00001

Anyone trying to display an individual’s partner to the side should give up now. I have instances in my tree where some people have been married more than twice. There is no easy way to show that other than displaying partners below.

Ciaran

Hi all,
The uppermost branches of my tree are
spread wider the branches following them making
a large family tree difficult to view.
Is this norm for everybody else or is there a way
around it?
http://www.mooneycallans.com/mooneyTree2.html
Cheers
Ciaran

Chris

Great code. The best looking i have found online. Just one question. Is it hard to write this code so that the tree starts from left to right rather than top to bottom? I am not keen with css styling at all so any help would be great.

Paul d'Aoust

This demo is so beautiful it made me want to cry. Seriously — it’s so elegant and uses the natural semantic structure of lists to good effect. It doesn’t feel like a hack, which was unexpected.

Misha

Super helpful, thanks a ton!