Fun with Bullet Lists

(or how you can change the appearance of a bullet list)

Page contents

• Introduction - The purpose of this article
• Simple bullet list
• Bullet list with a custom bullet
• Bullet list without a bullet
• Bullet list without a bullet or indent
• Menu style bullet list
• Horizontal bullet list
• Horizontal menu style bullet list
• Horizontal button style bullet list
• Other sources of information

Introduction - The purpose of this article

Bullet lists (such as the one used above in the contents list) are very popular. Styles and css (cascading style sheets) in particular provide ways of making radical changes to the appearance of a bullet list. The purpose of this article is to provide a taster of the different effects that can be achieved with a bullet list.

It is worth considering why you might want to do this? After all, many of the effects shown in this article could be achieved by some other means. There are many reasons. One important reason is compatibility with older browsers - if your site is being viewed using a browser that does not understand css then it will still be rendered in a logical and readable manner. Another important reason is "Accessibility", that is making a web page accessible to someone who is visually impaired and is using a screen-reader. For example, if you have a list of links that make up a menu, then constructing that list using a bullet list means that any screen reader will know it is a list - even if visually it may no longer look like one because of the visual effects.

For each example three things will be shown:

1. What the effect looks like.
2. The HTML for the bullet list.
3. The css that defines the appearance.

This article assumes a working knowledge of css.

Simple Bullet List

Below is the very simplest of bullet lists. This is the basic bullet list that will be used for the subsequent examples on this page.

<ul>
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>

Bullet List with a Custom Bullet

If you want to have a custom bullet then you can specify an image file to use for that custom bullet. The example below uses an image of a tick mark.

<ul class="TickList">
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>

ul.TickList {
  list-style-image: url('tick.gif')
}

The url for the image must be specified inside single quotes. The image url can be specified using an absolute url (ie. http://www.cryer.co.uk/resources/tick.gif) or a relative url (such as ../tick.gif). Be aware that you cannot specify the height or width of the image, so be sure that it is something suitably sized (i.e. small).

Bullet List without a Bullet

A bullet list can be used without any bullets:

<ul class="NoBullet">
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>

ul.NoBullet {
  list-style-type: none
}

This example does not deal with the indent - the list is still indented. To address that see the next example Bullet List without a Bullet or Indent.

The "list-style-type" css property specifies the type of list. Any of the following types can be used:

Bullet List without a Bullet or Indent

Each item in a bullet list is normally indented. This is controlled by the left-margin value assigned to the list. The following example shows a list with no bullet and no indent.

<ul class="NoBulletNoIndent">
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>

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

Of course you could achieve this same effect without using a list ...

Note: The bullet appears in the margin, so setting the left-margin to zero will hide the bullet. The left-padding is then the space between the bullet and the content of the list item.

Menu Style Bullet List

<ul class="SimpleMenu">
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
<li>Every other possible kind of fruit</li>
</ul>

ul.SimpleMenu {
  list-style-type: none;
  margin-left: 0px;
  padding-left 0px;
}
ul.SimpleMenu li {
  background-color: #C0C0C0;
  width: 8em;
  border-style: outset;
  border-width: 1px
}

and with simple mouse-over effects added:

<ul class="SimpleMenu2">
<li><a href="#self">Apples</a></li>
<li><a href="#self">Pears</a></li>
<li><a href="#self">Bananas</a></li>
<li><a href="#self">Grapes</a></li>
<li><a href="#self">Every other possible kind of fruit</a></li>
</ul>

ul.SimpleMenu2 {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
}
ul.SimpleMenu2 li {
  background-color: #C0C0C0;
  border-style: outset;
  border-width: 1px
}
ul.SimpleMenu2 li a {
  display: block;
  width: 8em;
  text-decoration: none
}
ul.SimpleMenu2 li a:hover {
  background-color: #D0D0D0
}

Some things to note:

• This example sets the width of the list to 8em (the width of 8 'M's). This is to ensure that the grey box drawn around each item is the same width. The new entry "Every other possible kind of fruit" has been added to both illustrate the effect of setting a fixed with and to show wrapping.
• If you do not set a width then this list would instead look like this:
  • Apples
  • Pears
  • Bananas
  • Grapes
  • Every other possible kind of fruit
  which kind of ruins the effect.

Horizontal Bullet List

All the lists so far have been vertical, with each item listed below the previous. Lists can be put together to display horizontally, i.e. with each item on the same line as the previous - subject to wrapping.

<ul class="Horizontal">
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>

ul.Horizontal {
  margin-left: 0px;
  padding-left: 0px;
}
ul.Horizontal li {
  display: inline
}

The appearance of each item in the list is controlled by the "display" property associated with each <li> element. The example above sets the left-margin for the list only to avoid the list being indented.

For an excellent description of the display property, see www.quirksmode.org/css/display.html.

Whilst the display property can take other values, the three below are the ones most commonly used:

Horizontal Menu Style Bullet List

<ul class="SimpleHorizMenu">
<li><a href="#self">Apples</a></li>
<li><a href="#self">Pears</a></li>
<li><a href="#self">Bananas</a></li>
<li><a href="#self">Grapes</a></li>
</ul>

ul.SimpleHorizMenu {
  margin-left: 0px;
  padding-left: 0px;
}
ul.SimpleHorizMenu li {
  display: inline;
  background-color: #C0C0C0;
  border-style: outset;
  border-width: 1px;
}
ul.SimpleHorizMenu li a {
  text-decoration: none;
  padding-left: 1em;
  padding-right: 1em
}
ul.SimpleHorizMenu li a:hover {
  background-color: #D0D0D0
}

Note:

• Depending on your browser width, this horizontal list will wrap. If you do not want it to wrap then add "white-space: nowrap;" to the <ul> css definition.

Horizontal Button Style Bullet List

Unfortunately there are differences between browsers in how they render HTML and css. The following uses "border: outset 2px" to give an imitation of a button, which works very well when viewed using Internet Explorer, but is not so good when viewed with other browsers.

<ul class="HorizontalButtons">
<li><a href="#self">Apples</a></li>
<li><a href="#self">Pears</a></li>
<li><a href="#self">Bananas</a></li>
<li><a href="#self">Grapes</a></li>
</ul>

ul.HorizontalButtons {
  margin-left: 0px;
  padding-left: 0px;
}
ul.HorizontalButtons li {
  display: inline;
  background-color: #C0C0C0;
  border-style: outset;
  border-width: 2px;
  margin: 2px;
  padding: 0px
}
ul.HorizontalButtons li a {
  text-decoration: none
}
ul.HorizontalButtons li a:hover {
  background-color: #D0D0D0
}

Other Sources of Information

• http://css.maxdesign.com.au/listamatic/
• www.alistapart.com/articles/horizdropdowns
• www.communitymx.com/content/article.cfm?cid=27F87
• www.grc.com/menu2/invitro.htm - If you want to turn your bullet list into a drop down menu then take a look at this page. It demonstrates a pure CSS (no JavaScript) menu system. It isn't well documented, so be prepared to take your time with it.
• Different Colour Bullet Lists - A complementary article which covers how to change the colour of the bullet points in a bullet list.

If you find any errors on this page then please e-mail the author.