SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    best way of displaying / styling hierarchical data

    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. #2
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    As Jake said you could float them right.

    Something like this:

    Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •