Family tree hierarchy with Pure CSS using divs

Question

I'm trying to build a family tree, I have a problem with connecting lines, I managed to do first row, with oblique lines, however when I apply the same to the second row the oblique lines disappears. Any ideas how to fix it?

* {
  margin: 0;
  padding: 0;
}

body {
  background: url(../img/bg.jpeg);
}

img {
  border-radius: 100%;
  width: 150px;
  height: 150px;
  box-shadow: 4px 4px 13px #222;
  border: solid 3px #606f46;
}

span {
  background: #beebb3;
  border-color: #606f46;
  border-radius: 30px 0 30px 0;
  padding: 2px;
  border-style: solid;
  margin-top: 5px;
  box-shadow: 4px 4px 13px #222;
}

h1 {
  /* width: 580px; */
  font-family: 'My Soul', cursive;
  font-size: 3.6rem;
  text-align: center;
  margin: 10px auto;
  padding-top: 10px;
}

#no1 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 60px;
  margin: auto;
}

#container1 {
  width: 580px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  margin: auto;
}

#container a {
  display: block;
  color: #000;
  text-decoration: none;
  background-color: #beebb3;
}

#no1 a {
  height: 60px;
}

#no2 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 60px;
  margin: auto;
  margin-top: 9px;
}

#no3 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 60px;
  margin: auto;
  margin-top: 9px;
}

#no4 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 60px;
  margin: auto;
  margin-top: 9px;
}

.container2 {
  display: flex;
  justify-content: center;
  margin-left: 240px;
}

.container3 {
  display: flex;
  justify-content: center;
  margin-left: 35px;
  margin-right: 150px;
}

.container4 {
  display: flex;
  justify-content: center;
  margin-right: 240px;
}

.tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.level1 {
  display: flex;
  height: 3px;
  width: 18%;
  border-style: hidden solid solid solid;
  margin: auto;
  border-width: thick;
}

.oblique1 {

  width: 23%;
  transform: rotate(-30deg);
  border-width: thick;
  border-style: hidden hidden solid hidden;
}

.oblique2 {

  width: 23%;
  transform: rotate(30deg);
  border-width: thick;
  border-style: hidden hidden solid hidden;
}

.line_container1 {
  display: flex;
  margin-left: 200px;
  margin-top: 17px;
}

.line_container2 {
  display: flex;
}

.images {
  background-color: white;
}

.container22 {
  width: 700px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  margin: auto;
}





  Family Tree
  
  
  
  
  



  
    ___Family Tree___
    
      
        
        
          Homer Simpson
        
      
      
        
        
          Marge Simpson
        
      
    

    
    
      
      
    





    
      
        
        
          Bart Simpson
        
      
      
        
        
          Lisa Simpson
        
      
      
        
        
          Abraham Simpson
        
      
      
        
        
          Maggie Simpson
        
      

    




      
        
          
          
      

      
      
        
          
          
      


    
    


    
      
        
        
          Ned Flanders
        
      
      
        
        
          Elizabeth Hoover
        
      
      
        
        
          Seymour Skinner
        
      
      
        
         Edna Krabappel
        
      


      
        
        
          Barney Gumble
        
      
      
        
        
          Selma Bouvier
        
      
    
    
      
        
          
          
            Kent Brockman
          
        
        
          
          
            Mayor Quimby
          
        
        
          
          
            Sideshow Bob
          
        
      
      
        
          
          
            Clancy Wiggum
          
        
      
      
        
          
          
            Nikki McKenna
          
        
        
          
          
            Milhouse Van Houten

zer00ne · Accepted Answer

First, try using more semantic tags, in the example

,

were used instead of
and . It doesn't make the HTML invalid if you only use
and but it'll hold less meaning and there's a greater chance of errors being overlooked.

`display: table/table-row/table-cell` was assigned to
`/`
`/`
respectively. Using for layout is highly discouraged, but using other tags that behave like a is ok. In the example, the table-like layout is 3 rows (one row for each generation) and 5 columns. The only borders that are visible are actually the lines that connect "leaves" to each other (as spouses or siblings). For demonstration purposes I added a little JavaScript -- just click anywhere to toggle the invisible borders off and on. Further details are commented in the example below Family Tree ___Simpson Family Tree___ Abraham Simpson Mona Simpson Homer Simpson Marge Simpson Bart Simpson Lisa Simpson Maggie Simpson

Family tree hierarchy with Pure CSS using divs

Answers (1)

Related Questions