CSS3 family tree, how to add wife

Question

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 no

Answer 1

It appears someone has updated the original code to support husband/wife relationships. Good luck!

Answer 2

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!

Answer 3

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.

Answer 4

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...

Answer 5

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>