Site Map: Multiple Column Lists

From PikaDocs

By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)

The default vertical layout for the list of cross links on the Site Map page is created using a table with a single row (TR), single column data (TD) container, and various unordered lists and sublists (UL) with list items (LI). The list is comprehensive and indispensible but also lengthy: 10+ categories with 40+ links to pretty much anything you would ever need to locate within your Pika installation. But to view all the links, users even with a 1024x768 monitor display would need to scroll down the page to reach the end of the vertical list.

To make wider use of the viewport, there is an easy way to make changes to the XHTML structural markup and corresponding CSS styles to change how the Site Map page links display, i.e., as "multiple column lists" akin to this three-column format:

There are excellent tutorials available explaining various ways of displaying list items in multiple columns. Among the best is John Gallant and Holly Bergevin's Do You Want To Do That With CSS? - Multiple Column Lists (http://www.communitymx.com/content/article.cfm?cid=27F87&print=true). However, some of the techniques described in that article falter when used in dynamically generated pages, like the Site Map page. But there is a more simple, practical way to create a three-column version of the Site Map page that works reliably in both IE and Mozilla.

Redoing the Structural Markup

The changes involve only two files: the contents_form.html that is the source of the Site Map page "content," i.e., the list of links themselves; and the danio.css file, the source of the Pika CSS styles affecting the layout and positioning of the list items. We'll start with changes to the contents_form.html file. The changes to the markup involve four easy steps:

1. Remove the TABLE: Keeping the SCRIPT tags at the top of the page absolutely untouched, strip out all the TABLE tags, leaving the array of unordered list items ... UL, LI, etc. ... intact.
2. Re-align the "Home Screen" LIST ITEM: By default the Site Map page treats all the list items as "children" of the Home Screen list item. While logical (and true: "There is no place like home"), doing so hogs a huge piece of left-margin real estate you will want to grab back to do a three-column layout. To change this in the markup, make the Home Screen LI co-equal with the list items that immediately follow it. (See the illustration, below.)
3. Decide which LIST ITEMS go in which column and enclose each set within its own UL: In this example, we assign the list items from "Home Screen" to "Intake List" to the first column; from "Reports" to "System Screens" to the second column; and the remaining list items to the third column. Once you've made that choice, make each of the three groups of list items its own unordered list by enclosing it in UL tags. (Again, illustrated below.)
4. Enclose each of the three unordered lists in its own DIV: The structural goal here is to make each unordered list -- each to be its own column -- a block-level element you can "float" using CSS code. To accomplish this, enclose each of the three unordered lists with its own DIV and assign all three DIV tags the same class name: "listcolumn".

Not to worry! A copy of the contents_form.html page modified with these markup changes is available for download (http://www.openpika.org/uploads/multi_col_contents_form.html). Once done, the new markup at its simplest should look something like this (for simplicity of illustration, the script code and anchor tags have been removed:

<script> ... </script>

<h2>Site Map</h2>

<!-- Begin first column -->

<div class="listcolumn">
    <ul>
    <li>Home Screen</li>
    <li>Calendar
        <ul>
        <li>Day View</li>
        <li>Week View</li>
        <li>Four Week View</li>
        <li>Advanced View</li>
        <li>New Calendar Entry</li>
        <li>New Tickle</li>
        </ul></li>
    <li>Case List
        <ul>
        <li>My Pending Cases</li>
        <li>My Closed Cases</li>
        <li>New Client Intake</li>
        <li>New Eligibility Intake</li>
        </ul></li>
    <li>Contact Address Book</li>
    <li>Document Search</li>
    <li>Intakes List</li>
    </ul>
</div>

<!-- Begin second column -->

<div class="listcolumn">
    <ul>
    <li>Reports
        %%[reportlist]%%</li>
    <li>Site Map</li>
    <li>System Screens
       <ul>
        <li>User Accounts</li>
        <li>Pro Bono Attorneys</li>
        <li>Message Board</li>
        <li>System Settings</li>
        <li>Security Levels</li>
        <li>Menus and Special Tables</li>
        <li>Reset Counters</li>
        <li>Scan for New Fields</li>
        </ul></li>
    </ul>
</div>

<!-- Begin third column -->

<div class="listcolumn">
    <ul>
    <li>Time Keeping
        <ul>
        <li>New Time Slip</li>
        <li>New Timer</li>
        <li>New LSC Other Matters Record</li>
        </ul></li>
    <li>User Account
        <ul>
        <li>Account Preferences</li>
        <li>Change Account Password</li>
        </ul></li>
    <li>Misc.
        <ul>
        <li>About Pika</li>
        <li>PHP Configuration</li>
        <li>Pika Software License</li>
        <li>Trigger the Pika Error Screen</li>
        </ul></li>
    </ul>
</div>

With the new "no-tables" structural markup ... but without yet adding any new styles ... the Site Map page displays pretty much like it did before, the only differences being that the Home Screen link is now co-equal with the links below it; the other list and sublist items are now closer to the left margin because they are no longer "children" of the Home Screen list item; and there is a vertical separation between each of the three unordered lists. Here's a real-world screenshot from the OpenPika (http://www.openpika.org/) laboratory test site:

Adding the new CSS styles

The "hard" work is done. The next step is to add CSS styles that will reposition the list items to appear in multiple columns that are horizontally parallel to each other. To do so, all you need to do is add the .listcolumn class to the danio.css file and assign it two simple values: one to enable the individual "listcolumn" DIVs to float horizontally; and another to set a width that creates enough horizontal space to accommodate all three DIVs across the page, in parallel to each other:

.listcolumn {
    float: left;
    width: 250px;
    }

It's that simple. (If you're partial to "em" values, substitute "width:19.2em" and you'll get a comparable result.) Viewed in Mozilla, here's what the new three-column Site Map page looks like:

Viewed in Internet Explorer, you may notice the margin at the top of the columns is narrower than in the Mozilla display. To correct for this, set an IE-specific declaration for "margin-top," but use the famed star html (http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html) hack to assure it doesn't affect Mozilla or other browsers. Here's the final CSS code, including the IE hack:

/* Site Map ~ three-column list */

.listcolumn {
    float: left;
    width: 250px; /*19.2em;*/ 
    }

/* IE hack */
* html .listcolumn {margin-top: 15px;}

With this additional CSS change, the Site Map page presents a virtually identical display in IE:

Since the .listcolumn class is defined relative to the DIV tags that contain the three unordered lists, you can easily reposition individual list items by simply moving them within the markup to whichever "column" you want them in, without the need to make other changes in the markup or the CSS styles. Also, with these changes the relative relationship of the three columns maintains itself, without breaking the page display, even should you resize the text using that function from within the browser.

Of course, you could go farther with this: Selectively reposition list items for a different balance in the look of the page; create two or four columns by making comparable changes in the markup; tweak the .listcolumn class by changing the width values to accommodate fewer or more columns, or simply narrower or wider columns; add additional values for line-height to loosen the vertical space between the list items; and so on.

Again, you can download here (http://www.openpika.org/uploads/multi_col_contents_form.html) a copy of the contents_form.html page modified with these markup changes.

---

Related articles:

• Concordance: Site Map
• Screenshot: Site Map
• Site Map: Deconstruct