0

hello, i have ul li html structure and i am trying to make tree horizontally
My Code Below please suggest me how can i do using css ?

<div class="tree"><ul><li><a>SIRE: Cadenza F F58 Barney CA1FF0058</a><ul><li><a>SIRE: HV International F D3106 HVIFD1306 </a></li><li><a>DAM: Amani Elizabeth 5UBFA0550</a><ul><li><a>SIRE: Amani Lancelot 5UBFW1008</a></li><li><a>DAM: Amani F X2073 5UBFX2073</a></li></ul></li></ul></li><li><a>DAM: Dudauman Park F F30 DPKFF0030</a><ul><li><a>SIRE: Dudauman Park Pharoah (ET) DPKFB6009</a><ul><li><a>SIRE: Farmworld War Lord (Imp SAF) (ET) FWBWUL1A</a></li><li><a>DAM: Terra Cotta Thirty Eight (ET) CJVFU0038</a></li></ul></li><li><a>DAM: Dudauman Park F D8012 (ET) DPKFD8012</a><ul><li><a>SIRE: Campbell\'S Tindarra Stately (ET) CTBFZ4203 </a></li><li><a>DAM: Dudauman Park F A5014 (ET) DPKFA5014</a></li></ul></li></ul></li></ul></div>

see attachment output file that i needs.
thankyou.

Edited by ravi142: image attachment

Attachments 0c904f35d73a3d07bf7d4fcf9b9163e7.jpg 39.42 KB
4
Contributors
12
Replies
47
Views
2 Years
Discussion Span
Last Post by diafol
Featured Replies
  • 1
    diafol 3,720   2 Years Ago

    No reason why it can't be done. The issue is what to do with different screen widths. Using % instead of px or r/em may be advisible. Do you have a max number of generations? Will you always just have a linear 2 parents per child or will it become … Read More

  • 1
    diafol 3,720   2 Years Ago

    OK, had a play with replacing divs with ul/li: <style> *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { min-width: 1200px; margin: 0; padding: 50px; color: #eee9dc; font: 16px Verdana, sans-serif; background: #2e6ba7; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #wrapper { position: relative; … Read More

0

Well... I can use a little challenge, so I'll see if I can pull it off. My goal is to use no fixed widths or heights. Content should dictate these. Also I might use a nested definition list (dl) for this.

Edited by gentlemedia

0

yes you can use DL.
i might not exact idea what you saying.

0

Did you not think about indenting your markup to make it easy for us?

0

You could do it using inline style, but a fixed CSS may not be exact if the list is dynamic... Javascript would be needed in order to rearrange the display to be exactly what you want.

0

@gentlemedia, @diafol, @Taywin, i think dl is better but i needs to make it horizontally, and i am trying to fix same as image as i showed in attachment horizontally, i am also tring to do it with css.

1

No reason why it can't be done. The issue is what to do with different screen widths.

Using % instead of px or r/em may be advisible. Do you have a max number of generations?
Will you always just have a linear 2 parents per child or will it become more complicated like additional step parent?

You can set the left margin of successive ul li elements easily. You can make elements display block too to ensure their left margins aren't affected by the widths of descendent blocks

0

@diafol yes, it generates max no of iterations horizontally lets i share css and ul li structure that i am using. this html i sets to pdf using dompdf in php. and i also trying to fix width in tree css for html to pdf.
HTML Code:

<div class="tree">
      <ul>
        <li>
          <a>
            SIRE: Cadenza F F58 Barney CA1FF0058
          </a>
          <ul>
            <li>
              <a>
                SIRE: HV International F D3106 HVIFD1306 
              </a>
            </li>
            <li>
              <a>
                DAM: Amani Elizabeth 5UBFA0550
              </a>
              <ul>
                <li>
                  <a>
                    SIRE: Amani Lancelot 5UBFW1008
                  </a>
                </li>
                <li>
                  <a>
                    DAM: Amani F X2073 5UBFX2073
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a>
            DAM: Dudauman Park F F30 DPKFF0030
          </a>
          <ul>
            <li>
              <a>
                SIRE: Dudauman Park Pharoah (ET) DPKFB6009
              </a>
              <ul>
                <li>
                  <a>
                    SIRE: Farmworld War Lord (Imp SAF) (ET) FWBWUL1A
                  </a>
                </li>
                <li>
                  <a>
                    DAM: Terra Cotta Thirty Eight (ET) CJVFU0038
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a>
                DAM: Dudauman Park F D8012 (ET) DPKFD8012
              </a>
              <ul>
                <li>
                  <a>
                    SIRE: Campbell'S Tindarra Stately (ET) CTBFZ4203 
                  </a>
                </li>
                <li>
                  <a>
                    DAM: Dudauman Park F A5014 (ET) DPKFA5014
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

CSS Code:

.tree, .tree ul {
                  padding:0;
                  list-style:none;
                  position:relative;
                }

                .tree ul {
                  position:relative;
                  display:inline-block;
                  vertical-align: top;
                }

                .tree ul ul {margin-left:.5em} 

                .tree ul:before {
                  content:"";
                  display:block;
                  width:0;
                  position:absolute;
                  top:10px;
                  margin-top:0px;
                  bottom:0;
                  left:0;
                  border-left:1px solid;

                }

                .tree li {
                  margin:0;
                  padding:1px 1.4em;
                  /*line-height:3em;*/
                  color:#55250A;
                  position:relative;

                  font: normal normal 10px/16px Helvetica, Arial, sans-serif; 
                }
                .tree li a{
                    color:#55250A;
                    font: normal normal 10px/16px Helvetica, Arial, sans-serif;  
                }

                .tree ul li:before {
                  content:"";
                  display:block;
                  width:8px;
                  height:0;
                  border-top:1px solid;
                  position:absolute;
                  top: 0.80em;
                  left:0;
                }

                .tree ul li:last-child:before {
                  background:white;
                  height:auto;
                  top:1em;
                  bottom:0;
                }
0

Have to agree with @diafol. You have to think of more situations when there is not enough space for a horizontal family tree.

And although a dl is better for semantics, but with the recommended structure of it together with CSS alone, it is not doable to get it the way you want... well as far as I can tell up untill now :)

