1 Be careful of multi-line list items.

Some of these methods will get very messy if the text of some of the list items is long enough to wrap lines. Just something to lookout for before committing to a method.

posted at 02:20 am on September 27, 2005 by Christian Metts

2 Split Lists

I posted about this problem a while ago on my website. It may be relevant to study the comments I got when I asked how to do a split list suitable for Netscape 4:

http://www.designdetector.com/archives/04/02/AQuestionOfHTMLPart2-SplitLists.php

posted at 03:45 am on September 27, 2005 by Chris Hester

3 Whitespace

Rather than eliminating all whitespace inside a list element I prefer to just set the <li> tag to display: inline;

This may not be suitable in all instances (if you just want a plain list say). However as this list is to be styled further with floats and possibly other display settings (on the links in each li for example) I think it is a more elegant solution.

posted at 04:53 am on September 27, 2005 by David Elstob

4 Having your cake and eating it, too...

Could we not maintain semantic integrity, simple CSS, AND get our nice, beautiful, multi-column layout by using Javascript to convert lists into a multi-column variant?

In this way, everything degrades to a simple list; but for virtually all users, you get your multi-column list with none of the caveats mentioned.

posted at 07:42 am on September 27, 2005 by Jason LaPorte

5 Unique Classes

It seems a little funny to use a class to uniquely identify an item.

Classes tag an item as being part of a group. If the aim is to uniquely identify something on a page, then assigning an ID to the item is probably a better route to go.

posted at 08:25 am on September 27, 2005 by Drew McLellan

7 Hmm

Boy, is that ever hairy markup… and absolutely positioning everything?

I’d rather use multiple lists than have to break DRY like this. I mean, what a disaster when you have to add a nav item in your markup and then track down and fiddle with all these numbers in your stylesheet.

After all, as stated in the article, it’s like three lines of PHP and an associative array to have complete control. Alternatively, if the markup is sacred, have a tiny server-generated stylesheet that auto-calculates the menu item positions.

posted at 08:43 am on September 27, 2005 by Mike Purvis

10 Generating Lists with PHP

Method 4 would be the useful when you are generating content using sever side scripting (i.e. PHP), you could have a simple little function that takes a list (i.e. from an array) and splits it into N numbers of columns by assigning class=”columnN” and class=”columnN reset” through a for loop. This removes the need to ‘tweak’ the source each time there’s an item added or removed from the list.

Only useful for generated content, and probably only in certain situations at that, but once implemented it looks after itself, as long as you can live with presentation vs semantics use of CSS class names.

Interesting article Paul, thanks for the different ideas.

posted at 09:07 am on September 27, 2005 by Chris Batchelor