html: creating clean unordered lists
Almost everyone has created an unordered list before, but most people don’t realize just how easy it is to make these lists really stand out from the crowd. For example, if you are looking to make a list of items that you offer, you may very well want to put a small green check mark next to it, like this:
- This is a feature you offer.
- And so is this!
The css code we used to make these bullets is here:
.checklist{ list-style:none; margin-left:10px; padding-left:0;}Of course, you will need an appropriate image. We created ours in photoshop. (here it is). We made ours 10 x 10 pixels, and you may need to modify the padding-left attribute on your checklist to fit.
.checklist li{ background:url(images/check.gif) no-repeat 0 3px; color:green; padding-left:25px;}
Now, we just assign the .checklist class to the ul tag, like this:
<ul class="checklist">The same method applies to creating multiple lists. For instance, you could make a second list with features that you don’t offer, and have small red x’s to the left instead. In this case, assuming the image is the same height and width, you can reuse the code above, and change only the class title, the font color (we chose red), and the image name. The results will be something like this:
<li>This is a feature you offer.</li>
<li>And so is this!</li>
</ul>
- This is a feature you don’t offer.
- And so is this!
See how simple that was? In this case, we also changed the position of the image from 3px to 5px.
Here’s the code:
.dontoffer{ list-style:none; margin-left:10px; padding-left:0;}
.dontoffer li{ background:url(images/dontoffer.gif) no-repeat 0 5px; color:red; padding-left:25px;}
If you are looking to get deeper into how to properly style a list, or are stuck on one that you are working on, leave us a comment and we’ll lend a hand.
Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!
