Setting the Bullet Style


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 Values

VALUE

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 &amp; 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="#">&larr; 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 Bullets

NAME

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.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net