Hour 14: Lists
Not all information is organized into paragraphs of text. Many types of Web content are actually lists of information, including navigation menus, product feature lists, glossaries, and step-by-step instructions. Because of the way information is read on the Web, the use of lists can be one of the most effective and direct methods of conveying information to an audience. Styling lists well can also enhance their usefulness.
In this hour, you'll learn
- How lists are formatted in CSS
- What the different types of lists are, and how they're coded in HTML
- How other elements can be displayed as lists
- Which CSS properties change the shape and appearance of bullets
- How to set the counting methods of numbered lists
Sample Code
You can download the sample code from each hour as one package or individual files.
- Download all [2.5K tar.gz file]
- Listing 14.1 [HTML]
- Listing 14.2 [CSS]
- Listing 14.1 with style sheet 14.2 [HTML]
- Listing 14.3 [CSS]
- Listing 14.1 with style sheet 14.3 [HTML]
- Green "plus" icon [GIF format]
- Red "plus" icon [GIF format]
- Listing 14.4 [CSS]
- Listing 14.1 with style sheet 14.4 [HTML]
- Workaround example for Netscape 4 [HTML]
- Advanced CSS stylesheet for workaround example [CSS]
- Listing 14.5 [CSS]
- Listing 14.1 with style sheet 14.5 [HTML]
Web Links
This hour has no associated Web links.
Updates and Errata
The text talks of creating a red plus symbol, but then uses greenplus.gif as the file name. Obviously this is wrong -- an earlier draft used red but was changed to green, and I missed the reference to red during the editing stage. Both versions of the icon are linked above.