Laying the Groundwork

Since we're going to focus on ways to style an unordered list of links within an existing design, we'll start with some CSS already applied. The starting style sheet is provided in Listing 5.1 and illustrated by Figure 5.1.

Figure 5.1. The design as it now stands.

graphics/05fig01.jpg

Second Time Around

Readers of Eric Meyer on CSS may recognize the design in this project because it's taken from that book's Project 9, "Multicolumn Layout." The difference here is that the links are now contained in an unordered list, and the entry text is from another date.

Listing 5.1. The Starting Styles


<style type="text/css">

html {margin: 0; padding: 0;}

body {font: 80% Verdana, Arial, Helvetica, sans-serif;

   margin: 0; padding: 0;

   background: rgb(95%,95%,80%); color: black;}

h1 {font-size: 200%; text-transform: lowercase; letter-spacing: 3px;

   margin: 0; padding: 0.66em 0 0.33em 29%;

   background: rgb(85%,85%,70%);}

h3 {font-size: 1.33em; margin: 0; padding: 0; 

   border-bottom: 1px solid black;}

h4 {font-size: 1em; margin: 0; padding: 0.33em 0 0; 

   border-bottom: 1px solid rgb(50%,50%,35%);}

h1, h3, h4 {line-height: 1em;}

p {line-height: 1.5; margin: 0.5em 0 1em;}

div#entry {margin: 2em 10% 1em 30%; padding: 0;}

div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%;}

</style>

Basically, all we need to do is style the list of links so that it fits in better with the rest of the design. In the course of doing this, we'll actually look at a few different presentation options for the same list.

Examining the Markup

To properly plan our styling, we need to get a look at the markup that contains the links. It's shown in Listing 5.2.

Listing 5.2. The Markup for the Links


<div id="sidebar">

<h4>Other Mutters</h4>

<ul>

<li><a href="mutter01.html">13 September 2002</a></li>

<li><a href="mutter02.html">6 September 2002</a></li>

<li><a href="mutter03.html">25 October 2002</a></li>

<li><a href="mutter04.html">8 November 2002</a></li>

<li><a href="mutter05.html">14 November 2002</a></li>

<li><a href="mutter06.html">17 November 2002</a></li>

<li><a href="mutter07.html">3 December 2002</a></li>

<li><a href="mutter08.html">4 December 2002</a></li>

</ul>

</div>

It's straightforward enough: a simple, unordered list with a link inside each list item. This probably comes as no surprise, given what we saw in Figure 5.1, but it was worth taking a look to see what we had available.

Explorer Jog

If you're working on this project in IE/Win, you might notice a small "jog" in the text the flows past the floated sidebar. This is due to a bug in IE, but fortunately it's one that can be worked around. Space prevents us from exploring it here, but you can get all the details at http://www.positioniseverything.net/explorer/threepxtest.html.

The first thing we'll want to do is get rid of the bullets and indentation of the list itself. Since this will be constant across all the design ideas we'll try out, we'll do it now to beat the rush.


div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%;}

#sidebar ul {list-style: none; margin: 0; padding: 0;}

</style>

By removing all padding and margin, we've made sure to eliminate the usual "indent" effect that lists have. Since some browsers use margin to create that indentation and others use padding, zeroing out both covers our bases, as we can see in Figure 5.2.

Figure 5.2. The list bullets and indentation are removed.

graphics/05fig02.jpg

Now we can try various design ideas for our list of links.

Table of Contents