1

OK, had a play with replacing divs with ul/li:

<style>
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  min-width: 1200px;
  margin: 0;
  padding: 50px;
  color: #eee9dc;
  font: 16px Verdana, sans-serif;
  background: #2e6ba7;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


#wrapper {
  position: relative;
}

#wrapper li{
  list-style: none;
  position: relative;
  min-height: 60px;
}

#wrapper ul{
    padding-left:0;
}

#wrapper ul {
  position: relative;
  margin-left: 250px;
}
#wrapper ul:before {
  content: "";
  width: 50px;
  border-top: 2px solid #eee9dc;
  position: absolute;
  left: -100px;
  top: 50%;
  margin-top: 1px;
}

#wrapper li:before {
  content: "";
  height: 100%;
  border-left: 2px solid #eee9dc;
  position: absolute;
  left: -50px;
}
#wrapper li:after {
  content: "";
  width: 50px;
  border-top: 2px solid #eee9dc;
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: 1px;
}
#wrapper li:first-child:before {
  width: 10px;
  height: 50%;
  top: 50%;
  margin-top: 2px;
  border-radius: 10px 0 0 0;
}
#wrapper li:first-child:after {
  height: 10px;
  border-radius: 10px 0 0 0;
}
#wrapper li:last-child:before {
  width: 10px;
  height: 50%;
  border-radius: 0 0 0 10px;
}
#wrapper li:last-child:after {
  height: 10px;
  border-top: none;
  border-bottom: 2px solid #eee9dc;
  border-radius: 0 0 0 10px;
  margin-top: -9px;
}
#wrapper li.sole:before {
  display: none;
}
#wrapper li.sole:after {
  width: 50px;
  height: 0;
  margin-top: 1px;
  border-radius: 0;
}

#wrapper span {
  display: block;
  min-width: 150px;
  padding: 5px 10px;
  line-height: 20px;
  text-align: center;
  border: 2px solid #eee9dc;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
}
</style>

Markup - apologies for additional <span> tags and .sole class

<div id="wrapper"><span>Root</span>
  <ul>
    <li><span>Entry-1</span>
      <ul>
        <li><span>Entry-1-1</span>
          <ul>
            <li class="sole"><span>Entry-1-1-1</span></li>
          </ul>
        </li>
        <li><span>Entry-1-2</span>
          <ul>
            <li class="sole"><span>Entry-1-2-1</span></li>
          </ul>
        </li>
        <li><span>Entry-1-3</span>
          <ul>
            <li class="sole"><span>Entry-1-3-1</span></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><span>Entry-2</span></li>
    <li><span>Entry-3</span>
      <ul>
        <li><span>Entry-3-1</span></li>
        <li><span>Entry-3-2</span></li>
        <li><span>Entry-3-3</span>
          <ul>
            <li><span>Entry-3-3-1</span></li>
            <li><span>Entry-3-3-2</span>
              <ul>
                <li><span>Entry-3-3-2-1</span></li>
                <li><span>Entry-3-3-2-2</span></li>
              </ul>
            </li>
            <li><span>Entry-3-3-3</span></li>
          </ul>
        </li>
        <li><span>Entry-3-4</span></li>
      </ul>
    </li>
    <li><span>Entry-4</span></li>
    <li><span>Entry-5</span></li>
  </ul>
</div>
Votes + Comments
@diafol: Thank You.
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.