Getting exotic with the list-style-image property ..........................
If you want to use a different graphic as a bullet — something more exciting
or exotic than the supplied disc, circle, or square — use the list-style-
imageproperty, as illustrated in Figure 12-2.
<html>
<head>
<style>
li {list-style-image: url(“shadow.jpg”);}
body {font-size: large;}
</style>
</head>
<body>
<ul>
<li>onezee
<li>doozee
<li>thrice
</ul>
</body>
</html>
If, as you can see in Figure 12-3, the graphics don’t align in the middle of the
text characters, it’s not your fault. The text is forced to align with the bottom
of a list-style-image.
Figure 12-2:
You can
easily
substitute
your own
custom
buttons,
rather than
merely
relying on
the built-
in discs,
circles, or
squares.
210 Part III: Adding Artistry: Design and Composition with CSS
