Best way of displaying / styling hierarchical data

HTML & CSS
1

Heya guys

I have a composite list of categories that can have 1->N child categories. Each category can have 1->N products. I need to display this in a manner that displays each category in the hierachy along with all the products within that category.

So far i have this as nested unordered list, which is fine, but now i need to add edit and delete links for each category and product, which i usually display as a table with columns for action links (add/edit/delete etc). This could be added to the side of each category or product but due to the indentation (which is needed to visualise parent/child relations) looks a bit messy.

So i’m wondering on the best way of displaying and styling a hierarchical set of data which is practical and neat looking as well as clear of the relationship between parent/child/product items.

2

The way I’d do that is float the links to the right - that way all of the links would be aligned.

You can then adjust their relative position by adjusting the list width.

3

As Jake said you could float them right.:slight_smile:

Something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h2{margin:0 0 1em}
ul {
    margin:0;
    padding:0;
    list-style:none;
    line-height:1.2;
}
ul {width:25em;clear:both;}
li{
    clear:both;
    float:left;
    width:100&#37;;
    margin:0 0 .5em;
}
ul ul {
    padding:0;
    margin:0 0 0 2em;
    width:auto;
}
p {margin:0 8em 0 0;}
p.edit {
    float:right;
    margin:0;
}
</style>
</head>
<body>
<ul>
    <li>
        <h2>Category 1</h2>
        <ul>
            <li>
                <p class="edit"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Delete</a></p>
                <p>Category item Goes here</p>
            </li>
            <li>
                <p class="edit"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Delete</a></p>
                <p>Category item Goes here : Category item Goes here : Category item Goes here : </p>
            </li>
            <li>
                <p class="edit"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Delete</a></p>
                <p>Category item Goes here</p>
            </li>
            <li>
                <p class="edit"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Delete</a></p>
                <p>Category item Goes here</p>
            </li>
            <li>
                <p class="edit"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Delete</a></p>
                <p>Category item Goes here</p>
            </li>
        </ul>
    </li>
    <li>
        <h2>Category 1</h2>
        <ul>
            <li>
                <p class="edit"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Delete</a></p>
                <p>Category item Goes here</p>
            </li>
            <li>
                <p class="edit"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Delete</a></p>
                <p>Category item Goes here : Category item Goes here : Category item Goes here : </p>
            </li>
            <li>
                <p class="edit"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Delete</a></p>
                <p>Category item Goes here</p>
            </li>
            <li>
                <p class="edit"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Delete</a></p>
                <p>Category item Goes here</p>
            </li>
            <li>
                <p class="edit"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Delete</a></p>
                <p>Category item Goes here</p>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>