Image Help: Bullets
These images are commonly used to mark the start of a new element of a list or to bring emphasis to an item.
Sampling of Bullets
| Glossy Balls | 
 |
|---|---|
| Shinny Balls | 
 |
| Checkered Balls | 
 |
| Push Pins | 
 |
| Paw Prints | 
 |
| Boxed Rings | 
 |
| Miscellaneous | 
 |
Advanced CSS Technique
Instead of simply adding these images to your page to serve as bulleted list replacements, try using an advanced CSS technique. It is a simple matter to replace the normal bullets used in an unordered list with your own graphical bullets.
|
<style type="text/css" media="all"><!-- ul.push{ list-style-image: url('/PATH_TO_IMAGE/IMAGE_NAME'); } --></style> |
Remember to replace the necessary code pieces for your image rule.
- /PATH_TO_IMAGE/IMAGE_NAME is to be replaced with the web path and image name to your image.
For this example we are using ul.push{ which limits its use to an unordered list defined with a "push" class. This way you can use it where you want but not have it appear for every unordered list. If you prefer it to replace all unordered list bullets simply use ul{ and all bullets will be graphical.
|
<ul class="push"> <li>Yadda, yadda, yadda...</li> <li>Yadda, yadda, yadda...</li> <li>Yadda, yadda, yadda...</li> </ul> |
|
What's the benefit?
You might think it a waste of effort to code the rule in this maner, after all, the result looks the same. The difference is that when CSS is not supported the HTML rule is then displayed. This is very much preferred over the absense of the desired separation. Small screen devices most often do not support CSS and this method will still provide the desired content separation.
Another benefit to using this approach is that you can now change all the horizontal rule images throughout your site from your style sheet. Imagine changing dozens or hundreds of rules in a large site by changing a few lines of CSS code.
