 |
|
 |
|
|
|
(or how you can change the appearance of a bullet list)
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:
This article assumes a working knowledge of css.
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.
| Appearance | HTML | css |
|---|---|---|
|
<ul> <li>Apples</li> <li>Pears</li> <li>Bananas</li> <li>Grapes</li> </ul> |
(none) |
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.
| Appearance | HTML | css |
|---|---|---|
|
<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).
A bullet list can be used without any bullets:
| Appearance | HTML | css |
|---|---|---|
|
<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:
| list-style-type | Bullet Style | Example |
|---|---|---|
| disc | Solid circle |
|
| circle | Circle. |
|
| square | Square. |
|
| decimal | Decimal number. |
|
| lower-roman | Lower case Roman numerals. |
|
| upper-roman | Upper case Roman numerals |
|
| lower-alpha | Lower case letters. |
|
| upper-alpha | Upper case letters. |
|
| none | No bullet. |
|
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.
| Appearance | HTML | css |
|---|---|---|
|
<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: Internet Explorer uses left-margin for the indent, but the FireFox browser uses left-padding.
| Appearance | HTML | css |
|---|---|---|
|
<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:
| Appearance | HTML | css |
|---|---|---|
<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:
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.
| Appearance | HTML | css |
|---|---|---|
|
<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:
| Display | Description | Example |
|---|---|---|
| none | Not displayed at all. |
|
| block | Displayed as a block level element. So line break before and after. |
|
| inline | In-line, so no line break before or after. |
|
| Appearance | HTML | css |
|---|---|---|
<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:
white-space: nowrap;"
to the <ul> css definition.
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.
| Appearance | HTML | css |
|---|---|---|
<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
}
|
If you find any errors on this page then please e-mail the author.
© Copyright 2004-2010, A B Cryer, All rights reserved.