Laying the Groundwork

The first thing we ought to do is take a look at the markup with which we'll be working. Here are the first two sets of images and information in the document:


<div class="pic ls"><a href="orig/img01.jpg" class="tn"><img

  src="tn/thumb01.jpg" alt=""></a><ul>

<li class="title">The Ferrett's Daffodil</li>

<li class="catno">03F01</li>

<li class="price">$79.95</li>

</ul></div>

<div class="pic pt"><a href="orig/img02.jpg" class="tn"><img

  src="tn/thumb02.jpg" alt=""></a><ul>

<li class="title">At Lunch</li>

<li class="catno">03F02</li>

<li class="price">$59.95</li>

</ul></div>

Whitespace Blues

Take a close look at the markup: Notice how the ul element has been moved right up against the link before it, and the div's closing tag is after it. This was done to avoid certain whitespace-triggered bugs in older versions of Explorer. It's unfortunate, but whitespace is still significant to some older browsers, and sometimes adding or subtracting whitespace can fix mysterious layout problems.

That's a lot of classes, and we ought to find out what they all mean. Fortunately, we have a style guide.

pic marks any div that contains a picture and its associated information. This helps keep these divs separate from any others that might be used.
ls means the picture has landscape orientation (it's wider than it is tall), whereas pt refers to a portrait orientation (taller than wide).
tn marks a link as being the hyperlink that's wrapped around the thumbnail image.
title marks the picture's title, catno its catalog number, and price… okay, that one is fairly obvious.

The really important classes are ls and pt, as we'll see soon enough, but all of them will come in handy. For example, we'll use those classes to set the height and width of the images. These aren't expressed in the HTML, as you can see. We know that our landscape thumbnails are 128 pixels wide by 96 pixels tall (with the portraits being 96x128), but we'll have to say so in the CSS before the project is done.

To get started, let's add some basic body and footer styles. For the body element, we'll just add a light tan background and some margins. We know we'll be using float a lot, and we want the footer to show up after the images, so we'll clear it. These actions are illustrated in Figure 2.1.


<style type="text/css">

body {background: #EED; margin: 1em;}

div#footer {clear: both; padding-top: 3em;

  font: 85% Verdana, sans-serif;}

</style>

Figure 2.1. Taking the first steps.

graphics/02fig01.jpg

These styles won't change throughout the rest of the project, so we won't have to worry about them again. With that out of the way, let's get down to business!

< Day Day Up >