Web Development Network  |  Sites:    Capital Tutorials    Internet Marketing Books    Arcade Games
Depiction- Webmaster Resources
Stock Image


Contributors: SSD VPS in Europe  |  SEO Las Vegas |  EsqRank |  Free SEO Report

Dental SEO Marketing  |  Best Las Vegas SEO Company  |  Currency Converter Live

Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

Tutorials > CSS > Custom Bullets

 

Get rid of boring circle bullets in lists with your own creative ones.


Bullets are used as markers in html lists of data. Bullets are not limited to circles, squares, discs, and even roman numerals. Bullets can be just about anything by using CSS to create custom bullets from images.

To begin, a list must first be made.

Code:
------------------------------------------------------------------------
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
------------------------------------------------------------------------

Now open a style sheet and create a style sheet rule. (li.newbullet). Next type list-style-image:. Then type url(image.gif) where image.gif is the url to the image you would like to use as your new bullets. Your CSS code should look similar to the one below.

Code:
------------------------------------------------------------------------
<style type="text/css">

li.newbullet {
list-style-image:url(http://www.depiction.net/images/arrow.gif)
}

</style>
------------------------------------------------------------------------

Next apply the CSS rule to each bullet you would like it to be applied to. (This is the final code.)

Code:
------------------------------------------------------------------------
<ul>
<li class="newbullet">List item one</li>
<li>List item two</li>
<li class="newbullet">List item three</li>
</ul>
------------------------------------------------------------------------

Your final list should look like the following.


 
 

Affiliates

Tutorial Stream Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources