Hierarchy display in CSS

Question

I'm having trouble coming up with CSS for a hierarchical display, like a tree of files and folders. I use nested unordered lists:

<ul>
  <li>animals<ul>
    <li>dogs</li>
    <li>cats</li>
  </ul></li>
</ul>

They display nicely with the proper CSS minus the connecting lines. I need the lines to connect. I do this with the following CSS:

ul ul li:before {
  content: "";
  padding: 15px;
  border: 1px solid #000;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 10px;
  position: absolute;
  left: -22px;
  top: -15px;
}

Problem is the lines overlap the icons for the animals, dogs and cats. I tried changing z-index's to no effect. Is there a better way to achieve this with CSS? Or is there another way to get the z-index making sense?

Vannie

z-index only works on elements that are position relative, absolute, or fixed. Make sure the thing you don't want to overlap is also relative or absolutely positioned. Also what do you mean by 'the lines to connect'. I also do not see any icons in your code. – Jude

@Jude - I'll check the position attribute. Didn't include the CSS for the icons to simplify things, but they are background-image's to the li elements. Just checked, the li element and the :before element have positions of relative and absolute, respectively, but z-index still did not work. – Vannie

Answer 1

jsFiddle Demo

There's a great dated online tutorial that does exactly what your looking for.

It used images to create unique bullets but in your case you can use pipe (i.e., | ) symbol and specify a larger font-size with desired color.

Screenshot:

EDIT:

Here is an extra jsFiddle duplicating your curved connecting lines.

jsFiddle Demo 2

EDIT 2:

Here is a final revised jsFiddle revision that adds an escaped space to have better viewability while maintaining your curvy connections.

jsFiddle Demo 3 and 3b

EDIT 3: This particular blank space variety is an option to use for content property in the demo above:

Entity  Name Symbol/Description
      en space

To be sure, the special blank space is the middle of the 3 blank spaced under Symbol. Using that requires no use of alternate character plus transparency to simulate blank space. Dropping transparency property means IE8 is happy. Just in case, the empty line below contains 1 single special blank space character. Copy to the clipboard to use, as Entity and Name do not work:
 

EDIT 4: Alternate for Edit 3 is to check out SO Answers provided for Adding HTML entities using CSS content.

Crescen

Answer 2

Check out this example. You could easily replace the salmon colored box with images:

HTML

<div>
    <h3>Root</h3>
    <ul>        
      <li>Folder 1
        <ul>
            <li>Folder 2
                <ul>
                    <li>file1.xml</li>
                    <li>file2.xml</li>
                    <li>file3.xml</li>
                </ul>
            </li>
            <li>file.html</li>
          </ul>
      </li>
      <li>file.psd</li>
      <li>file.cpp</li>
    </ul>
</div>

CSS

body {
    margin: 20px;
    line-height: 3;
    font-family: sans-serif;

}

div {
    position: relative;
}

ul {
    text-indent: .5em;
    border-left: .25em solid gray;
}

ul ul {
    margin-top: -1.25em;
    margin-left: 1em;

}

li {
    position: relative;
    bottom: -1.25em;
}

li:before {
    content: "";
    display: inline-block;
    width: 2em;
    height: 0;
    position: relative;
    left: -.75em;
    border-top: .25em solid gray;
}

ul ul:before, h3:before, li:after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    background: salmon;
    border: .25em solid white;
    top: 1em;
    left: .4em;
}

h3 {
    position: absolute;
    top: -1em;
    left: 1.75em;
}

h3:before {
    left: -2.25em;
    top: .5em;
}

Demo

Jude

Very nice, what I was looking for. There were certain situations that would cause the lines to stray, I forget which they were... I think if there was a folder followed by a file in a directory? I would've given you the credit, but the winner of this question gave me a nice clue to solve all situations. – Vannie

I really liked this example, but bootstrap was ruining it for me. So I created one that's bootstrap compatible, just requires a class in the div: jsfiddle.net/JEPtg/621 – Jeremiahjeremias

Answer 3

If you want a simplistic example, here we go:

HTML

<ul>
  <li>animals
   <ul>
    <li>dogs</li>
    <li>cats</li>
  </ul></li>
</ul>​

CSS

li {
  border-left: 1px solid #000;
  margin-left: 10px;
  margin-top: 5px;
  padding-left: 10px;
}​

See jsFiddle result

Smoulder

Answer 4

TreeView or hierarchical data are typically gathered dynamically; my data are created via php on the server-side from database or eg. filesystem, and I needed something more structured, which gives me a chance to handle them via javascript on the client-side.

For me, a table, with colspan for variable indent worked. To systematically handle similar cells in the same way (class attribute), I used to write out same count of TD on every TR, but made the unused ones display:none - which gives the same index for a kind of nth-child(..) formatting.

Missing are for example item-IDs per TR to link to the database for handling, and of course all of javascript.

The colors here in the example are used to easily find placing errors during testing.

screenshot FireFox Mint 104

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="webdev (at) kgsw (dot) de">
<meta name="description" content="2022-09-01/kg: Example hierarchical view (tree view)">
<meta name="keywords" content="html, html5, css, tree view, table">
<style>

body {
  font-family: sans-serif;
}

table { 
  border-collapse:collapse; 
  cursor:default; }

td,th { 
  font-size:12px;
  border:1px solid lightblue; /* transparent; */
  line-height: normal;
  padding: 0;
}

td { display:none; }
td.symbol, td.line, td.indent { display:table-cell; }

td.line { color:blue; }
td.symbol { color:green; }
td.indent { color:grey;font-size:8px; }

td:nth-child(12) { display:table-cell; width:70%; }  /* items */
td:nth-child(13) { display:table-cell; min-width:80px; } /* remarks */

td:hover { background-color:#dec; }
td.line:hover { background-color:transparent; }
td.symbol:hover { color:red; }

</style></head><body>

<table>

<tr>
  <td class="indent"> #</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="11"> <small>ROOT</small></td><td> :remarks</td>

</tr><tr>
  <td class="indent"> 1</td><td class="line">&#9500; </td><td class="symbol">&#9634;</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="9"> Item1</td><td> </td>

</tr><tr>
  <td class="indent"> 2</td><td class="line">&#9474; </td><td class="line">&#9500; </td><td class="symbol">&#9634; </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="8"> Item1.1</td><td> </td>

</tr><tr>
  <td class="indent"> 3</td><td class="line">&#9474; </td><td class="line">&#9492; </td><td class="symbol">&#9634; </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="8"> Item1.2</td><td> </td>

</tr><tr>
  <td class="indent"> 4</td><td class="line">&#9500; </td><td class="symbol">&#9634;</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="9"> Item2</td><td> </td>

</tr><tr>
  <td class="indent"> 5</td><td class="line">&#9500; </td><td class="symbol">&#9634;</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="9"> Item3</td><td> </td>

</tr><tr>
  <td class="indent"> 6</td><td class="line">&#9492; </td><td class="symbol">&#9634;</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="9"> Item4</td><td> </td>

</tr><tr>
</tr>
</table>

<hr>

<cite><p>changing generell class (display) to 'skip' and signing only used TDs to 'table-cell'</p>
</cite>

</body></html>

Endomorphism