Family tree hierarchy with Pure CSS using divs
First, try using more semantic tags, in the example <main>, <section>, <figure>, and <figcaption> were used instead of <div> and <span>. It doesn't make the HTML invalid if you only use <div> and <span> but it'll hold less meaning and there's a greater chance of errors being overlooked.
display: table/table-row/table-cell was assigned to <main>/<section>/<figure> respectively. Using <table> for layout is highly discouraged, but using other tags that behave like a <table> is ok. In the example, the table-like layout is 3 rows (one row for each generation) and 5 columns. The only borders that are visible are actually the lines that connect "leaves" to each other (as spouses or siblings). For demonstration purposes I added a little JavaScript -- just click anywhere to toggle the invisible borders off and on.
Further details are commented in the example below
<!DOCTYPE html>
<html>
<head>
<title>Family Tree</title>
<link rel="shortcut icon" href="./img/family-tree.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=My+Soul&family=Sacramento&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
/*
Default font-size is referenced here
Any rem used elsewhere will be directly referenced to this font-size
Default is dynamic -- whenever window is resized, it will adjust to width
if it is bigger than height and vice versa.
In turn, anything in rem will also adjust 2.5vmax === 1rem
*/
html {
font: 2.5vmax/1.5 Sacramento;
}
body {
padding-bottom: 12px;
}
/*
As a <table>, main will adhere to what each column is in width. this
behavior allows it to scale to the width of viewport (window).
*/
main {
display: table;
table-layout: fixed;
width: 100%;
background: transparent;
}
h1 {
display: table-caption;
margin: 10px auto;
padding-top: 10px;
font-family: 'My Soul';
font-size: 2.6rem;
text-align: center;
}
/*
As a <tr>, it automatically holds it's children in a solid row
*/
section {
display: table-row;
background: transparent;
}
/*
As a <td>, padding, vertical-align, width, etc are handled so each one is
uniformly the same height and content is evenly positioned.
*/
figure,
.cell {
display: table-cell;
width: 20%;
background: transparent;
}
img {
width: 7.5em;
height: 7.5rem;
border: solid 3px #606f46;
border-radius: 100%;
box-shadow: 4px 4px 13px #222;
}
figcaption {
width: min-content;
margin-top: -5px;
padding: 10px;
border-style: solid;
border-color: #606f46;
border-radius: 30px 0 30px 0;
background: #beebb3;
box-shadow: 4px 4px 13px #222;
text-align: center;
}
/*
These tags act as empty cells and are placed in-between each "leaf". The majority
of the lines are from their visible borders.
*/
.cell b {
display: block;
position: relative;
z-index: -1;
min-height: 4rem;
}
/*
Applied to .cell between parents -- it connects them
*/
.parents b {
border-top: 6px solid black;
}
/*
Applied to .cell between parents -- it adds a descendant line
*/
.parents b::before {
content: '';
display: block;
position: absolute;
left: 45%;
width: 1px;
height: 8.25rem;
border: 3px solid black;
background: black;
}
/*
Applied to .cell between siblings and the <figure> of any middle children
-- it connects them
*/
.siblings {
border-top: 6px solid black;
}
/*
Applied to .cell to the right of the oldest child and to the left of the
youngest child
*/
.elder,
.baby {
position: relative;
}
/*
Applied to .cell to the right of the oldest child and adds an arrow
*/
.elder::before {
content: '\002b9f';
position: absolute;
left: -1rem;
top: -1.5rem;
font-size: 2rem;
transform: rotate(45deg);
}
/*
Applied to the .cell to the left of the youngest child and adds an arrow
*/
.baby::after {
content: '\002b9f';
position: absolute;
right: -1rem;
top: -1.5rem;
font-size: 2rem;
transform: rotate(-45deg);
}
/*
For demonstration purposes
Styles showLayout(e) toggles on every click (optional)
*/
.show .cell b {
outline: 3px dotted rgba(255, 0, 50, 0.6);
}
.show .cell {
outline: 2px dashed rgba(129, 129, 129, 0.4);
}
</style>
</head>
<body>
<main>
<h1>___Simpson Family Tree___</h1>
<section>
<div class='cell'><b></b></div>
<figure>
<img src="https://i.pinimg.com/originals/e5/4a/bc/e54abc44b68d6b2770696b789b20dafa.png">
<figcaption>Abraham Simpson</figcaption>
</figure>
<div class='cell parents'><b></b></div>
<figure>
<img src='https://comicvine.gamespot.com/a/uploads/square_tiny/11/111746/6556151-mona_simpson.png'>
<figcaption>Mona Simpson</figcaption>
</figure>
<div class='cell'><b></b></div>
</section>
<section>
<div class='cell'><b></b></div>
<div class='cell'><b></b></div>
<figure>
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
<figcaption> Homer Simpson </figcaption>
</figure>
<div class='cell parents'><b></b></div>
<figure>
<img src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png">
<figcaption>Marge Simpson</figcaption>
</figure>
</section>
<section>
<figure>
<img src="https://openpsychometrics.org/tests/characters/test-resources/pics/S/2.jpg">
<figcaption>Bart Simpson</figcaption>
</figure>
<div class='cell siblings elder'><b></b></div>
<figure class='siblings'>
<img src="https://mella187.github.io/Cartoon-Hero/img/lisa-avatar.jpg">
<figcaption>Lisa Simpson</figcaption>
</figure>
<div class='cell siblings baby'><b></b></div>
<figure>
<img src="https://icons.iconarchive.com/icons/jonathan-rey/simpsons/256/Maggie-Simpson-icon.png">
<figcaption>Maggie Simpson</figcaption>
</figure>
</section>
</main>
<script>
/*
For demonstration purposes - it exposes the borders (optional)
*/
document.querySelector('main').onclick = showLayout;
function showLayout(e) {
this.classList.toggle('show');
}
</script>
</body>
</html>Creating family tree using HTML/CSS
I would try another approach. Here is an example:
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box;}
body { min-width: 1200px; margin: 0; padding: 50px; color: #333; font: 16px Verdana, sans-serif; background: #dedede; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#wrapper { position: relative;}
.branch { position: relative; margin-right: 250px;}.branch:before { content: ""; width: 50px; border-top: 2px solid #333; position: absolute; right: -100px; top: 50%; margin-top: 1px;}
.entry { position: relative; min-height: 60px;}.entry:before { content: ""; height: 100%; border-right: 2px solid #333; position: absolute; right: -50px;}.entry:after { content: ""; width: 50px; border-top: 2px solid #333; position: absolute; right: -50px; top: 50%; margin-top: 1px;}.entry:first-child:before { width: 10px; height: 50%; top: 50%; margin-top: 2px; border-radius: 0 10px 0 0;}.entry:first-child:after { height: 10px; border-radius: 0 10px 0 0;}.entry:last-child:before { width: 10px; height: 50%; border-radius: 0 0 10px 0;}.entry:last-child:after { height: 10px; border-top: none; border-bottom: 2px solid #333; border-radius: 0 0 10px 0; margin-top: -9px;}.entry.sole:before { display: none;}.entry.sole:after { width: 50px; height: 0; margin-top: 1px; border-radius: 0;}
.label { display: block; min-width: 150px; padding: 5px 10px; line-height: 20px; text-align: center; border: 2px solid #333; border-radius: 5px; position: absolute; right: 0; top: 50%; margin-top: -15px;}<div id="wrapper"><span class="label">Root</span> <div class="branch lv1"> <div class="entry"><span class="label">Entry-1</span> <div class="branch lv2"> <div class="entry"><span class="label">Entry-1-1</span> <div class="branch lv3"> <div class="entry"><span class="label">Entry-1-1-1</span></div> <div class="entry"><span class="label">Entry-1-1-2</span></div> <div class="entry"><span class="label">Entry-1-1-3</span></div> </div> </div> <div class="entry"><span class="label">Entry-1-2</span> <div class="branch lv3"> <div class="entry sole"><span class="label">Entry-1-2-1</span></div> </div> </div> <div class="entry"><span class="label">Entry-1-3</span> <div class="branch lv3"> <div class="entry sole"><span class="label">Entry-1-3-1</span></div> </div> </div> </div> </div> <div class="entry"><span class="label">Entry-2</span></div> <div class="entry"><span class="label">Entry-3</span> <div class="branch lv2"> <div class="entry"><span class="label">Entry-3-1</span></div> <div class="entry"><span class="label">Entry-3-2</span></div> <div class="entry"><span class="label">Entry-3-3</span> <div class="branch lv3"> <div class="entry"><span class="label">Entry-3-3-1</span></div> <div class="entry"><span class="label">Entry-3-3-2</span> <div class="branch lv4"> <div class="entry"><span class="label">Entry-3-3-2-1</span></div> <div class="entry"><span class="label">Entry-3-3-2-2</span></div> </div> </div> <div class="entry"><span class="label">Entry-3-3-3</span></div> </div> </div> <div class="entry"><span class="label">Entry-3-4</span></div> </div> </div> <div class="entry"><span class="label">Entry-4</span></div> <div class="entry"><span class="label">Entry-5</span></div> <div class="entry"><span class="label">Entry-6</span></div> </div></div>
<a href="https://stackoverflow.com/a/31161783/762640">Source 1</a><a href="https://codepen.io/anon/pen/OVQXGg">Source 2</a>How I can invert a html family tree layout with css?
Add these 2 styles
.tree {
transform: rotate(180deg);
margin-top: 250px;
}
.tree li a{
transform: rotate(180deg);
}
Here is snippet
.tree { transform: rotate(180deg); margin-top: 250px;}
.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;}
.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;}
.tree li:only-child::after,.tree li:only-child::before { display: none;}
.tree li:only-child { padding-top: 0;}
.tree li:first-child::before,.tree li:last-child::after { border: 0 none;}
.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;}
.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; transform: rotate(180deg); 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;}
.tree li a:hover,.tree li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4;}
.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;}<div class="tree"> <ul> <li> <a href="#">Parent</a> <ul> <li> <a href="#">Child</a> <ul> <li> <a href="#">Grand Child</a> </li> </ul> </li> <li> <a href="#">Child</a> <ul> <li><a href="#">Grand Child</a></li> <li> <a href="#">Grand Child</a> <ul> <li> <a href="#">Great Grand Child</a> </li> <li> <a href="#">Great Grand Child</a> </li> <li> <a href="#">Great Grand Child</a> </li> </ul> </li> <li><a href="#">Grand Child</a></li> </ul> </li> </ul> </li> </ul></div>How do I draw the lines of a family tree using HTML CSS?
Another option for a graphical interface would be the canvas element. You can find some info on it here, here, and some demos of what it can do here.
Personally, I would choose Canvas with an image map overlay or possibly Flash. Creating a graphical layout using only divs or tables could get out of hand very quickly and create huge and ugly code. Although that's a matter of opinion. :)
You could use canvas to render the lines, and then absolutely position divs with text for each node. Or you could render the whole thing in canvas (at which point you would need an image map overlay if you want the rendered tree to be interactive.)
CSS3 family tree, how to add wife
It appears someone has updated the original code to support husband/wife relationships. Good luck!
Family tree with multiple parents and different line types
I finally managed to create a multiple parent family tree diagram.
<!DOCTYPE html> <html> <head><META http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <meta name="description" content=""><meta name="author" content=""><link href="tree.css" rel="stylesheet">
<title>Family Tree</title> </head><body> <h1>Schvartzman family tree</h1>
<div class="tree">
<ul class="pf">
<li class="parent">
<a class="f_nolink">
<div class="person"">Claudia<br>Avila<span>(1961 - )</span></div>
</a>
</li>
<li class="divorce">
<ul class="c"> <li>
<a class="m_nolink">
<div class="person"">Sebastian<br>Berdichevsky<span>(1981 - )</span></div>
</a>
</li>
<li>
<a href="@F62327212@.html" class="f">
<div class="person"">Sara<br>Berdichevsky<span>(1986 - )</span></div>
</a>
</li>
<li>
<a class="m_nolink">
<div class="person"">Manuel<br>Berdichevsky<span>(1987 - )</span></div>
</a>
</li>
<li>
<a class="m_nolink">
<div class="person"">Sergio<br>Berdichevsky<span>(1989 - )</span></div>
</a>
</li>
</ul>
</li>
<li class="parentWithAncestor">
<a href="@F62638334@.html" class="m">
<div class="person"">Eduardo<br>Berdichevsky<span>(1961 - )</span></div>
</a>
</li>
<li class="marriage">
<ul class="c"> <li>
<a class="f_nolink">
<div class="person"">Abigail<br>Berdichevsky<span>(2001 - )</span></div>
</a>
</li>
<li>
<a class="m_nolink">
<div class="person"">Tobias<br>Berdichevsky<span>(2003 - )</span></div>
</a>
</li>
<li>
<a class="m_nolink">
<div class="person"">Iamin<br>Berdichevsky<span>(2007 - )</span></div>
</a>
</li>
</ul>
</li>
<li class="parent">
<a class="f_nolink">
<div class="person"">Carolina<br>Overlar<span>(1978 - )</span></div>
</a>
</li>
</ul>
</div>
<br>
</body> </html>
using a CSS file:
.tree * {margin: 0; padding: 0; }
body {
font-family: arial, verdana, tahoma;
font-size: 12px;
color: #666;
background-color:#fff;
}
.tree{
white-space:nowrap;
padding-bottom: 250px;
}
.tree ul {
padding-top: 5px; position: relative;
display: table;
margin: 0 auto;
font-size:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
/*float: left; */
display:inline-block;
text-align: center;
list-style-type: none;
position: relative;
padding: 70px 5px 0 5px;
font-size: 12px;
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: 70px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 2px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after {
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 li:last-child::before{
border-right: 2px 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;
}
.tree li li:only-child::before {
right: auto; left: 50%;
border-left: 2px solid #ccc;
border-right:none;
}
/*
.tree ul.p>li::before {
border:none;
content: '&';
left:0;
width:100%;
}
.tree ul.p>li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: none;
width: 50%; height: 20px;
}
.tree ul.p>li::after{
border-left: none;
}
*/
/* Use pf to indicate that its a child of another family. */
.tree ul.pf>li::before {
right: auto; left: 50%;
border-left: 2px solid #ccc;
border-right:none;
}
.tree ul.pf>li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: none;
width: 50%; height: 20px;
}
.tree ul.pf>li::after{
border-left: none;
}
/*Time to add downward connectors from parents*/
.tree ul.c {
padding-top: 70px;
}
.tree ul ul.c::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 2px solid #ccc;
width: 0; height: 20px;
border: none;
}
.tree li a{
border: 1px solid #ccc;
padding: 0px;
text-decoration: none;
color: #666;
background-color:#fff;
/*background-image:url(circle.jpg)*/
/*color: #fff;
background-color:#999;*/
display: inline-block;
min-width:50px;
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;
}
/* red border on contacts
.tree li a.o{
border: 1px solid #f66;
}
*/
.tree li a span{
display:block;
font-size: 10px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
/*.tree li a.m:hover { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }
.tree li a.f:hover { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }
.tree li a:hover+ul li a.m { background: #c8e4fb; color: #000; border: 1px solid #94a0b4; }
.tree li a:hover+ul li a.f { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }
.tree li a.md:hover { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }
.tree li a.fd:hover { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }
.tree li a:hover+ul li a.md { background: #c8e4fb; color: #000; border: 1px solid #94a0b4; }
.tree li a:hover+ul li a.fd { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }*/
.tree li a.m{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #c8e4fb; box-shadow:1px 1px 2px #000}
.tree li a.f{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #ffc0cb; box-shadow:1px 1px 2px #000}
.tree li a.m_dead{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #F1F9FE; box-shadow:1px 1px 2px #000}
.tree li a.f_dead{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #FFF0F2;box-shadow:1px 1px 2px #000}
.tree li a.m_nolink{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #c8e4fb; box-shadow:1px 1px 2px #000}
.tree li a.f_nolink{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #ffc0cb; box-shadow:1px 1px 2px #000}
.tree li a.m_dead_nolink{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #F1F9FE; box-shadow:1px 1px 2px #000}
.tree li a.f_dead_nolink{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #FFF0F2;box-shadow:1px 1px 2px #000}
.tree li.marriage{ height:0px; border: 1px; border-style: solid; border-color: #000; color: #000; padding: 0 ; background: #FFF; }
.tree li.marriage::before{border: none}
.tree li.divorce{ height:0px; border: 2px; border-style: dashed; border-color: #000; color: #000; padding: 0 ; background: #FFF; }
.tree li.divorce::before{border: none}
.tree ul.pf>li.parent::before{border: none}
.tree ul.pf>li.parentWithAncestor::before{border-top: none;}
.tree div.person
{
display:inline-block;
vertical-align:central;
padding:20px 0px;
width:80px;
}
/*
.tree li a.m:hover{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #c8e4fb; box-shadow:0 0 4px #222 inset}
.tree li a.f:hover{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #ffc0cb; box-shadow:0 0 4px #222 inset}
.tree li a.m_dead:hover{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #F1F9FE; box-shadow:0 0 4px #222 inset}
.tree li a.f_dead:hover{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #FFF0F2; box-shadow:0 0 4px #222 inset}
*/
/*.tree li a.m { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }
.tree li a.f { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }
.tree li a.md { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }
.tree li a.fd { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }
.tree li a+ul li a.m { background: #c8e4fb; color: #000; border: 1px solid #94a0b4; }
.tree li a+ul li a.f { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }*/
/*Thats all. I hope you enjoyed it.
Thanks :)*/
Related Topics
Should I Avoid Using !Important in Css
Is Embedding Background Image Data into CSS as Base64 Good or Bad Practice
How to Style Icon Color, Size, and Shadow of Font Awesome Icons
Internet Explorer'S CSS Rules Limits
Amazon S3 Cors (Cross-Origin Resource Sharing) and Firefox Cross-Domain Font Loading
Preventing Scroll Bars from Being Hidden For Macos Trackpad Users in Webkit/Blink
How to Create a Drop Shadow Only on One Side of an Element
Adjust List Style Image Position
Pure CSS Checkbox Image Replacement
Play Multiple CSS Animations At the Same Time
How to Make 3-Corner-Rounded Triangle in Css
Left Aligned Last Row in Centered Grid of Elements
How to Change Colour of Blue Highlight on Select Box Dropdown