Are you tired of the boring bullets in HTML? Wish you can make your own and use them as bullets? Well, it's a lot easier than you may think! It just takes a little bit of CSS and HTML knowledge.
In your CSS, put in this code:
Code:
#ID{
list-style-image: url(/path/to/image.png);
}
Everything in bold will need to be changed. You can make "ID" anything you want. You'll also need to put your own path to your images. I chose .png for a reason.
The reason I chose .png is because it can have a transparent background, which is great when you don't want to match the background color to it and it's a lot more optimized than .gif.
I also chose to use a CSS ID because it allows you to create a CSS rule for every list you have. Meaning, you can have a different bullet image for each list you create. One can be blue arrows, another can be red checkmarks, but you'll have to create another CSS ID similar to the one above with a different ID and image.
Save your CSS and go down to the body part of your site and put this where you want your list to show.
Code:
<ul id="ID">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
This make it's a lot simpler than just adding the images manually for each list item. This is what it should look like. (My vary depending on the type of font you're using and the image you're using as well.)
List Item 1
List Item 2
List Item 3
List Item 4
Remember, you can also add some extra formatting in there too, such as bolding, italicizing, underlining.
Graphical Bullets with CSS
06-14-2010 02:32 PM
