HTML CSS PHP PERL

Creating the Contact Sheet View

 
Previous Page Table of Contents Next Page

Creating the Contact Sheet View

At this stage, we can see the document structure itself: images followed by unordered lists. What we're after at this point is the creation of a "contact sheet" layout, in which the images are all laid out in a grid. This will let us see as many images as possible at once.

Floating Away

Since we aren't using a table, the obvious solution is to float the images. We know the images are no more than 128 pixels wide or tall, so we'll make our divs 128x128 and give them a white background and black border. Speaking of borders, we want to get rid of the blue link-border around the images as well.

Border Incidents

graphics/warning_icon.jpg

Not all browsers will put a border around a linked image, but some will, so it's a good idea to explicitly get rid of the border. It won't hurt in browsers that didn't have a border in the first place.



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

  font: 85% Verdana, sans-serif;}

div.pic {float: left; height: 128px; width: 128px;

  background: white;

  border: 1px solid black;}

div.pic img {border: none;}

</style>

Figure 2.2. Floating the picture divs.

graphics/02fig02.jpg

We've already taken a huge step toward our contact sheet, but there's an obvious problemthe lists! Because we forced the divs to be a specific height, there isn't enough room for the lists, so they're spilling out of the divs and generally messing up our layout. We need to get rid of them for now, so we'll remove them from the display routines.

Explorer Watch

graphics/warning_icon.jpg

