Lists with bullets, made from images look really nice in web pages. There is, however, no uniform way to make them (and no satisfactory way, I would add).
I have also been unable to resist temptation and have made such bullets. More, below.
The simpler bullets are the default bullets that any browser makes when you specify an unordered list. You can add some variety (more useful if you have lists within lists) by specifying in a style sheet how these bullets will look.
Your choices are:
You can view the source to see how this is done.
If you want to mix discs, circles and squares , you'll have to make a different class for each, like this:
<style>
ul.square{list-style:square; }
ul.circle{list-style:circle; }
ul.disc{list-style:disc; }
</style>
Then you define your list like this (you change the class on each list from square to disc etc):
<ul class="square"> <li>First list item</li> <ul>
The result should look like this :
Sorry for all those new windows; bullet styles don't mix well for all browsers.
Finally, for lists within lists , where it makes more sense to use different bullets, you specify in your style sheet something like the following:
<style>
ul {list-style:disc; }
ul ul {list-style:circle; }
ul ul ul {list-style:square; }
</style>
And the result.
If you want to have an image instead of a plain bullet, there are many ways, none of them satisfactory.
The "proper" way is to use style sheets, like this:
<style>
ul {list-style:disc; url{image_directory/image_name;}
</style>
This is the way I used in these pages. The problem is that not all browsers support this at present. Some will show only the list-style you have chosen. The advantage is that your pages will not look bad in any browser, as they could with any of the following methods.
Web authors, being inventive, have found some ways around this:
<dl> <dd><img src="image_directory/image_name" alt="*">First</dd> <dd><img src="image_directory/image_name" alt="*">Second</dd></dl>
First
Second
The result can be called satisfactory, as you can see, although there are problems of alignment.
Also, it is not right to use content markup to change the presentation. Think of someone blind, who uses a voice browser. He will expect to hear a list of terms explained and will be confused with this list. The star in the alt text helps to show that this should be taken as a bullet.
|
|
First item |
|
|
Second item |
|
|
Third item |
This looks ok here. It needs a lot of care, though, in defining the width of table cells and the alignment of text and images, or your overall alignment will be very strange.
The disadvantage of a table used this way, is that the page will show when all the table has loaded, which can be slower with a long list.
First item
This looks better, but when the text in the list item is long, like in this paragraph, the result would be that the second row would align left, so this paragraph does not have the appearance of a list (and what is long depends on the screen and the browser used).
If you use the paragraph (p) tag, the distance between list items will be larger than expected, as above.If you use the break (br) tag, it will look like this: (remember to use two breaks before and after the list, to separate it from the rest of the text, if you can't use a paragraph)
First item
Second item
Third item
which looks a lot better, so long as you keep your list items really short.
As far as the actual images you can use, the choice is yours. It is usual to use transparent GIFs for this purpose. It is very easy to make your own. If you want some bullets, I have some here.
Last Updated: