skip to Main Content

I have the following css code for drawing familly trees:

.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  display: table-cell;
  text-align: center;
  vertical-align: top; /* added this */
  list-style-type: none;
  position: relative;
  /*the padding is 20px + border-top = 23px*/
  padding: 23px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 3px solid #ccc;
  width: 50%;
  height: 20px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 3px solid #ccc;
}


/*We need to remove left-right connectors from elements without 
any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Remove left connector from first child and 
right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 3px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 3px solid #ccc;
  width: 0;
  height: 20px;
}

.tree li .family {
  position: relative;
}


/* Person */

.person {
  border: 3px solid black;
  padding: 10px;
  min-width: 150px;
  /* min-height: 100px ;
  to increase the min height of the boxes background-color: #FFFFFF; */
  display: inline-block;
}

.person.female {
  border-color: #F45B69;
  top: 0px
}

.person.male {
  top: 0px;
  border-color: #456990;
}

.person .content {
  position: relative;   
  font-size: 16px;
  text-align: center;
}

Globally, this works well, but unfortunately, an offset appears in the display of the blocks.
As a simple example, the following html code

<html>

<HEAD>
<title> Family tree </title>
<link rel="stylesheet" href="styles.css">
<META http-equiv="content-type" CONTENT="text/html; charset=UTF-8" />
</HEAD>

<body bgcolor="white" background="" vlink="peru" alink="peru" link="peru">

<b>

<div class="tree" align=center>
    <ul>
        <li>
            <div class="person child male">
                <div class="content">
                    some very very big familly name
                </div>
            </div>
            <ul >
                <li>
                    <div class="person child male">
                        <div class="content">Uncle</div>
                    </div>              
                </li>                   
            </ul>       
        </li>
    </ul>
</div>

</body>

</html>

Produce the following display:

tree

We see that the second block is offset to the right with respect to the first block, while it should be centered just below it.

3

