HTML and CSS Reference
In-Depth Information
Moreover, there's no mechanism for positioning the image. So, you need to choose the image carefully or
design it so that it blends well with the text of the list items.
Th e alternative is to suppress the default symbol by setting
list-style-type
to
none
, and to use a
background image. Th is means that no bullet will be displayed if there's a problem with the image or images are
turned off , but it usually produces better results.
h
e styles in list_bg_image.html look like this:
ul {
list-style-type: none;
}
ul li {
padding: 0.35em 0 0.35em 25px;
background-image: url(images/redwine.png);
background-repeat: no-repeat;
background-position: left;
}
Th e styles for the list items add a small amount of padding to the top and bottom, and
25px
on the left.
Th e background image is displayed in the left padding. Only the horizontal value is set for
background-position
,
so the vertical value defaults to
center
. h
is results in the images aligning with the center of the text, as shown in
Figure
10-11
.
Figure 10-11.
Background images can be positioned accurately alongside list items
■
if the list item contains multiple lines, the styles in the preceding example center the image vertically
alongside the whole list item. To ensure the background image is always positioned alongside only the first line of
longer items, you need to specify the vertical position as well.
Caution
Using the list-style Shorthand Property
h e
list-style
shorthand property accepts the same values as the individual
list-style-type
,
list-style-
position
, and
list-style-image
properties. You can dene all three values, separated by a space, or just one or
two. Any value that is omitted uses the initial value listed in Table 10-1. For example, the following style tells the
