Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 

Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format



Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

CSS Tip:
Make Custom Bullets

by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.

  
February 2000
Vol. 3, No. 2
 • HTML Tip
 • CSS Tip
 • Usability Tip
  

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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.