A c t i o n f o r L i b r a r i e s — M a y 2 0 0 4

The Internet Connection

By Michael Sauers

Rethinking Lists: Coding in CSS (Part II)
In last month's column, I showed you how to create a Web page list without any bullets by using cascading style sheets (CSS). This month let's take the unbulleted list a step further by adding links and creating a rollover effect, again using CSS.

Here's our code for the list, with the addition of anchors to create hyperlinks. (I've left the URLs out to keep the code simple. This will not affect the end result we want.)

XHTML Code
<ul> <li><a href="">Item #1</a></li> <li><a href="">Item #2</a></li> <li><a href="">Item #3</a></li> <li><a href="">Item #4</a></li> </ul>

Now let's put each of our list items into a box of equal size and center the content. With this coding, each item will begin to look like a Web page button.

CSS Code
li {margin: 0; padding: 0; list-style-type: none; border: 1px solid #000; width: 8em;}

The next step will be to color the boxes. However, we don't want to change the background color of the items. Although this would accomplish what we want in the short-term, it will cause a problem later on. So let's add a background color to the anchors instead.

CSS Code
ul a {color: #fff; background: #6c3; text-decoration: none; display: block; padding:2px; margin:1px;} ul a:link {color:#fff;} ul a:visited {color:#fff;} ul a:active {color:#fff;}

The selectors in this case have been set to affect only anchors that are children of unordered lists (ul a). If we do not include "ul" in the selector, the code would affect every anchor on the Web page, which is not what we want. We want only to color the text in the list.

In the code, the color property turns the text black against the green set for the background of the anchor. The "text- decoration property" turns off underlining on the anchors.

Setting the display property to "block" forces the anchor to be treated as something that fills in the entire box we created. If we did not include this setting, the background color would display only behind the linked text and not fill the entire box.

Lastly, the "padding" property provides a small bit of space between the edges of the text and the edge of the background color, along with a margin setting that allows a small space between the background color and the box.

Here's the result:
To create the rollover effect, we add the following line of code:
Menu Buttons

CSS Code
ul a:hover {background:#cf9; color: #000}

This changes the background color of the box to a lighter shade of green and the link text to black when the mouse pointer moves over the link.

Here is our result:
Rollover effect

There is one small difference between the results in Mozilla-based browsers and Internet Explorer. In IE, the hover effect works only when the mouse pointer is over the linked text. In Mozilla-based browsers, the hover works whenever the mouse pointer is over any point within the box, not just the linked text.

Next Article | Previous Article | Table of Contents | BCR Publications