10.7 Images in Lists

Two of the basic list types available in HTML are ordered lists (1,2,3...a,b,c etc) and unordered lists using bullet points, for which there are three choices: square, disc or circle. With unordered lists, CSS allows us to remove these bullets or replace them with an image, which can produce some rather nice effects.

By default, the bullets are indented with (about) a 30px margin, and there is padding of (about) 10px between the bullets and the list text. This can be altered but simply changing the margin or the padding of a list isn't enough because some browsers create the indent using margin-left and some use padding-left; therefore both need setting.

If the margin-left and padding-left are set to zero, which often happens when the global whitespace reset is used in the stylesheet (see CSS : Grouping), then the bullets disappear. In fact they haven't really gone, they have just moved outside the current containing element, be it a container div or the body of the html document. This is useful for navigational links placed in lists (as they should be). But if images are required instead of bullets (say we wanted to place a tick next to each list item), then the CSS could look something like this:

ul	{list-style: url("images/tick.gif");
	margin: 0px 10px 0px 30px;}

A small image of a tick would be required, roughly to match the font size being used, and a gif format would suffice. The unordered list in the html would require no additional markup and would be something like:

<ul>
<li>A list item</li>
<li>Another list item</li>
<li>Yet another list item</li>
</ul>

This would give the following result:

  • A list item
  • Another list item
  • Yet another list item

Additional notes

To cater for older browsers that may not support images as bullet points, it is a good idea to add an alternate bullet (circle, disc or square). Also, if the image doesn't quite align correctly with the list item text, then it can be placed within the list item block (rather than outside) by adding list-style-position: inside; like so:

ul	{list-style-type: disc;
	list-style-image: url(bullet.gif);
	list-style-position: inside;}

And all of this can be compiled into:

ul	{list-style: disc url(bullet.gif) inside;}

And of course images, as well as text, can be placed inside a list too using the <img> tag.