| You're not limited to the preset bullet styles built into the browser (see the previous section, "Setting the Bullet Style"). You can also use your own graphics as bullets, in GIF, JPEG, and PNG formats, with the list-style-image property (Table 10.7). Table 10.7. List-Style-Image ValuesVALUE | COMPATIBILITY |
|---|
<url> | IE4, FF1, S1, O3.5, CSS1 | none | IE4, FF1, S1, O3.5, CSS1 | inherit | FF1, S1, O4, CSS1 |
In this example (Figure 10.6), I've created a small arrow graphic (Figure 10.7) to be inserted as the bullet in front of the navigation links. Figure 10.6. Rather than a boring old system bullet, I added this spiffy looking arrow that fades into the white background.
Figure 10.7. The image file arrow_02.png. To define your own graphic bullet: | | 1. | list-style-image: Type the list-style-image property name, followed by a colon (Code 10.5). Code 10.5. The list-style-image property allows you to specify the URL for an image file to use as the bullet in your list.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Creating Your Own Bullet</title> <style type="text/css" media="screen"> h1, h2 { color: #999; margin: .5em 0em; } h2 { clear: both; } li { list-style-image: url(arrow_02.png); list-style-type: square; } #navigation { width: 200px; margin: 0px 8px 8px 0px; border: 3px solid #ccc; float: left; font: small Arial, Helvetica, sans-serif; } #navigation a { padding: 2px 4px; text-decoration: none; display: block; color: red; } #navigation a { text-decoration: none; color: red; } #navigation p { margin: 8px; font-weight: bold; } .author { margin-top: 0cm; font: bold 1em Arial, Helvetica, sans-serif } .chapterTitle { display: block; font-size: smaller; color:black; } .dropBox { width: 228px; padding: 6px; border: 3px solid #999; margin: 0px 0px 8px 8px; float: right; font: small Arial, Helvetica, sans-serif; } </style> </head> <body> <div > <p>Flip To Chapter</p> <ol> <li><a href="#">A Mad Tea-Party</a></li> <li><a href="#">The Queen's Croquet-Ground</a></li> <li><a href="#">The Mock Turtle's Story</a></li> <li><a href="#">The Lobster Quadrille</a></li> <li><a href="#">Who Stole The Tarts? </a></li> <li><a href="#">Alice's Evidence</a></li> </ol> <a href="#">← Previous </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER IX <span > The Mock Turtle's Story </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice34a.gif" height="258" width="220" alt="Alice" />So they went up to the Mock Turtle, who looked at them with large eyes full of tears, but said nothing.</div> <p>'You can't think how glad I am to see you again, you dear old thing!'...</p> </div> </body></html> |
| 2. | url(arrow_02.png); To include your own bullet, you have to tell the browser where your bullet graphic file is located. Type either the complete Web address or the local file name of the image. In this example, arrow_02.png is a local file. Alternatively, type none, which instructs the browser to override any inherited bullet images. |
Tips Graphic bullets are a great way to enhance the appearance of your page while minimizing download time. Keep in mind that the text being bulleted has to make space for the graphic you use. A taller graphic will force more space between individual bulleted items, and a wider graphic will force bulleted items farther to the right. As with the example in the previous section, we could change the graphic bullet to another graphic using the :hover pseudo-class. However, you will want to keep the two images the same size to avoid your design from jumping around unattractively.
|