Skip to content

Instantly share code, notes, and snippets.

@mitchellrj

mitchellrj/tree.html

Created October 28, 2011 00:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mitchellrj/1321264 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mitchellrj/1321264 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mitchellrj revised this gist Nov 3, 2011. 1 changed file with 98 additions and 18 deletions.
    116 changes: 98 additions & 18 deletions tree.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,16 @@
    <html>
    <head>
    <title>HTML &amp; CSS tree</title>

    <!-- tree -->
    <style type="text/css">
    ul.tree {
    overflow-x: auto;
    white-space: nowrap;
    white-space: nowrap;
    }
    ul.tree,
    ul.tree ul {
    width: 100%;
    width: auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
    @@ -26,6 +28,21 @@
    background-repeat: repeat-x;
    background-position: left top;
    }
    ul.tree li span {
    display: block;
    width: 5em;
    /*
    uncomment to fix levels
    height: 1.5em;
    */
    margin: 0 auto;
    text-align: center;
    white-space: normal;
    letter-spacing: normal;
    }
    </style>
    <!--[if IE gt 8]> IE 9+ and not IE -->
    <style type="text/css">
    ul.tree ul li:last-child {
    background-repeat: no-repeat;
    background-size:50% 1px;
    @@ -39,32 +56,92 @@
    ul.tree ul li:first-child:last-child {
    background: none;
    }
    ul.tree li span {
    display: block;
    width: 5em;
    /*
    uncomment to fix levels
    height: 1.5em;
    */
    margin: 0 auto;
    text-align: center;
    white-space: normal;
    letter-spacing: normal;
    }
    ul.tree ul li span {
    background: url(data:image/gif;base64,R0lGODdhAQABAIABAAAAAP///ywAAAAAAQABAAACAkQBADs=) no-repeat 50% top;
    background-size: 1px 1ex;
    padding-top: 1.2ex;
    background-size: 1px 0.8em;
    padding-top: 1.2em;
    }
    ul.tree ul {
    background: url(data:image/gif;base64,R0lGODdhAQABAIABAAAAAP///ywAAAAAAQABAAACAkQBADs=) no-repeat 50% top;
    background-size: 1px 1ex;
    background-size: 1px 0.8em;
    margin-top: 0.2ex;
    padding-top: 1ex;
    padding-top: 0.8em;
    }
    </style>
    <!-- <[endif]-->
    <!--[if lte IE 8]>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    /* Just to simplify HTML for the moment.
    * This could easily be replaced by inline classes.
    */
    $(function() {
    $('li:first-child').addClass('first');
    $('li:last-child').addClass('last');
    $('li:first-child:last-child').addClass('lone');
    });
    </script>
    <style type="text/css">
    ul.tree ul li {
    background-image: url(pixel.gif);
    }
    ul.tree ul li.first {
    background-image: url(left.gif);
    background-position: center top;
    }
    ul.tree ul li.last {
    background-image: url(right.gif);
    background-position: center top;
    }
    ul.tree ul li.lone {
    background: none;
    }
    ul.tree ul li span {
    background: url(child.gif) no-repeat 50% top;
    padding-top: 14px;
    }
    ul.tree ul {
    background: url(child.gif) no-repeat 50% top;
    margin-top: 0.2ex;
    padding-top: 11px;
    }
    </style>
    <[endif]-->

    <!-- page presentation -->
    <style type="text/css">
    body {
    font-family:sans-serif;
    color: #666;
    text-align: center;
    }
    A, A:visited, A:active {
    color: #c00;
    text-decoration: none;
    }

    A:hover {
    text-decoration: underline;
    }
    ul.tree,
    #wrapper {
    width: 960px;
    margin: 0 auto;
    }
    ul.tree {
    width: 650px;
    }
    .clearer {
    clear: both;
    }
    p {
    margin-top: 2em;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <h1>HTML &amp; CSS tree <small>&mdash; by <a href="http://twitter.com/mitchellrj">@mitchellrj</a></small></h1>
    <ul class="tree">
    <li>
    <span>Root</span>
    @@ -120,5 +197,8 @@
    </li>
    </li>
    </ul>
    <div class="clearer"></div>
    <p><a href="https://gist.github.com/1321264">Gist on github</a></p>
    </div>
    </body>
    </html>
  2. mitchellrj revised this gist Nov 3, 2011. 1 changed file with 6 additions and 5 deletions.
    11 changes: 6 additions & 5 deletions tree.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,6 @@
    ul.tree {
    overflow-x: auto;
    white-space: nowrap;
    letter-spacing: -1ex;
    }
    ul.tree,
    ul.tree ul {
    @@ -15,13 +14,15 @@
    list-style-type: none;
    }
    ul.tree li {
    display: inline-block;
    display: block;
    width: auto;
    float: left;
    vertical-align: top;
    padding: 0;
    margin: 0;
    }
    ul.tree ul li {
    background-image: url(pixel.gif);
    background-image: url(data:image/gif;base64,R0lGODdhAQABAIABAAAAAP///ywAAAAAAQABAAACAkQBADs=);
    background-repeat: repeat-x;
    background-position: left top;
    }
    @@ -51,12 +52,12 @@
    letter-spacing: normal;
    }
    ul.tree ul li span {
    background: url(pixel.gif) no-repeat 50% top;
    background: url(data:image/gif;base64,R0lGODdhAQABAIABAAAAAP///ywAAAAAAQABAAACAkQBADs=) no-repeat 50% top;
    background-size: 1px 1ex;
    padding-top: 1.2ex;
    }
    ul.tree ul {
    background: url(pixel.gif) no-repeat 50% top;
    background: url(data:image/gif;base64,R0lGODdhAQABAIABAAAAAP///ywAAAAAAQABAAACAkQBADs=) no-repeat 50% top;
    background-size: 1px 1ex;
    margin-top: 0.2ex;
    padding-top: 1ex;
  3. mitchellrj created this gist Oct 28, 2011.
    123 changes: 123 additions & 0 deletions tree.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,123 @@
    <html>
    <head>
    <title>HTML &amp; CSS tree</title>
    <style type="text/css">
    ul.tree {
    overflow-x: auto;
    white-space: nowrap;
    letter-spacing: -1ex;
    }
    ul.tree,
    ul.tree ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    ul.tree li {
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0;
    }
    ul.tree ul li {
    background-image: url(pixel.gif);
    background-repeat: repeat-x;
    background-position: left top;
    }
    ul.tree ul li:last-child {
    background-repeat: no-repeat;
    background-size:50% 1px;
    background-position: left top;
    }
    ul.tree ul li:first-child {
    background-repeat: no-repeat;
    background-size: 50% 1px;
    background-position: right top;
    }
    ul.tree ul li:first-child:last-child {
    background: none;
    }
    ul.tree li span {
    display: block;
    width: 5em;
    /*
    uncomment to fix levels
    height: 1.5em;
    */
    margin: 0 auto;
    text-align: center;
    white-space: normal;
    letter-spacing: normal;
    }
    ul.tree ul li span {
    background: url(pixel.gif) no-repeat 50% top;
    background-size: 1px 1ex;
    padding-top: 1.2ex;
    }
    ul.tree ul {
    background: url(pixel.gif) no-repeat 50% top;
    background-size: 1px 1ex;
    margin-top: 0.2ex;
    padding-top: 1ex;
    }
    </style>
    </head>
    <body>
    <ul class="tree">
    <li>
    <span>Root</span>
    <ul>
    <li>
    <span>Uncle</span>
    </li>
    <li>
    <span>Parent</span>
    <ul>
    <li class="origin">
    <span>This</span>
    <ul>
    <li>
    <span>Child</span>
    </li>
    <li>
    <span>Child</span>
    <ul>
    <li>
    <span>Grandchild</span>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    <li>
    <span>Brother</span>
    </li>
    <li>
    <span>Sister with a really long name</span>
    <ul>
    <li>
    <span>Niece</span>
    </li>
    <li>
    <span>Nephew</span>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    <li>
    <span>Aunt</span>
    <ul>
    <li>
    <span>Cousin</span>
    </li>
    <li>
    <span>Cousin</span>
    </li>
    </ul>
    </li>
    </li>
    </ul>
    </body>
    </html>