| The display element, discussed in Chapter 6, is used to specify how an element is displayed, allowing you to turn block items into inline items and visa-versa. One of the display values is list-item, which allows you to turn any element into a list item, basically assuming the properties of the list item (li) tag. In this example (Figure 10.11), the chapter link tags in the navigation area are automatically numbered without having to place them in the li tag. Figure 10.11. The menu links are turned into a numbered list. When visitors pass their cursors over a link, the bullet changes to the arrow graphic. 
To set an element to be part of a list: | | 1. | display:
Start your declaration by typing the display property name, followed by a colon (:), in the CSS declaration block (Code 10.8).
Code 10.8. The list-item value used with the display property allows you to specify any item as being part of a list, effectively turning it into an li tag.| [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 | Displaying an Element as a List</title> <style type="text/css" media="screen"> h1, h2 { color: #999; margin: .5em 0em; } h2 { clear: both; } #navigation { width: 240px; margin: 0px 8px 8px 0px; background-color: #ccc; float: left; font: small Arial, Helvetica, sans-serif; } #navigation a { padding: 2px 4px; border-top: 3px solid #fff; text-decoration: none; display: block; color: red; } #navigation ol a { display: list-item; list-style-type: decimal-leading-zero; list-style-position: inside; margin-left: -40px; } #navigation a:hover { border-top: 3px solid #999; color: red; background-color: #fff; } #navigation ol a:hover { list-style-image: url(arrow_02.png); } #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> <a href="#">A Mad Tea-Party</a> <a href="#">The Queen's Croquet-Ground</a> <a href="#">The Mock Turtle's Story</a> <a href="#">The Lobster Quadrille</a> <a href="#">Who Stole The Tarts? </a> <a href="#">Alice's Evidence</a> </ol> <a href="#">← Previous </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER XII <span > Alice's Evidence </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice42a.gif" height="293" width="220" alt="Alice" /> 'Who cares for you?' said Alice, (she had grown to her full size by this time.) 'You're nothing but a pack of cards!'</div> <p>'Here!' cried Alice, quite forgetting in the flurry of the moment how large she had grown in the last few minutes...</p> </div> </body></html>
|
| 2. | list-item;
Type the list-item property and value for how this element will be displayed, turning the element into a part of a list.
|
 Tips
Notice in the HTML code that the elements that are using the list-item display are nested in an ordered tag (<ol>...</ol>). If not used, the items will indent, but no number (ol) or bullet (ul) will appear next to them. Of course, it would be nice if counter-reset property worked here so that we could start the numbering at 6 instead of 1 (see earlier in this chapter), but it does not. In the example in this section, I used the :hover pseudo element to change the bullet from a number to the arrow graphic. Although this is easily done now, earlier browsers tended to choke on this. As a result, most Web designers prefer to use a similar technique that utilizes the background-image property to add the graphic bullet (see "Creating Navigation Buttons with CSS Sprites" in Chapter 23).
|
