Ordered vs. Unordered Lists
An ordered list, ol, is a list whose items are marked with numbers.
An unordered list, ul, is a list whose items are marked with bullets.
By default, both of these list item styles are plain and simple. But with the help of CSS, you can easily customize them.
To keep the code semantic, lists should be used only for content that is itemized in a list-like fashion. But they can be extended to create multiple columns and navigation menus.
Customizing Unordered Lists
Plain bullets are dull and may not draw enough attention to the content they accompany. You can fix this with a simple yet effective technique: remove the default bullets and apply a background image to each list item.
Here is the CSS for custom bullets:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ul.product_checklist { list-style: none; /*--Takes out the default bullets--*/ margin: 0; padding: 0; } ul.product_checklist li { padding: 5px 5px 5px 25px; /*--Adds padding around each item--*/ margin: 0; background: url(icon_checklist.gif) no-repeat left center; /*--Adds a bullet icon as a background image--*/ } |
Using Unordered Lists for Navigation
Most CSS-based navigation menus are now built as lists. Here is a breakdown of how to turn an ordinary list into a horizontal navigation menu.
HTML: begin with a simple unordered list, with links for each list item.
CSS: we remove the default bullets (as we did when we made custom bullets) by specifying list-style: none. Then, we float each list item to the left so that the navigation menu appears horizontal, flowing from left to right.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
ul#topnav { list-style: none; float: left; width: 960px; margin: 0; padding: 0; background: #f0f0f0; border: 1px solid #ddd; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #ddd; } ul#topnav li a { float: left; display: block; padding: 10px; color: #333; text-decoration: none; } ul#topnav li a:hover { background: #fff; } |
