Bullet Time
Instead of using small .gif or .jpg files to create bullets on your page,
why not use regular HTML bullets? Your pages will download faster, be easier
to change, and look better on non-PC web devices. Of course standard HTML
bulleted lists don't look the greatest - but by using Cascading Style Sheets
(CSS) you can create some very nice results.
This is a basic bulleted list using standard HTML. The bullets are plain
dots, and they're the same colour as your text. If you have multiple lines
of text after each bullet, there isn't very much space left between items
either.
<ul>
<li>Line1</li>
<li>Line2<br>Line3</li>
<li>Line4</li>
</ul>
By making sure the paragraph tags <p> are inside the list
item tags <li> we can create more spacing between our bullet points.
<ul>
<li><p>Line1</p></li>
<li><p>Line2<br>Line3</p></li>
<li><p>Line4</p></li>
</ul>
If the only element inside each list item is a link, it's easy to have
you bullets be a different colour from your text.
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
We can create more sophisticated effects if we use Cascading Style Sheets
(CSS). CSS lets you control the visual appearance of the elements on your
page. The next example demonstrates how to change the plain round bullets
into something else.
The CSS code below would be placed after your </title> tag
and before your </head> tag.
<style type="text/css">
<!--
li { list-style-type: square }
-->
</style>
The rest of your HTML stays the same.
<ul>
<li>Line1</li>
<li>Line2</li>
<li>Line3</li>
</ul>
Anyone who is just getting started with CSS should refer to the Beginner's
Guide to Cascading Stylesheets .
CSS not only lets you define the appearance of elements within an HTML
tag, but also the appearance of elements within multiple tags. In
this example we are going to set the colour for the links within the list
items ( li a ) as something seperate from the list items ( li ) themselves.
NOTE: This technique would also work if you had <p> tags within the
<li> tags as shown above.
<style type="text/css">
<!--
li { color: #3366CC;
list-style-type: square;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px}
li a { text-decoration: none;
color: #3366CC}
-->
</style>
In addition to changing the appearance of all instances of an HTML tag,
you can also create <div> tags and set them to use a specific CSS
class. This allows you to vary the appearance of multiple bulleted lists
that are on the same page. The example below demonstrates how to create
a simple navigation box.
You can create very sophisticated looking bulleted lists using Cascading
Style Sheets...
<style type="text/css">
<!--
.navex { background-color: #000000;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 0px;
width: 100px }
.navex li a { color: #FFFFFF;
list-style-type: square;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px}
.navex li { color: #FFCC00}
.navex li a:hover { color: #FFCC00;
background-color: #CC0000;
text-decoration: none}
-->
</style>
...but you don't need to change the HTML on your page very much at all!
<div class="nav">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div>
For an example of some of these techniques at work, take a look at the
red and gold bullets on The University
of Guelph web site.