Tutorial 1 - Background images for bullets - all steps combined

CSS can be used to change list bullets to squares or circles, but this provides very little control over their appearance or positioning.

HTML bullets can be replaced with graphic images using "list-style-image". However, the placement of these images is inconsistent across most modern browsers. There is also very little control over how the bullets appear beside the list items.

A far better option is to use background images for bullets. So how is this achieved?

CSS CODE
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: .6em;
}


HTML CODE
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>

Step 1 - Make a basic list

Start with a basic unordered list. The list items are all active (wrapped in <a href="#"> </a>). However, this is not essential. For this example a "#" is used as a dummy link.

Step 2 - Remove the bullets

To remove the HTML list bullets, set the "list-style-type" to "none".

ul { list-style-type: none; }

Step 3 - Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

padding: 0;
margin: 0;

Step 3a - Add your own indent

If left-indentation is required, use margin-left. As the padding is now set to "0", the left margin can be given an exact measurement that will be consistent across all browsers. The example above is indented using "margin-left" set to "1em".

margin-left: 1em;

Step 4 - Add the background image

Background images are added to the "LI" element using "background-image". The background image is now repeated across the background of the each list item - not a pretty look.

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

Step 5 - Set no-repeat

To stop the background image from repeating under the list items, set the "background-repeat" to "no-repeat". There is now only one image per list item, but they will need to be positioned.

background-repeat: no-repeat;

Step 6 - Position the image

"Background-position" is used to position the images so that they line up with the text. In this case "0.4em" is used. These units refer to the images position from the "left" and "top".

The top position can be set to 50%, which will make it sit in the middle of the list item. However, this does not look good if list items wrap over two or more lines, as the image will be centred between the lines. The safest method is to define the top position by em's. Using this method, the images will always stay in position with the text no matter what font size the user specifies. The actual measurements used for "left" amd "top" will depend on the image.

The images are now lined up horizontally with the content. However, the content is sitting over the top of the images.

background-position: 0 .4em;

Step 7 - Move the content

To move the content away from the background image apply "padding-left" to the "LI" element. In this case "0.6em" has been used. As with vertical alignment, list padding will be determined by the size of your image.

padding-left: .6em;

Finished!

There are many variations on this basic list method.

Variation - right-aligned list

To make a right-aligned version of the list, only three changes need to occur. First, set the "UL" "text-align" to "right". Second, change the left "background-position" from "0" to "100%" - which makes the image align up with the right edge. And finally change "padding-left" to "padding-right".

CSS CODE
ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
}

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}

Variation - setting a list width

If the list does not sit within a containing box, you can use the "UL" to control the overall list width.

CSS CODE
ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
width: 10em;
}

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}

Variation - adding space around list items

Space can be added between each list item by setting a margin on the "LI". Margin can be set on the top, bottom or top and bottom of each list item. This version has a margin of ".1em" on top and bottom of the list items.

CSS CODE
ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
width: 10em;
}

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
margin: 1em 0;
}

Variation - icon lists

Multiple background image options can be used within a single list. This is achieved by creating a class for each icon, and styling individual "LI's" as required.

CSS CODE
.iconlist
{
list-style: none;
margin: 0;
padding: 0;
}

li.pdf
{
background-image: url(bullet_pdf.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.doc
{
background-image: url(bullet_doc.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.text
{
background-image: url(bullet_text.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.htm
{
background-image: url(bullet_htm.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

HTML CODE
<ul class="iconlist">
<li class="pdf"><a href="#">Milk</a></li>
<li class="text"><a href="#">Eggs</a></li>
<li class="htm"><a href="#">Cheese</a></li>
<li class="doc"><a href="#">Vegetables</a></li>
<li class="text"><a href="#">Fruit</a></li>
</ul>

« Back to main menu

Other Max Design articles and presentations
Associated with webstandardsgroup.org