CSS Bulleted lists styling

Written by Christine on 08 April 2007.

Tags : ((CSS Bulleted Lists)), ((CSS graphical bullets)), ((web design))
I recently had to replace some regular bullets with graphical bullets. Not problem! Have done it lots of times. But like all things that you do regularly, you really have to do it REGULARLY in order for it to progress smoothly. I realise that I had forgotten quite a few details about how to make nice graphical bullets for your lists.

Not only that, but I was dismayed to find that there is not ONE single resource to summarise it completely. I had to go to about 3 or four different websites to get the full picture.

So here is a quick breakdown of the various ways in which you can style your bulleted lists - and the pitfalls for the unwary!

1. The simple approach.

There are two approaches to doing it. The simple approach, and the not so simple approach!

The simple approach really goes about replacing the round bullet with a different type of bullet OR replacing the list bullet with a graphic.

The syntax for this is firstly:
ul {
   list-style-type: square;
}
Image

This will change the round bullets into square bullets. Other built-in formats can be found on this page on the w3schools site:

http://www.w3schools.com/css/pr_list-style-type.asp

This is simple enough, but might not provide for much styling options (for example colour and spacing).

To change the bullet into a graphic image without much effort, you can use the list-style-image command.

ul {
   list-style-image: url(bullet.jpg);
}

This also does not provide for much spacing or padding options AND as you can see, it looks difference depending on your browser - as you can see with these two examples:
Image

Please note that a common problem with lists is if the line is too long and the text wraps to the next line. In that case, you often end up with the text appearing flush left right under the bullet, like this:

Image
This can be controlled through setting the list style position to be either outside or inside. For example:

ul {
  list-style-position: outside;
  }


This creates the effect of a hanging indent and will line up the text under each other.

Image
This is about as much as you can do with playing around with the list styles themselves. The other option is to ignore the list styles completely and use a background image. This allows for more styling and spacing options.


2. The graphic background image option

The first step to take is to specify that the list should not use any of the built in list style types.

We are also going to remove any padding and margins.

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

Now we are going to specify a background image for the li:

li {
  list-style-image: none;
   background-image: url(bullet.jpg);
   background-repeat: no-repeat;
   background-position: left center;
   }

Let's look at each of the settings:
Firstly we specify that no image should be used for the list style.

Then we specify a background image: background-image: url(bullet.jpg);

We also specify that the image should not be repeated, and then we specify the position. The position options are for the horizontal and vertical positioning. For horizontal you can use top, center and bottom, and for vertical you can use left, center and right.

You can also specify these positions by means of x% and y%, or by CSS units such as pixels, pts or em.

This will result in something that looks like this:

Image
You can see that the graphic now sits on top of the list. You need to use a padding to move the graphic and the text apart. You can add padding-left to the styling. So if your image is 10px wide, a padding of 15px should do the trick.

Image
Depending on the rest of your styling, long lines of text might or might not sit flush to the left with your bullet. In this case, it does not help to use 'list-style-position' since you are now using a background image, and list style position is only effective on built in list styles! If your text is not indenting, you can use display : block, to force it to indent so that the bullet is on its own, and the text is aligned underneath each other.

Image
Now, if you just use li as the styling, you will affect other lists as well, such as ORDERED (< ol >) lists. You might get this effect:

Image
In order to ensure that your styling only affects UNORDERED lists (< ul >), you should change your CSS from

li {
   list-style-image: none;
   background-image: url(bullet.jpg);
   background-repeat: no-repeat;
   background-position: left center;
   padding-left : 15px;
   }

to

ul li {
   list-style-image: none;
   background-image: url(bullet.jpg);
   background-repeat: no-repeat;
   background-position: left center;
   padding-left : 15px;
   }


This will ensure that the image only appears on UNORDERED lists.

You can also play around with the padding and if you want more space between your lines, you can use the margin property.

Also, as always, various browsers display these lists with the paddings differently. So don't come to me and complain that it doesn't work in this or that browser! That is (unfortunately && shudder) what browser specific hacks are for and I don't even want to go into that!
Tags : ((CSS Bulleted Lists)), ((CSS graphical bullets)), ((web design))

Twitter Updates

Web Trends Blog Entries

TM4Y Web Trends Blog - Trends in Web Design, SEO and the Internet in General
Tailormade4you is a web design company that specializes in building websites that offer real value to businesses. This blog contains some thoughts and reflections on the stuff that we deal with on a daily basis - building sites, keeping clients happy and learning all the time.