Controlling Lists with CSS | Dynamic HTML in Action

There are several CSS attributes that can affect the appearance of HTML lists. The list-style-type attribute allows you to choose from nine types of item markers, and list-style-image lets you use graphics as item markers. The list-style-position attribute controls the wrapping of an item's text relative to its marker, and list-style is a shortcut property that controls all the list-style attributes. Code Listing 14-5 demonstrates the list-style-type attribute, and Figure 14-5 on the following page displays the results.

The list-style-type CSS attribute is similar to, but more flexible than, the HTML attribute named TYPE. Nine values are available for list-style-type: disc, circle, square, none, decimal, lower-roman, upper-roman, lower-alpha, and upper-alpha. The first four values allow you to set a shape in front of the items in the list. The remaining values specify ordering schemes. A value of decimal causes the items to be ordered using the base-10 numbering system. A value of lower-roman causes the items to be ordered using lowercase roman letters. A value of upper-roman causes the items to be ordered using upper-case roman letters. Setting values of either lower-alpha or upper-alpha causes the items to be listed alphabetically. Unlike the HTML TYPE attribute, any of these nine values can be used in Internet Explorer with both ordered (<OL>) and unordered (<UL>) lists. Netscape Navigator 4 provides partial support for this attribute; it allows the values decimal, lower-roman, upper-roman, lower-alpha, and upper-alpha for ordered lists and disc, circle, square, and none for unordered lists.

Code Listing 14-5.

 <HTML> <HEAD> <TITLE>Listing 14-5</TITLE> </HEAD> <BODY> <UL> Each of the following LI tags has the CSS attribute  <I>list-style-type</I> set to the specified value.   <LI STYLE="list-style-type:disc">disc   <LI STYLE="list-style-type:circle">circle   <LI STYLE="list-style-type:square">square   <LI STYLE="list-style-type:none">none   <LI STYLE="list-style-type:decimal">decimal   <LI STYLE="list-style-type:lower-roman">lower-roman   <LI STYLE="list-style-type:upper-roman">upper-roman   <LI STYLE="list-style-type:lower-alpha">lower-alpha   <LI STYLE="list-style-type:upper-alpha">upper-alpha </UL> </BODY> </HTML>

click to view at full size.

Figure 14-5. You can control the list marker by using the list-style-type CSS attribute.

With the list-style-image CSS attribute, you also have the option of using your own images for markers. Code Listing 14-6 demonstrates this attribute, and Figure 14-6 displays the results.

Code Listing 14-6.

 <HTML> <HEAD> <TITLE>Listing 14-6</TITLE> </HEAD> <BODY> <UL> The following LI tags have list-style-image specified.   <LI STYLE="list-style-image:url(one.gif)">url(one.gif)   <LI STYLE="list-style-image:url(img/two.gif)">url(img/two.gif)   <LI STYLE="list-style-image:url(img/three.gif)">url(img/three.gif)   <LI STYLE="list-style-image:none">none </UL> <HR> <UL STYLE="list-style-position:outside">   <LI>This demonstrates how setting a list-style-position     of outside affects the way that text will wrap.   <LI>This demonstrates how setting a list-style-position     of outside affects the way that text will wrap. </UL> <UL STYLE="list-style-position:inside">   <LI>This demonstrates how setting a list-style-position     of inside affects the way that text will wrap.   <LI>This demonstrates how setting a list-style-position     of inside affects the way that text will wrap. </UL> </BODY> </HTML>

click to view at full size.

Figure 14-6. The list-style-image attribute sets an image as an item marker, and the list-style-position attribute controls text wrap.

The first list in Code Listing 14-6 contains four items. The first three items use list-style-image and associated url values to point to particular graphics. The first item points to url(one.gif), which uses the file named one.gif from the same folder as lst14-6.htm. The second item points to url(img/two.gif), which uses the file named two.gif from a subfolder of the folder that contains lst14-6.htm. The list-style-image attribute also accepts the value none, which simply allows the default list marker to display. Netscape Navigator does not support this attribute.

Code Listing 14-6 also demonstrates the use of the list-style-position attribute, which controls how the text in a list item wraps relative to the list item marker. The default for this attribute is outside, which causes each new line of text to wrap to the right of the marker. The final list item in Figure 14-6 shows how text with a list-style-position of inside behaves. This position results in a more compressed list because the text wraps under the marker.

So far, we have used dynamic styles to set up static Web pages. In the next chapter, we will investigate how to use the script to change the styles of elements after the page has been displayed, making these styles truly dynamic.