<!-- CSS Articles

CSS Lists: Part 1

Lists have been used as an active navigational element for a while now, by using CSS to style them in a fashion that makes them recognizable as part of the page's navigation. They weren't originally intended for this, however. The more you look back at HTML specifications, the more it's obvious that their purpose was as a visual, documentational aid. Indeed, those of you who are veterans to the web will remember the very old pages characterized by the left-aligned black text on a white background, the ubiquitous Times New Roman font, the very long pages with many anchors, and the black circle bulletpoint lists. Actually, the HTML part didn't change much since those times as far as lists are concerned, apart from the class attribute.

We'll start with just such a list:

• List Item 1
• List Item 2
• List Item 3

The HTML used for it is:


I opted not to style the list ul or il elements themselves, but rather encase the list in a DIV so that we'll be able to address the different elements within it in a simple manner. This isn't really necessary -- you can often achieve exactly what you need by styling the ul element and addressing the elements under it, instead. Remember though, that the element that you wrap the list around needs to be a DIV, rather than a SPAN, since strict XHTML won't validate an Inline element having a Block child (you could, of course, add display: block; to its class, by why go that far when DIV is ready and waiting to serve?). Since I'm going to be referring to elements of the Box Model frequentry throughout this document, you may want to check out the Box Model article to get better acquainted with how CSS tells the browser to draw elements onto the display device.

We'll start by taking the reigns and assigning values to several well-known properties:


The first thing we do is eliminate the padding and margin to the left of the text. We may want to recover that later, but for now we're simplifying the list. We also remove the bulletpoints completely by assigning none to the list-style-type property. Lastly, we assign font and line-height properties. You may be wondering why bother with line-height? This is a technicality that you'll be able to experiment with later -- If you just set a font size, sometimes the list il items will distance themselves from each other in Internet Explorer, creating what looks like a margin, even if you specify the li's margin property to 0. There is a similar problem with horizonal lists, however the solution to that problem is different. The problem often shows itself when the line-height is too small compared to the font size, though your best bet is to simply check your design in Internet Explorer and see how it renders. Also keep in mind that while the UL element is a Block element, the LI element is of type list-item, which means that the line-height property governs its height, rather than the height property. In fact, if you were to replace the line-height property with the height property of the same value, you'll get some amusing results, which will vary from one browser to another.

Here's what our list looks like now:
The list has been simplified to simply lines at this point, though of course lists have inherent properties that mere HTML lines do not. Before we keep adding properties to the list, let's first turn the list items into links. We do this as easily as it sounds, by encasing them in a elements:


Now that we have links on our list, we should style them as well:


Before going over the changes, let's view them first:

Suddenly it no longer looks like a "documentation aid" anymore... All that's changed is that the items were made into links, and the links were styled the same way you would normally use CSS to style any other link. Actually that's not entirely accurate: a very important property has been added - display: block;. This transformed the a elements from Inline elements into into Block elements, similar to how DIVs and Ps are. The block takes up whatever space it can, horizontally, within the il area. This way, the structure of the list is taken advantage of, and you can add borders and padding that apply to all of the links in the same manner. This is also helpful when designing mouse-over effects, of course, since the cursor will be detected all over the link area, not just the text portion.

Notice that the only elements that were specified a width were the a elements. In other words, at the very least, the encasing DIV is taking up all the horizontal space that it can. Normally, when encasing a list with a DIV, you would need to specify a width for the a elements, and for the DIV itself. You can't leave the width of the a elements empty, or the il elements will react badly in different manners depending on the browser. You also shouldn't set the a width to 100%, since this will conjure its own set of problems, even if you've set the DIV's width to a specific amount of pixels. This may seem troublesome, but there's really nothing preventing you from setting both width properties to the same pixel value, which is the recommended route.

Let's not write off the list markers just yet. Remember that it's always nice to get more graphical value out of less code, when possible (and when appropriate!). We'll make three changes to the CSS:


The list-style-type property value was changed to upper-roman, the margin-left was set to 2em, and color: #369; was added, all to the .list_container ul selector. Here's what we get after applying the changes: The margin-left had to be increased, since the list markers would otherwise appear outside of the list's area, to the left (in fact, the list itself is no longer 200 pixels wide, only the a elements are). The list-style-type property value was changed to upper-roman (check the list-style-type CSS property reference for more options), and the markers themselves were colored using the color set to the UL element. Note that this will allow the background behind the list to show through if you don't set a background-color (or a background-image) value to the .list_container class.

We've covered some basic uses of HTML lists as navigational elements. You can see this is no rocket science, and is very easy to manipulate and scale. In CSS Lists: Part 2, we'll get into more complex lists, and more subtle property usage.