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
Search WWH ::

Custom Search