HTML and CSS Reference
In-Depth Information
Backgrounds as
list-style-image
A nonrepeating, properly positioned background image on a list
item is a common method to give control over precise positioning of
list marker images. The following code will achieve this behavior by
combining the pattern of using padding to make space for a back-
ground image, as shown a few times in Chapter 7, with turning off
the default list marker with
list-style-type:
none
.
ul {
margin-left: 0;
padding-left: 0;
}
li {
margin-left: 0;
padding-left: 20px;
list-style-type: none;
background: url(fancydot.png) no-repeat 4px 4px;
}
list-style
(Shorthand)
The
list-style
shorthand property allows for assigning the indi-
vidual list properties (
list-style-type
,
list-style-position
,
list-style-image
) in the same place.
li { list-style: none; }
The previous code demonstrates a simple method of disabling markers
and shaves a few characters off setting the
list-style-type
property
directly.
