Organizational chart

Question

I found this diagram to display a family tree. Everything is very nice to expect from a husband and wife. The connector between husband and wife is not straight. I want the connecting line between husband and wife to be straight. live channel can be seen in the link below: jsFiddle live demo

/*Now the CSS*/ * { margin: 0; padding: 0; } .yellow { background: #FFEC94; } .orange { background: #FFF7EF; } .green { background: #B0E57C; } .royal-blue { background: #56BAEC; } .brown { background: #FFAEAE; } .green-one { background: #D6E3B5; } .tree ul { padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .tree li { float: left; 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; } /*We will use ::before and ::after to draw the connectors*/ .tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 20px; } .tree li::after { right: auto; left: 50%; border-left: 1px solid #ccc; } /*We need to remove left-right connectors from elements without any siblings*/ .tree li:only-child::after, .tree li:only-child::before { display: none; } /*Remove space from the top of single children*/ .tree li:only-child { padding-top: 0; } /*Remove left connector from first child and right connector from last child*/ .tree li:first-child::before, .tree li:last-child::after { border: 0 none; } /*Adding back the vertical connector to the last nodes*/ .tree li:last-child::before { border-right: 1px solid #ccc; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; } .tree li:first-child::after { border-radius: 1px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; } /*Time to add downward connectors from parents*/ .tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px; } .tree li a { border: 1px solid #ccc; padding: 5px 10px; text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*Time for some hover effects*/ /*We will apply the hover effect the the lineage of the element also*/ .tree li a:hover, .tree li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } /*Connector styles on hover*/ .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before { border-color: #94a0b4; } /*Thats all. I hope you enjoyed it. Thanks :)*/ 

 <div class="tree" style="width:2860px"> <ul> <li> <a href="#" class="first yellow">Husband Name</a> <ul> <li><a href='#'>Child One</a> </li> <li> <a href='#'>Child Two</a> <ul> <li><a href='#'>Grand Child One</a> </li> </ul> </li> </ul> </li> <li> <a href="#" class="first yellow">Spouse Name</a> </li> </ul> </div> 

Thanks

Answer 1

I am writing another answer because perhaps the first one may be useful to others. Here is a solution to the problem of communication between husband and wife.

 $(document) .ready(function() { $('.c1').hide(); $("a").click(function(){ $(this).parent().children("ul").toggle(); }); }); 

 /*Now the CSS*/ * {margin: 0; padding: 0;} .yellow{background:#FFEC94;} .orange{background:#FFF7EF;} .green{background:#B0E57C;} .royal-blue{background:#56BAEC;} .brown{background:#FFAEAE;} .green-one{background:#D6E3B5;} .tree ul { padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .tree li { float: left; 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; } /*We will use ::before and ::after to draw the connectors*/ .tree li::before, .tree li::after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 20px; } .tree li::after{ right: auto; left: 50%; border-left: 1px solid #ccc; } /*We need to remove left-right connectors from elements without any siblings*/ .tree li:only-child::after, .tree li:only-child::before { display: none; } /*Remove space from the top of single children*/ .tree li:only-child{ padding-top: 0;} /*Remove left connector from first child and right connector from last child*/ .tree li:first-child::before, .tree li:last-child::after{ border: 0 none; } /*Adding back the vertical connector to the last nodes*/ .tree li:last-child::before{ border-right: 1px solid #ccc; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; } .tree li:first-child::after{ border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; } /*Time to add downward connectors from parents*/ .tree ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px; } .tree li a{ border: 1px solid #ccc; padding: 5px 10px; text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*Time for some hover effects*/ /*We will apply the hover effect the the lineage of the element also*/ .tree li a:hover, .tree li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } /*Connector styles on hover*/ .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before{ border-color: #94a0b4; } .tree .spouse::before, .tree .spouse::after, .tree .husband::before, .tree .husband::after{ top: 30px; height: 0; z-index: -1; } tree .husband::before, .tree .husband::after{ } .tree .spouse::before, .tree .spouse::after{ } /*Thats all. I hope you enjoyed it. Thanks :)*/ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="tree" style="width:2860px"> <ul> <li class="husband"> <a href="#" class="first yellow">Husband Name</a> <ul> <li><a href='#'>Child One</a> </li> <li> <a href='#'>Child Two</a> <ul> <li><a href='#'>Grand Child One</a> </li> </ul> </li> </ul> </li> <li class="spouse"> <a href="#" class=" first yellow">Spouse Name</a> </li> </ul> </div> 

Answer 2

I have a possible solution, unfortunately, it is not always general, but better than nothing that I think.

Here is the solution:

jsfiddle

Here you can see the solution in full screen.

 $(document).ready(function() { $('.c1').hide(); $("a").click(function() { $(this).parent().children("ul").toggle(); //make ul visible //foreach visible ul $($('ul').filter(':visible')).each(function() { var ul = $(this); var ulL = (ul.outerWidth() / 2); var lenght = 0; //calculate the left rule accordingly to the length of the li if(ul.children("li").length > 2){ var middle = Math.ceil(ul.children("li").length / 2); for (var i = 1; i < middle; i++) { lenght = lenght + ul.children("li:nth-child(" + i + ")").outerWidth(); } if ((ul.children("li").length)%2 == 0){ lenght = lenght + (ul.children("li:nth-child(" + middle + ")").outerWidth()); }else{ lenght = lenght + (ul.children("li:nth-child(" + middle + ")").outerWidth() / 2); } ul.find("li").css("left", (ulL - lenght)); } else if(ul.children("li").length === 2){ // base case, only two li var ulL = (ul.outerWidth() / 4); var half = ul.children("li:first-child").outerWidth() / 2; ul.find("li").css("left", (ulL - half)); } else if(ul.children("li").length === 1){ // base case, only 1 li ul.find("li").css("left", 0); } }); }); }); 

Unfortunately, such a calculation does not always make a diagram well formed, so I added a class:

 .no-left > li{ left: 0 !important; } 

In this example, I used this in

  <a href="#" class="yellow">Director <br />Oprn</a> <ul class="c1 no-left"> .... </ul>