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:
- all of the unordered lists on your site by placing the necessary code into an external stylesheet file,
- all of the unordered lists on a specific page by placing the necessary code into the <style> definition in the <head> section of the page,
- all of the entries within a single unordered list by placing the necessary code within the <ul> tag for that list, or
- a single entry within an unordered list by placing the necessary code within that <li> tag.
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.
