HTML and CSS Reference
In-Depth Information
Figure 4-40. Unordered lists now appear with a small square marking each item
If you like, the declaration list-style-type: none; will disable the item markers entirely without
affecting the format of the list.
Using an Image As a List Marker
If none of the standard list markers quite satisfies your creative desires, you can provide your own graphic
to use via the list-style-image property, as shown in Listing 4-53.
Listing 4-53. Using the list-style-image property
ul {
list-style-image: url("images/bullet.png");
The property's value is the URL of the file's location, denoted by the url keyword with the URL itself
contained in parentheses—the quotation marks are optional. The URL can be either absolute or relative
(you learned about absolute and relative URLs in Chapter 1). As you see in Figure 4-41, a browser will
load that image file in place of its standard bullet.
Figure 4-41. The image now appears next to each list item.
Images used for list markers should be small and certainly no taller than the text size. Large images might
push your list items apart to make room, as you can see in Figure 4-42.
Figure 4-42. The list items are forced apart by a large image
Search WWH ::

Custom Search