|
CSS Tip:
Make Custom Bullets
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
Would you like to use custom bullets in your HTML lists? It's not possible with old HTML tags, but with Cascading Style Sheets, it's easier than you think.
HTML bullet lists - which are officially known as "unordered lists" - are an often-overlooked part of HTML. Since people learn how to build bullet lists early in their HTML experience, they quickly outgrow them and they move on to more sophisticated techniques, such as tables and frames.
That's too bad, because using bullet lists can help increase the readability of your Web page. Since people tend to scan Web pages, instead of reading them line by line, bullet lists can help make key points stand out.
Probably the most common question people ask when learning how to build these lists is, "Can I use a GIF to make custom bullets?"
Under older versions of the HTML standard, the answer was a flat "no." The list tags UL and LI only allowed limited choices for bullet styles. You can define you bullets to be discs, squares, or circles.
All that changed with the introduction of Cascading Style Sheets. Using CSS, you can define a custom bullet using code like this:
<UL STYLE="list-style-image: url(redball.gif)">
<LI>Bullet 1</LI>
<LI>Bullet 2</LI>
</UL>
|
This will produce the bullet list shown below:
This technique uses the CSS property "list-style-image," which defines the URL where our GIF image is located.
Unfortunately, as with a lot of things under CSS, the syntax for defining the image's location is a little different from what you're probably used to. Instead of placing the image URL inside quote marks, you have to place the URL inside a set of parentheses. Other than that, the rules for defining the URL are the same as those used in the A HREF and IMG tags. For example, if you wanted to define the location of our GIF using an absolute URL, you would write the UL tag like this:
<UL STYLE="list-style-
images: url(http://www.netmechanic.com/
news/vol3/redball.gif)">
|
Note that there's at least one disadvantage to using custom bullets like this: you can't define HEIGHT and WIDTH attributes for the image. That's alright, though. Since the bullet images are small, they shouldn't have much impact on your page load time.
This technique works only under version 4 and 5 of Microsoft Internet Explorer, and under version 3 of Opera. The effect degrades gracefully, so browsers that don't understand this style sheet property just display the standard list bullet.
That's a key point to keep in mind with style sheets. Since not all browsers support the full CSS specification, it's important to check your page using a browser that doesn't understand CSS properties. If the page looks good under that browser, then the CSS properties are safe to use.
|
