simonshullfoust.com

Using CSS With Images: Mini-Gallery

Recently I was working on a proposed redesign for one of my clients product pages, and I wanted to use one space to display the product image and any secondary images. I didn’t want to display all of them at once, because I didn’t want to take up that much space. So I decided to use css to create a mini-gallery or mini-slideshow of sorts. Here’s how I did it.

First, I decided what size I wanted my main images to be - in this case, 300 x 300 pixels. I also knew that I wanted them to have a 5 pixels padding and a border, because I like that effect. I knew some of my images in the Surplus database weren’t square, so I decided to leave the border off of the images and just keep the padding:

.imagePadding { padding: 5px; }

I created a div container called “secondaryImage” and styled it with the border. This way, if an image isn’t square, the border around it will still be square. With a 5 pixel padding, that brings my div to 310 x 310 pixels, with a hidden overflow (no scroll bar) for reasons that will become apparent later:

#mainImage {
width: 310px;
height: 310px;
border: 1px solid #c0c0c0;
overflow: hidden; }

Now, I decided to put the images in a list with no bullets (list-style: none), and simply specify the height of each <li> so that even if an image isn’t the full span of the div (300 x 300), only one image will be showing at a time. The css looks like this:

#mainImage ul { list-style: none; }

#mainImage li {
width: 310px;
height: 310px; }

Next I want to create small thumbnails of the three images so that when clicked, the main image appears in the main image box. I’ll make these about 30 x 30 pixels and give them a border. In the html, I’ll put them in a list and style them in the css to appear below the main image box. The css looks like this:

#thumbs {
list-style: none;
clear: both; }

#thumbs li {
float: left;
margin: 3px 10px 0 0; }

#thumbs li a:link, #thumbs li a:active, #thumbs li a:visited, #thumbs li a:hover {
width: 30px;
height: 30px;
display: block;
border: 1px solid #c0c0c0; }

One final thing I want to do to the css is to use a wildcard margin and padding line so that all margins and padding are set to 0, giving me greater control over these elements. This is a good thing to do because different browsers have different default margins and padding, so it is good to make everything 0 unless specified. And while we’re at it, let’s specify that images should not have borders unless specified, otherwise images that are enclosed in anchors (links) will have a border. To do this simply use:

* { margin: 0; padding: 0; }

img { border: 0; }

The final result looks like this. Click here for the full html, and here for the full css.

Tags: css
Written by Simon Shull Foust on November 11th, 2007 · Comments (0)