| You can set all the list properties presented in the previous three sections in one line of code using the list-style shorthand property (Table 10.9). This allows you to set the list-style-type, list-style-position, and line-style-image properties. Table 10.9. List-Style ValuesVALUE | COMPATIBILITY |
|---|
<list-style-type> | IE4, FF1, S1, O3.5, CSS1 | <list-style-position> | IE4, FF1, S1, O3.5, CSS1 | <list-style-image> | IE4, FF1, S1, O3.5, CSS1 |
In this example (Figure 10.10), I've set up the list to use the graphic arrow created earlier in this chapter with the square as a backup if the graphic doesn't load, in the inside position. Figure 10.10. All three of the list style properties are set, via the list-style shorthand property, for the navigation list.
To define multiple list style attributes: | | 1. | list-style: Type the list-style shorthand property name, followed by a colon (Code 10.7). Code 10.7. The list-style property lets you set the type, image, and position all in one definition.| [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 Multiple list Properties</title> <style type="text/css" media="screen"> h1, h2 { color: #999; margin: .5em 0em; } h2 { clear: both; } li { list-style: url(arrow_02.png) square outside; } #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 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 XI<span > Who Stole the Tarts? </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice37a.gif" height="298" width="220" alt="Alice" /> 'The Queen of Hearts, she made some tarts, All on a summer day: The Knave of Hearts, he stole those tarts, And took them quite away!'</div> <p>The King and Queen of Hearts were seated on their throne when they arrived...</p> </div> </body></html> |
| 2. | url(arrow_02.png) Next, type a list-style-image value. To include your own bullet, you must first create the bullet graphic and then tell the browser where the graphic is located, using either the complete Web address or the local file name of the image. (See "Creating Your Own Bullets" earlier in this chapter for more information.) | 3. | square Type a list-style-type value from Table 10.5, followed by a space, or type none if you don't want a marker to appear. | 4. | outside; Type a list-style-position value from Table 10.8. |
Tips Although I used the list item <li> tag 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. You do not need to include all of the values for this shorthand selector to work. Values omitted are set to the default. The following example works just fine: list-style: inside; If the visitor has turned off graphics in the browser, or if a graphical bullet does not load for some reason, the browser instead uses the list-style-type you defined in Step 3.
|