| The list-style-type property (Table 10.5) gives you control over the type of bullet to be used for list itemsnot just circles, discs, and squares, but also letters and numerals and dots. Oh, my! Table 10.5. List-Style-Type ValuesVALUE | COMPATIBILITY |
|---|
<bullet name> | IE4, FF1, S1, O3.5, CSS1 | none | IE4, FF1, S1, O3.5, CSS1 | inherit | FF1, S1, O7, CSS1 | * See Table 10.6 | |
In this example (Figure 10.5), I have added circle bullets in front of each chapter title link in the navigation. In addition, I've set the bullet to change to a solid disc when the user hovers over one of the links. Figure 10.5. In the chapter list, each item has a circle bullet. The chapter that the cursor is hovering over, though, has a solid disc.
To define the bullet style: | | 1. | list-style-type: Type the list-style-type property name, followed by a colon (Code 10.4). Code 10.4. The list-style-type property is used to choose between the different bullet and number styles for 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 | Setting the Bullet Style</title> <style type="text/css" media="screen"> h1, h2 { color: #999; margin: .5em 0em; } h2 { clear: both; } li { list-style-type: circle; margin-left: -10px; } li:hover { list-style-type: disc; } #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!' said the Duchess, as she tucked her arm affectionately into Alice's, and they walked off together.</p> </div> </body></html> |
| 2. | circle; Type one of the bullet names listed in Table 10.6, or type none if you want no marker to appear. |
Table 10.6. List-Style BulletsNAME | APPEARANCE (VARIES DEPENDING ON SYSTEM) |
|---|
disc | • | circle | ° | square |
| decimal | 1, 2, 3 | decimal-leading-zero | 01, 02, 03 | upper-roman | I, II, III | lower-roman | i, ii, iii | upper-alpha | A, B, C | lower-alpha | a, b, c | lower-greek | α, β, χ |
Tips Although we used the list item tag <li> in this example, you can turn any element into a list item by adding the CSS list properties along with the definition display: list-item. Earlier versions of Internet Explorer will not support the hover trick with bullets.
|