CSS3 family tree, how to add wife

左心房为你撑大大i 提交于 2019-12-21 02:34:13

问题


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


回答1:


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




回答2:


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.




回答3:


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>



回答4:


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!




回答5:


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



来源:https://stackoverflow.com/questions/12051809/css3-family-tree-how-to-add-wife

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!