CSS Lesson 7 – Formatting Lists

Filed under: CSS —

Lists

CSS Selectors can provide the Author extended control over how their Lists are formatted.

Properties can be applied to the markers that appear before the list items to provide order to the information.

In addition to the regular list styles that are available in HTML the author can also define their own marker item by using an image.

Other proposed CSS declaration values would control how the list item markers are applied and indented in relation to the line items.

The possible values have the following meanings:

disc: A disc (exact presentation is UA-dependent)
circle: A circle (exact presentation is UA-dependent)
square: A square (exact presentation is UA-dependent)
decimal: Decimal numbers, beginning with 0.
lower-roman: Lower case roman numerals (i, ii, iii, iv, v, etc.)
upper-roman: Upper case roman numerals (I, II, III, IV, V, etc.)
lower-alpha: Lower case ascii letters (a, b, c, … z)
upper-alpha: Upper case ascii letters (A, B, C, … Z)
none: No marker

<STYLE>
  OL { list-style-type: lower-roman }
</STYLE>

<BODY>

<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>

</BODY>

list-style-image

When you would like to us an image to represent the bullet of your list items you can use the URL value you can also define a list-style-type to be used if the enduser has disabled the loading of images.
Works only with IE4

The following example sets the marker at the beginning of each list item to be the image “icon.jpg”.

<style>
  UL { list-style-image: url(http://www.server.com/icon.jpg) }
</style>

list-style-position

CSS2 has also defined a selector declaration that would allow you to position the List marker either away from the Line Item or it could have the value compact that would make the Marker move to the position of the first character in the Line Item.
This is not implemented in either IE4 or NS4

Possible values include: inside, outside

<style>
  UL { list-style-position:inside }
</style>

NOTE

Lists are often used for Menu Systems in CMS or Blog Software like WordPress or Drupal.

There are a variety of ways of setting up your menus by taking advantage of list formatting and using a small amount of javascript.

Suckerfish is a great starting place for Menu Systems made with Li elements.  The code is easy to setup and the CSS formatting is only about 20 lines of attribute setup.