List Properties | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

As discussed in Chapter 3, XHTML supports three major forms of lists: ordered lists, unordered lists, and definition lists. HTML traditionally also has supported other forms of lists that were more compact or formatted differently, but browser support has been spotty. CSS1 provides some list manipulation, including three style properties that can be set for lists: list-style-type , list-style-image , and list-style-position . A general property, list-style , provides a shorthand notation to set all three properties at once.

list-style-type

The items in ordered or unordered lists are labeled with a numeric value or a bullet, depending on the list form. These list labels can be set under CSS1 by using the list-style-type property. Five values are appropriate for ordered lists: decimal , lower-roman , upper-roman , lower-alpha , and upper-alpha . Three values are appropriate for unordered lists: disc , circle , and square . The value none prevents a label from displaying. These values are similar to the type attribute for the list elements in HTML. Setting the following:

 ol   {list-style-type: upper-roman;}

is equivalent to <ol type="i"> , whereas the following is equivalent to <ul type="square"> :

 ul   {list-style-type: square;}

Nested lists can be controlled by using contextual selection rules. For example, to set an outer order list to uppercase Roman numerals, an inner list to lowercase Roman numerals, and a further embedded list to lowercase letters , use the following rules:

 ol          {list-style-type: upper-roman;} ol ol       {list-style-type: lower-roman;} ol ol ol    {list-style-type: lower-alpha;}

The list-style-type property also can be associated with the <li> element, but be aware that setting individual list elements to a particular style may require the use of the id attribute, or even inline styles.

One caveat with list styles is that it is very possible to change the meaning of a list tag. For example, consider the rules here:

 ol   {list-style-type: square;}  ul   {list-style-type: upper-roman;}

In this case, we have created ordered lists that have bullets and unordered lists are numbered! Use your CSS power wisely or you'll end up with confusing markup.

list-style-image

The list-style-type property provides little different functionality from HTML lists, but the list-style-image property can assign a graphic image to a list label; this is awkward to do under plain XHTML. The value of the property is either the URL of the image to use as a bullet or the keyword none . So, to use small flags with your list, create an appropriate graphics file and use a rule such as this:

 ul   {list-style-image: url(/books/4/324/1/html/2/flag.gif);}

Notice the use of the keyword url within which you set a URL either absolute or relative to the image to use. You can use quotes, either double or single, around the value, but it is not required.

list-style-position

Display elements in cascading style sheets are treated as existing inside a rectangular box. Unlike other elements, the labels for list items can exist outside and to the left of the list element's box. The list-style-position property controls where a list item's label is displayed in relation to the element's box. The values allowed for this property are inside or outside . The outside value is the default. The following example tightens up a list by bringing the bullets inside the box for the list:

 ul.compact  {list-style-position: inside;}

list-style

Like other shorthand notations, the list-style property allows a list's type, image, or position properties all to be set by a single property. The properties can appear in any order and are determined by value. The following is an example of the shorthand notation that sets an unordered list with a bullet image that appears within the list block:

 ul.special {list-style: inside url(/books/4/324/1/html/2/bullet.gif);}

A complete example of list properties is shown here, with a rendering in Figure 10-7:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  List Properties Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!--     ul          {list-style-image: url(/books/4/324/1/html/2/flag.gif);}     .inside     {background-color: yellow;              list-style-type: upper-roman;               list-style-position: inside;}     .outside    {background-color: yellow;              list-style-type: decimal;              list-style-position: outside;}     -->  </style>   </head>   <body>   <ul>   <li>  Item a  </li>   <li>  Item b  </li>   </ul>   <ol class="outside">   <li>  Item a  </li>   <li>  Item b  </li>   </ol>   <ol class="inside">   <li>  Item a  </li>   <li>  Item b  </li>   </ol>   </body>   </html>

Figure 10-7: List properties under Internet Explorer 5

CSS2 provides a wealth of additional settings, as well as control over list number. See the section entitled "CSS2 List Changes" for more information on CSS2-based list properties.

< Day Day Up >