Using Custom Bullets for Your Unordered Lists

Have you ever needed an unordered list but you don't really want to use any of the standard "bullets" that html provides for use with unordered lists?

Do you have an image of your own that you want to use as the "bullet" alongside each entry in your list?

Well you can use stylesheets to attach the bullet image of your choice to:

The above is an actual example of the third alternative listed, that of placing the necessary code into the <ul> tag. The code to specify the image to use for the bullets is this rather simple stylesheet statement:

list-style-image : url(bullet.gif)

All you need to do is to substitute the name of your image for bullet.gif (in my case img/comp1.gif because I want to use the comp1.gif image from the img sub-directory).

To attach this to an individual tag we code style="list-style-image:url(bullet.gif);" as a sub-parameter of the tag itself. To code it within a stylesheet we simple include it somewhere within the li { .... } statement.

Of course should your visitors be using a web browser such as Netscape Communicator 4.7 that does not support custom bullets they will just see the standard bullets on your unordered list and not your custom ones so you cannot rely on your custom bullet always appearing. Most web browsers these days are using a browser such as Opera 5 or Internet Explorer 5 or Netscape 6 (or later) that do support this code and using custom bullets can certainly make your page look more unique for those visitors using these browsers.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow