CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniel Euchar
Daniel Euchar

Reputation: 1820

Creating child link using css between division

I have been working on a family tree structure and have come up with this code. I am stuck at linking the child elements dynamically to the tree. Kindly help as I have looked up at "CSS Family Tree" but couldn't get much from it.

HTML

<body>
<div class="tree" >
<div id="parent">
    <div id="dad" class="people" >Father</div>
    <div id="mom" class="people" >Mother</div>
    <div class="link"></div>
</div>
<div id="user">
    <div id="user" class="people" >User</div>
    <div id="spouse" class="people" >Spouse</div>
    <div style="clear:both; width:200px; height: 10px; margin-left:88px;border-left:2px #ccc solid;border-bottom:2px #ccc solid;border-right:2px #ccc solid; "></div>
</div>
<div style="width:2px; height:24px; background:#ccc; margin:0 auto;"></div>
<div id="children" style="margin:0 auto; display:block;">
    <div id="1" class="child" >child 1</div>
    <div id="2" class="child" >child 1</div>

</div>

</div>
</body>
​

CSS

.tree{
    width:960px;
    min-height: 600px;
}

#parent{
    margin: 0 129px;
    width:400px;
    height:70px;
    display:block;
}

.link{
    clear:both; 
    width:200px; 
    height: 10px; 
    margin-left:88px;
    border-left:2px #ccc solid;
    border-bottom:2px #ccc solid;
    border-right:2px #ccc solid; 
}

.people{
    height:60px; 
    width:185px; 
    float:left;  
    background:#999;
    margin-right:10px;
}

.child{
    height:60px; 
    width:185px; 
    background:#999;
    margin:0 auto;
    float:left;
    margin-right:10px;
}

#user{
    display:table;
    margin:0 auto;        
}

#user::before{
    width:0px;
    height:24px;
    margin-left:40px; 
    content:'';
    display:block;
    border-left: 2px #ccc solid;
}
#child::before{
    width:0px;
    height:24px;
    margin-left:40px; 
    content:'';
    display:block;
    border-left: 2px #ccc solid;
    border-top: 2px #ccc solid;
}
​

Here is my "JS Fiddle" i want the root lines for child element using css is it possible ? similar to css tree.

Upvotes: 0

Views: 256

Answers (2)

Daniel Euchar
Daniel Euchar

Reputation: 1820

This Could be helpful if some one is struck in the same problem as me. here is a solution CSS Family Tree

Upvotes: 1

Marius Stuparu
Marius Stuparu

Reputation: 474

.Try this:

<body>
<div class="tree" >
<div id="parent">
    <div class="people parent male" >Father</div>
    <div class="people parent female" >Mother</div>
    <div class="link"></div>
</div>
<div id="user">
    <div class="people user male" >User</div>
    <div class="people user female" >Spouse</div>
    <div style="clear:both; width:200px; height: 10px; margin-left:88px;border-left:2px #ccc solid;border-bottom:2px #ccc solid;border-right:2px #ccc solid; "></div>
</div>
<div style="width:2px; height:24px; background:#ccc; margin:0 auto;"></div>
<div id="children" style="margin:0 auto; display:block;">
    <div class="people child male" >child 1</div>
    <div class="people child female" >child 1</div>
</div>
</div>
</body>

And then create classes .people, .parent, .user, .child, .male, .female accordingly. You can also use combinations to isolate cases, like .user.male{} or .child.female{}

Upvotes: 0

Related Questions