creating horizontal tree with css

Question

I have an array that i populate a genealogy table with. It is in order like this:

---------3

----1

--------4

0

--------5

----2

--------6

and so on... an example is http://bullybloodlines.net/dogdetails.php?name=muscletone%27s+lucky+bam+bam+of+power+line+bullys

my code for this is:

<?php
$generations = 4;
$genTableArray = array();
for($genCol = 0; $genCol <= $generations; $genCol++)
{
    $genRowCount = pow(2, $genCol);
    $rowspan = pow(2, $generations) / $genRowCount;

    for($familyGenCount=0; $familyGenCount<$genRowCount; $familyGenCount++)
    {
        $personIndex = pow(2, $genCol) + $familyGenCount - 1;
        $rowIndex = $rowspan * $familyGenCount;
        $encodedog = urlencode($dogarr[$personIndex]);
        $genTableArray[$rowIndex][] = "<td rowspan='{$rowspan}'><a href='http://bullybloodlines.net/dogdetails.php?name={$encodedog}'><img src='images/dogpics/{$dogpic[$personIndex]}' width=100/><br><br>{$dogarr[$personIndex]}</a></td>\n";
    }
}

ksort($genTableArray);
$familyTreeHTML = '';
foreach($genTableArray as $rowData)
{
    $familyTreeHTML .= "<tr>\n" . implode("\n", $rowData) . "</tr>\n";
}
?>


<table border='1' align='center' cellpadding='4' style='border-collapse:collapse;'>
    <?php echo $familyTreeHTML; ?>
</table>

This works fine. However, my goal is to change the layout and use CSS to create something like, http://thecodeplayer.com/walkthrough/css3-family-tree but horizontal like my table is.

Ive tried adding this to the css to rotate it:

.tree{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform:  rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */
-ms-transform: rotate(-90deg);
}

It does rotate but text is displayed sideways as well. That is my first issue. I am also having trouble using my array to populate this with the way it is arranged. The "css3-family" tree uses nested lists. Any help would be greatly appreciated. Thank you.

Is there a particular reason you believe that you should "use CSS" rather than a table? Semantically speaking, no other tag can express the relationship between ancestors/descendants as well as a table can. Note that the project you're looking at only supports one parent. — cimmanon, Jul 29 '13 at 01:05
Only because i would like it to look better. HTML tables seem to be a burden to make aesthetically pleasing. — coyne1981, Jul 29 '13 at 22:44
Enhancing the the appearance of elements via CSS isn't limited to non-table elements. There's quite a bit you can do if you get creative with background images: http://cssdeck.com/labs/niw9pvpw — cimmanon, Jul 30 '13 at 01:21

score 4 · Answer 1 · answered Aug 25 '13 at 23:53

4

Theres an awesome example by Peiwen Lu over codepen that you should check out.

Sheer awesomeness

answered Aug 25 '13 at 23:53

Mani

1,597
15
19

score 1 · Answer 2 · answered Oct 21 '19 at 07:00

Quite an old question but my search for horizontal CSS-only tree still leads me here. I didn't find any solution so I had to make it myself.

If you also prefer the CSS3 Family Tree code over the horizontal tree mentioned by Emmanuel (fixed-width, unfortunately), then you might like my codepen based on it. I needed the root to be on the right and it was a little bit harder.

Basically, I've manually rotated all margins/paddings one step (counter-)clockwise. E.g., instead of:

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

you should write

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

or (right to left),

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

In the case of a right-to-left tree, I had also to set direction: rtl.

score 0 · Answer 3 · answered Jul 29 '13 at 07:39

0

not sure the I'm get it right but you caould rotate the inner elements off the tree to get the desired orientation aswell.

So if you do this:

.tree{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform:  rotate(-90deg);    
-ms-transform: rotate(-90deg);
}

you could add:

.tree a {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform:  rotate(90deg);        
    -ms-transform: rotate(90deg);
    }

To fix inner anchors orientation.

answered Jul 29 '13 at 07:39

Jonathan Ruiz

180
1
7

I did make progress adding your code, but the lines between nodes were not displayed correctly. I tried playing around with things to no avail. Im thinking the only way is an html table using images to make it look good. :/ – coyne1981 Jul 29 '13 at 21:38

creating horizontal tree with css

3 Answers3

Linked