How can one create horizontal tree view using CSS and HTML?


Tags: javascript,html,css,html5

Problem :

thanks for your interest, first I believe image is worth thousand word, so here you go This is kind of what I am trying to achieve

Unfortunately I am not in possession of mouse right now, so its drawn using IBM TrackPoint, but the main idea should be clear. I called it horizontal tree because usually tree view is vertical, you would only see one directory on one line and on the left hand side of the directory name would be just vertical lines showing how deeply nested this directory is. I am trying to have "directories" listed next to each other.

Think of it as of algorithm diagram with IFs and ENDIFs and they will always have exactly two outputs or inputs.

Now, I am trying to construct this with basic HTML elements and CSS and I thought at first that it will be piece of cake but it isn't, I spent whole afternoon on it with no luck. It will be generated by JS dynamically so I am trying to avoid tables. There could me any number of IFs, there will be exactly same amount of ENDIFs. There will be any number of other basic cells. The whole structure starts with one cell and ends with one cell

Here is html that should generate similiar picture:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFs and ENDIFs</title>
<style>
ul, li, div{
    margin: 0px;
    padding: 0px;
    border: 0px;
    }
ul.left{
    border: 1px solid red;
    margin: 2px;
    padding: 2px;
    list-style-type:none;
    width: 150px;
    float:left;
    }
ul.right{
    border: 1px solid green;
    margin: 2px;
    padding: 2px;
    list-style-type:none;
    width: 150px;
    float:left;
    }

}
li.parent{
    border: 1px solid blue;
    background-color:#CC9;
    margin: 2px;
    padding: 2px;
    min-width: 350px;
    display:block;
    overflow-style:marquee-block;
    }
</style>
</head>
<body>
<div id="root">
    <ul>
        <li class="parent">
            <div class="label">1</div>
            <ul class="left">
                <li>    
                    <div class="label">1.L1</div>
                </li>
                <li>
                    <div class="label">1.L2</div>
                </li>
                <li class="parent">
                    <div class="label">1.L3</div>
                    <ul class="left">
                        <li>    
                            <div class="label">1.L3.L1</div>
                        </li>
                    </ul>
                    <ul class="right">
                        <li>    
                            <div class="label">1.L3.R1</div>
                        </li>
                        <li>
                            <div class="label">1.L3.R2</div>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="right">
                <li>
                    <div class="label">1.R1</div>
                </li>
                <li>
                    <div class="label">1.R2</div>
                </li>
                <li class="parent">
                    <div class="label">1.R3</div>
                    <ul class="left">
                        <li>    
                            <div class="label">1.R3.L1</div>
                        </li>
                        <li>
                            <div class="label">1.R3.L2</div>
                        </li>
                        <li>
                            <div class="label">1.R3.L3</div>
                        </li>
                        <li>
                            <div class="label">1.R3.L4</div>
                        </li>
                    </ul>
                    <ul class="right">
                        <li>    
                            <div class="label">1.R3.R1</div>
                        </li>
                        <li>
                            <div class="label">1.R3.R2</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <div class="label">2</div>
        </li>
        <li>
            <div class="label">3</div>
        </li>
    </ul>
</div>
</body>
</html>

Here is what it looks like so far :( (nothing near the result i hope for, also this is probably 7th iteration of me trying to figure this out) So if anyone could point me in the right direction I would really appreciate it. enter image description here



Solution :

HTML a linear data structure, but your graph you are trying to recreate isn't linear. While it is possible, it's not necessarily trivial.

You should avoid using float, because nested floats are a bit difficult to control. inline-block is probably a better solution here, however support is flaky in older browsers.

Have a look at an example I made, maybe you can build on that: http://jsfiddle.net/uf5uM/


    CSS Howto..

    How to double an image size in HTML using only CSS?

    Hide all div element but show first two

    How to fade out after hover is done using CSS

    How to combine two images into one so I can vertically align across all browsers?

    How to get rid of scroll bars/arrows in Wordpress, when using font style called 'Pre'

    how to apply css to a specific element of a table?

    Animated HTML,CSS JavaScript. How can I implement this [closed]

    How can I resize images that are loaded onto a page?

    how to create two divs shapes to overlay each other

    How to style a UL/LI drop down

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How to encapsulate CSS, especially for popups and no iframe involved?

    How to jump to specific sections of a sprite sheet in css?

    CSS: Background in front of image - how to prevent it?

    How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

    how to change the CSS background-image of a class-pseudoelement by Javascript only?

    How to trigger onClick event properly

    How to design a web page with multiple color panes without tables [duplicate]

    How to set top div height to the remaining height css

    How do you make this dogeared shape with css only

    CSS how to target element beside my current element?

    How to correctly switch images with javascript?

    How to remove mystery indents in a form?

    How to import css file for into Component .jsx file

    How can I centre an unordered list of floated items to the page

    How do I edit an external css file with PHP?

    How to Rotate Text and have it's Parent Div act Dynamically

    How does one style element within a label say?

    How to set border around Twitter Bootstrap Icon?

    How to select a div with nth-child()?