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

Custom Search