List Images

January 31st, 2009

In CSS List Images are such a simple topic that I have seen overlooked over and over. There is not much to it at all. Just one line of css.

Example

ul { list-style-image:url(picName.jpg); }

Done in one short line. This will simply make every un-ordered list have an image in place of the dot. So then an un-ordered List in XHTML such as:

List Item 1
List Item 1
List Item 1

would look like

(Note my list image is )

The only problem with this is that every unordered list will use this image. To fix this we will give the unordered list a class name this way we get to choose which list will show the image and which will use the default dot.

CSS:

ul.imgList { list-style-image:url(picName.jpg); }

XHTML

List Item 1
List Item 1
List Item 1