HTML and CSS Reference
In-Depth Information
Chapter 10
Styling Lists and Navigation Menus
HTML provides tags for three different types of lists: unordered (
<ul>
), ordered (
<ol>
), and definition (
<dl>
).
Unordered lists are normally displayed as a series of bullet points; ordered lists are numbered; and definition lists
are presented as a word or phrase followed by its definition, indented on the following line. Figure
10-1
shows
examples of all three (the code is in lists.html in the ch10 folder).
CSS regards the components of definition lists as block-level elements, so it has no special properties to
deal with them. You style definition lists with text properties, padding, margins, borders, and backgrounds as
required. Unordered and ordered lists use the same properties, but CSS provides extra ones to control the bullets
or numbers alongside each list item.
Using these extra properties in combination with the
display
property, it's easy to convert an unordered
list into a navigation menu, as you'll learn how to do later in this chapter. Many designers now regard this as
the preferred way to build navigation for their sites. This isn't simply a design trick. Even without any styling, a
bulleted list is a logical and visually acceptable way of presenting a series of links to other parts of a website.
A series of nested lists provides a structured outline of a website's hierarchy, with the top level indicating the site's
main sections, and the nested lists acting as submenus.
In this chapter, you'll look first at the properties used for styling unordered and ordered lists, and then at
creating a navigation bar. In particular, you'll learn how to
•
Control the type of bullets and numbers used for a list
•
Decide whether the bullet or number is displayed as a hanging indent
•
Replace standard bullets with your own images
•
Embed an encoded image in a style sheet
•
Create a navigation bar from an unordered list
Apart from embedding encoded images, the techniques in this chapter are supported by all browsers in
widespread use, including IE 6.
