Simple List Style Using Image As Bullets

One way to attract visitor to read your content and listing is to use image as bullets.

This is one example on how to create simple list bullets using image.

Example:

HTML

<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”#” id=”current”>Item one</a></li>
<li><a href=”#”>Item two</a></li>
<li><a href=”#”>Item three</a></li>
<li><a href=”#”>Item four</a></li>
<li><a href=”#”>Item five</a></li>
</ul>
</div>

CSS

#navlist { list-style-image: url(images/arrow.gif); }

Instructions:

Using any web editor application (eg: Dreamweaver), paste the HTML code above into your HTML file and save it with .html extension. Again, copy the CSS codes above into your web editor and save it with .css extension.

Remember to add <link href=”simplelistimage.css” rel=”stylesheet” type=”text/css” /> before your </head> on the HTML file.

Execute the HTML file on any browser. And it will become like below.

See here for demo.

You can try it yourself using any other suitable small bullet icon image which may suit your theme or template.

Popularity: 51% [?]