In Explorer for Windows, the lists will expand the divs instead of sticking out of them, leading to a very different but equally bad layout. This is a bug in Explorer 5+ that treats height as if it were min-height (which, ironically, Explorer doesn't support).



div.pic img {border: none;}

div.pic ul {display: none;}

</style>

This will keep the information from being displayed at all. We'll bring back the lists in future changes to the styles, but for now we'll just get rid of them.

Spacing and Centering

Thanks to the floating, we now have our images forming a grid, but it feels a little too confined. Let's spread out the pictures a bit by adding margins to the floats.


div.pic {float: left; height: 128px; width: 128px;

  margin: 5px 3px; background: white;

  border: 1px solid black;}

Because margin floats don't collapse together, the actual spacing between two floats sitting next to each other will be 6 pixels (3px + 3px), and there will be 10 pixels between a float and the one below or above it. This can be adjusted to whatever spacing one prefers, of course. What we have so far is shown in Figure 2.3.

Figure 2.3. Spreading the thumbnails apart.

graphics/02fig03.jpg

It's getting better and better, but the images look kind of weird as they are now, either up against the top of the box or against the left edge. They'd look much better centered within each box.

To do this, we should first define the size of the images. We can do this with two simple (and very similar) rules.


div.pic img {border: none;}

div.ls img {height: 96px; width: 128px;}

div.pt img {height: 128px; width: 96px;}

div.pic ul {display: none;}

All we've done here is express what we already knew to be true but the browser didn't: that landscape (ls) images are 96 pixels tall by 128 pixels wide and portrait (pt) images are the other way round.

Recall that our divs have been defined as 128x128 pixels. Now all we need to center the images are some margins on the images themselves. The difference between 128 and 96 is 32, and half of that is 16. Therefore, landscape images will need 16px of top and bottom margin, and portraits will need 16px of left and right margin. The result is shown in Figure 2.4.


div.ls img {height: 96px; width: 128px; margin: 16px 0;}

div.pt img {height: 128px; width: 96px; margin: 0 16px;}

Figure 2.4. Centering the thumbnails.

graphics/02fig04.jpg

Sliding into Style

That's already a decent layout, but let's take it a little further. Let's add some extra padding to the divs so that the thumbnails have white all the way around. We'll stick with our powers-of-two motif and add 16 pixels of padding.


div.pic {float: left; height: 128px; width: 128px;

  padding: 16px; margin: 5px 3px; background: white;

  border: 1px solid black;}

At this point, the contact sheet is beginning to resemble a collection of 35mm slides, so let's run with that idea. First we'll add a border back onto the images, one that makes them look like they've been inset into a slide frame.

Another Approach

graphics/note_icon.jpg

Instead of the technique shown, we could have used a single color and the border style inset, but there's a drawback to this approach: Browsers are allowed to modify the colors for inset (as well as outset, groove, and ridge) however they like. Predictably, they all do it differently. Thus, in cases in which the shading of a border is important, it's better to make the border solid and set the colors the way you want them.



div.pic img {border: 1px solid;

 border-color: #444 #AAA #AAA #444;}

These changes give all the images a dark gray top and left border, with a light gray right and bottom border. That's a decent enough inset effect.

However, there's a subtle imbalance that's been introduced by this rule. The images plus the borders are now longer than 128x96 pixels and vice versa; now they're 130x98 pixels because the borders are added to the height and width of the images. To address this, we'll need to alter the height and width declarations for the divs as well as the padding.


div.pic {float: left; height: 130px; width: 130px;

  padding: 15px; margin: 5px 3px; background: white;

  border: 1px solid black;}

With these small changes, we've restored the balance we had before. To finish the effect, let's create an outset effect for the border of the divs. All we need there is the same colors we used for the inset effect, except reversed.


div.pic {float: left; height: 130px; width: 130px;

  padding: 15px; margin: 5px 3px; background: white;

  border: 1px solid; border-color: #AAA #444 #444 #AAA;}

Note that we removed the keyword black from the border declaration. It isn't needed any longer thanks to the border-color declaration, so to save on file size, it was taken out. We can see the result in Figure 2.5.

Figure 2.5. A sheet of slides, or something very much like it.

graphics/02fig05.jpg

That's pretty close to looking like 35mm slides, but we can take the effect even further. Instead of relying on background color and borders, we can remove those and use a background image instead.

How? We already know the dimensions of the divs once all is said and done: They're 162x162 pixels. For example, landscape slides have the following dimensions along the horizontal axis:

128px img width + 2px img border + 30px div padding + 2px div border = 162 pixels total

Since we're going to be removing the borders on the divs, we can knock those off, leaving us with 160x160 pixels. Therefore, we'll make the background images for the divs that size. Because we have two kinds of images (portrait and landscape), we'll need two different backgrounds. We'll call them frame-pt.gif and frame-ls.gif. Whether they're created by scanning actual 35mm slide frames or by creating facsimiles in Photoshop is irrelevant. All we need is something that looks the part.

graphics/hand_icon.jpg

You can find images named frame-ls.gif and frame-pt.gif in the project files available on the book's companion site.


Once we've created the background images we need, all that remains is to add them to the styles. We'll start by applying the same image to all the divs, as well as removing our border styles.


div.pic {float: left; height: 130px; width: 130px;

  padding: 15px; margin: 5px 3px;

  background: url(frame-ls.gif) center no-repeat;}

This is great for the landscape thumbnails, but it will look weird when applied to the portrait images. So we just substitute the image we want used for portrait thumbnails with a short rule.


div.pic {float: left; height: 130px; width: 130px;

  padding: 15px; margin: 5px 3px;

  background: url(frame-ls.gif) center no-repeat;}

div.pt {background-image: url(frame-pt.gif);}

div.pic img {border: 1px solid; border-color: #444 #AAA #AAA #444;}

This will override the background image value while leaving the other keywords (center no-repeat) alone, making the declaration background-image: url(frame-pt.gif) functionally equivalent to declaring background: url(frame-pt.gif) center no-repeat. Figure 2.6 illustrates the result.

Figure 2.6. Now it really looks like a bunch of slides!

graphics/02fig06.jpg

That's a pretty nifty effect, eh? The great thing is that you can substitute the "frame" background with a better one later on just by updating the image files.

Listing 2.1 shows the slide-collection style sheet we've created in its entirety.

graphics/hand_icon.jpg

This might be a good time to save the work you've done in a separate file because the next section will remove many of these styles even as it adds new ones.


Listing 2.1. The Complete "Slides" Style Sheet

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

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

  font: 85% Verdana, sans-serif;}

div.pic {float: left; height: 130px; width: 130px;

  padding: 15px; margin: 5px 3px;}

  background: url(frame-ls.gif) center no-repeat;}

div.pt {background-image: url(frame-pt.gif);}

div.pic img {border: 1px solid; border-color: #444 #AAA #AAA #444;}

div.ls img {height: 96px; width: 128px; margin: 16px 0;}

div.pt img {height: 128px; width: 96px; margin: 0 16px;}

div.pic ul {display: none;}

    Previous Page Table of Contents Next Page
    © 2000- NIV