CSS tricks for custom bullets

Create file markers

Once you’ve created your own list bullets, you can take the process further by creating different bullets for different list items. For example, if you’re presenting a list of files to download, you might find it useful to create icons that express what type of file each item is—PDF, Word, Excel, and so on.

To set this up, follow the steps for creating personalized bullets. Define the

ul
tag to remove the padding, margin, and bullets. Then add a generic CSS rule for all
li
tags:

	li {
	background: url(bullet.gif) left center no-repeat;
	padding-left: 20px;
	margin-bottom: 10px;
	}
	

Next, create additional rules that replace the generic bullet graphic with images that are appropriate for each type of list item. For example, to create the PDF bullet, you’d type:

	li.pdf {
	background-image: url(pdf.gif);
	}
	

Repeat this for each type of bullet you want to create.

Now, when you create a new list, reference the appropriate bullet type for each list item. For example, the HTML for a list item that links to a PDF might look like this:

Bullet, Know Thyself These bullets give readers a clue about what type of documents the list items are.

	<ul>
	<li class="pdf"><a href="brochure.pdf">Our Brochure</a></li>
	</ul>
	

Up-to-speed with CSS

If you haven’t yet dipped your feet in the CSS pool, here’s a quick way to get started. Open a Web page in your favorite text editor. Place you cursor before the

</head>
closing tag and type this:

<style type="text/css"></style>

Then add any CSS styles between the opening (

<style>
) and closing (
</style>
) tags.

[ David Sawyer McFarland is the author of Dreamweaver 8: The Missing Manual (O’Reilly, 2005). ]

recommended for you

Dreamweaver 8

Read more »

Subscribe to the Apple @ Work Newsletter

Comments