I'm following this guide on how to make a family tree using only CSS3. But I can't really get my head around how to make a marriage.
To clarify:
What the codes does now is this:
what i want to add is this:
I know it's a simple question, but right now im stock
It appears someone has updated the original code to support husband/wife relationships. Good luck!
From the notes on the page:
"Note: I am working on a new version of this family tree which will have IE support to some extent and will have multiple parents to make it a practical solution for a family tree."
So it looks like 'multiple parents' aren't supported as yet.
What about just putting husband/wife in same li element and then using CSS to connect them? Something like this:
<style>
.husband { float: left; }
.wife { margin-left:10px; }
.wife::before {
/* pseudo CSS, will need to be modified */
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
</style>
<li>
<ul>
<li>
<a class="husband" href="#">Grand Child</a>
<a class="wife" href="#">Wife</a>
<ul>
<li><a href="#">Kid</a></li>
<li><a href="#">Kid</a></li>
</ul>
</li>
</ul>
</li>
Here's the approach I took
<li>
<ul>
<li>Father</li>
<li>Mother</li>
</ul>
<a href="http://www.clarkeology.com/names/clarke/21/james">James CLARKE1779 - 1860</a>
<div itemprop="spouse">
<a href="http://www.clarkeology.com/names/cole/19/elizabeth">Elizabeth COLE 1794 - 1865</a>
</div>
<ol>
<li><a>Child</a></li>
<li><a>Child</a></li>
<li><a>Child</a></li>
</ol>
</li>
then any <li> throughout the tree can repeat like that (though if you add children AND parents to all of them you'd get a mess... generally just add one or the other once you get past the "core" person in that view.
Real example is on http://www.clarkeology.com with annotated css at /css/_tree.css and the code I wrote to parse a GEDCOM file and create the necessary html is at https://github.com/pauly/js-gedcom
I used itemprop instead of class above as I'm actually adding schema.org microformats to all mine too, but class would work just fine.
I really enjoyed the original css when I found it the other day, this has been fun to work on. Pull requests welcome on my code!
How about this?
<li>
<ul>
<li>
<a href="#">Grand Child</a>
</li>
<li>
<a href="#">Wife</a>
</li>
</ul>
</li>
So wrap the last grand-child into a ul. This gives you a line over the two, not in between but I don't think your box model allows for this right now...