Answers


  1. Try to add style="padding: 0;" to your second <ul>

    like : <ul style="padding: 0;">

    tree ul {
      padding-top: 20px;
      position: relative;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
    }
    
    .tree li {
      display: table-cell;
      text-align: center;
      vertical-align: top; /* added this */
      list-style-type: none;
      position: relative;
      /*the padding is 20px + border-top = 23px*/
      padding: 23px 5px 0 5px;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
    }
    
    
    /*We will use ::before and ::after to draw the connectors*/
    
    .tree li::before,
    .tree li::after {
      content: '';
      position: absolute;
      top: 0;
      right: 50%;
      border-top: 3px solid #ccc;
      width: 50%;
      height: 20px;
    }
    
    .tree li::after {
      right: auto;
      left: 50%;
      border-left: 3px solid #ccc;
    }
    
    
    /*We need to remove left-right connectors from elements without 
    any siblings*/
    
    .tree li:only-child::after,
    .tree li:only-child::before {
      display: none;
    }
    
    
    /*Remove space from the top of single children*/
    
    .tree li:only-child {
      padding-top: 0;
    }
    
    
    /*Remove left connector from first child and 
    right connector from last child*/
    
    .tree li:first-child::before,
    .tree li:last-child::after {
      border: 0 none;
    }
    
    
    /*Adding back the vertical connector to the last nodes*/
    
    .tree li:last-child::before {
      border-right: 3px solid #ccc;
      border-radius: 0 5px 0 0;
      -webkit-border-radius: 0 5px 0 0;
      -moz-border-radius: 0 5px 0 0;
    }
    
    .tree li:first-child::after {
      border-radius: 5px 0 0 0;
      -webkit-border-radius: 5px 0 0 0;
      -moz-border-radius: 5px 0 0 0;
    }
    
    
    /*Time to add downward connectors from parents*/
    
    .tree ul ul::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      border-left: 3px solid #ccc;
      width: 0;
      height: 20px;
    }
    
    .tree li .family {
      position: relative;
    }
    
    
    /* Person */
    
    .person {
      border: 3px solid black;
      padding: 10px;
      min-width: 150px;
      /* min-height: 100px ;
      to increase the min height of the boxes background-color: #FFFFFF; */
      display: inline-block;
    }
    
    .person.female {
      border-color: #F45B69;
      top: 0px
    }
    
    .person.male {
      top: 0px;
      border-color: #456990;
    }
    
    .person .content {
      position: relative;   
      font-size: 16px;
      text-align: center;
    }
    <div class="tree" align=center>
    <ul>
      <li>
          <div class="person child male">
              <div class="content">
                  some familly name  
              </div>
          </div> 
          <ul style="padding: 0;">
              <li>
                  <div class="person child male">
                      <div class="content">Uncle</div>
                  </div>              
              </li>                   
          </ul>       
      </li>
    </ul>
    </div>
    Login or Signup to reply.
  2. try this:

    <style>
        .tree > ul {
      padding-top: 20px;
      position: relative;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
    }
    
    .tree ul li ul {
        position: relative;
        padding: 20px 0 0 0;
    } 
    
    .tree li {
      display: table-cell;
      text-align: center;
      vertical-align: top; /* added this */
      list-style-type: none;
      position: relative;
      /*the padding is 20px + border-top = 23px*/
      padding: 23px 5px 0 5px;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
    }
    
    
    /*We will use ::before and ::after to draw the connectors*/
    
    .tree li::before,
    .tree li::after {
      content: '';
      position: absolute;
      top: 0;
      right: 50%;
      border-top: 3px solid #ccc;
      width: 50%;
      height: 20px;
    }
    
    .tree li::after {
      right: auto;
      left: 50%;
      border-left: 3px solid #ccc;
    }
    
    
    /*We need to remove left-right connectors from elements without 
    any siblings*/
    
    .tree li:only-child::after,
    .tree li:only-child::before {
      display: none;
    }
    
    
    /*Remove space from the top of single children*/
    
    .tree li:only-child {
      padding-top: 0;
    }
    
    
    /*Remove left connector from first child and 
    right connector from last child*/
    
    .tree li:first-child::before,
    .tree li:last-child::after {
      border: 0 none;
    }
    
    
    /*Adding back the vertical connector to the last nodes*/
    
    .tree li:last-child::before {
      border-right: 3px solid #ccc;
      border-radius: 0 5px 0 0;
      -webkit-border-radius: 0 5px 0 0;
      -moz-border-radius: 0 5px 0 0;
    }
    
    .tree li:first-child::after {
      border-radius: 5px 0 0 0;
      -webkit-border-radius: 5px 0 0 0;
      -moz-border-radius: 5px 0 0 0;
    }
    
    
    /*Time to add downward connectors from parents*/
    
    .tree ul ul::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      border-left: 3px solid #ccc;
      width: 0;
      height: 20px;
    }
    
    .tree li .family {
      position: relative;
    }
    
    
    /* Person */
    
    .person {
      border: 3px solid black;
      padding: 10px;
      min-width: 150px;
      /* min-height: 100px ;
      to increase the min height of the boxes background-color: #FFFFFF; */
      display: inline-block;
    }
    
    .person.female {
      border-color: #F45B69;
      top: 0px
    }
    
    .person.male {
      top: 0px;
      border-color: #456990;
    }
    
    .person .content {
      position: relative;   
      font-size: 16px;
      text-align: center;
    }
    
    </style>
        
    <div class="tree" align="center">
       <ul>
            <li>
                <div class="person child male">
                    <div class="content">
                        some familly name  
                    </div>
                </div>
                <ul>
                    <li>
                        <div class="person child male">
                            <div class="content">Uncle</div>
                        </div>              
                    </li>                   
                </ul>       
            </li>
        </ul>
    </div>
    Login or Signup to reply.
  3. When I look at it using the element inspector, I see an additional padding-inline-start: 40px; in ul. Perhaps this is the default style for ul. You can choose to remove it. To make the child centered, maybe you can use display: flex

    Try changing

    tree ul {
      padding-top: 20px;
      position: relative;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
    }
    

    to

    .tree ul {
      display: flex;
      justify-content: center
      padding-top: 20px;
      padding-inline-start: 0;
      position: relative;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search