Geek asks and answers

CSS3 generation tree, how to add a wife

I follow this guide on how to create a family tree using only CSS3. But I can’t understand how to make a marriage.

To clarify: What the code is doing now: enter image description here

what i want to add: enter image description here

I know this is a simple question, but right now im stock

+5
source share
5 answers

It seems that someone has updated the source code to support the relationship between husband and wife. Good luck

+1
source

From the notes on the page:

". , IE , ."

, , " " .

+3

, / li, CSS ? - :

<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>
+2

,

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

<li> (, , ... , , "" " .

http://www.clarkeology.com css /css/ _tree.css , , GEDCOM html https://github.com/pauly/js-gedcom

itemprop class , microformats schema.org , .

css, , . !

+2

?

<li>
    <ul>
        <li>
            <a href="#">Grand Child</a>
        </li>
        <li>
            <a href="#">Wife</a>
        </li>
    </ul>
</li>

, ul. , , , ...

+1

More articles:


All Articles