How to use CSS to Create a 'Two Step' Photographic Gallery | 2

How to use CSS to Create a 'Two Step' Photographic Gallery

The Styling

Step 4

Removing the bullets

I'll style the unordered list to removing the bullets and the indentation.

Browsers have different ways of doing this, Internet Explorer and Opera use margin values for the indentation whereas Mozilla/Netscape/Firefox all use padding values, so to cater for this I need to style the list as follows.

/* Removing the list bullets and indentation */
ul#gallery {
  padding:0; 
  margin:0; 
  width:448px; 
  height:336px; 
  position:relative;
  list-style-type:none;
  background:#888;
  }
  • padding:0; - removes all padding.
  • margin:0; - removes all margins.
  • width:448px; - makes the total width 7 x 64px.
  • height:336px; - makes the total height 7 x 48px.
  • position:relative; - gives the ul a position relative so that we can position images absolutely.
  • list-style-type:none; - removes the bullets.
  • background:#888; - makes the background dark grey (for now).

‡ Example Step 4

The bullet point are gone and the grey background of the <ul> is visible. In Internet Explorer the grey background will stretched in height to enclose all the images, whereas in other browsers the images will overflow the grey background.

Step 5

Resizing the images

The initial size of the images was calculated to be 64px x 48px to act as 'thumbnails' around the outside of the display area.

However, I've decided to have a 1px border around each image to act as a separator. To do this I need to reduce the actual image size to 62px x 46px and the styling will be as follows:

/* Resize the images to 64px x 48px */
#gallery a img {
  position:relative;
  width:62px; 
  height:46px; 
  border:1px solid #888; 
  z-index:100;
  }

‡ Example Step 5

The images are now reduced to 62px x 46px with the 1px border being the same color as the background.

Step 6

Positioning the thumbnails

We now move on to positioning the thumbnail images around the edge of the display area.

To do this we will style the <li> tags.

Step 6a - moves the top line of thumbnails into place
/* Default style for list items */
#gallery li {
  width:64px; 
  height:48px; 
  float:left; 
  z-index:100;
  }

The images are now grouped in 4 rows with a blank space between image 17 and 18.

‡ Example Step 6a

Step 6b - moves the 'lft' styled list items to the left hand edge
/* Styling the left side of the display area */
#gallery li.lft {
  float:left; 
  clear:left;
  }

It's a bit of a jumble, but the left side of the display area is now filled.

Internet Explorer adds a small space vertically between each image but that will be taken care of later.

‡ Example Step 6b

Step 6c - moves the 'rgt' styled list items to the right hand edge
/* Styling the right side of the display area */
#gallery li.rgt {
  float:right; 
  clear:right;
  }

If you use Internet Explorer you'll see that the top, left and right images are in the correct place but the bottom row is not at the bottom. All other browsers have the images correctly positioned

‡ Example Step 6c

This is where that extra list item (class="pad") is brought into play. We can style this to force the bottom row of images into place.

Step 6d - moves the bottom row of thumbnails into place in Internet Explorer
/* Force the bottom row of images into place (IE only) */
#gallery li.pad {
  height:0; 
  display:block; 
  margin-top:-2px; 
  width:448px; 
  font-size:0;
  }

The bottom row of images are now in place but we still have gaps between the horizontal row of images in Internet Explorer.

‡ Example Step 6d

Step 6e - get rid of the gaps under the images in Internet Explorer
/* Getting rid of the image gaps */
#gallery a {
  position:relative; 
  width:64px; 
  height:48px; 
  display:block; 
  float:left; 
  z-index:100; 
  cursor:default;
  }

‡ Example Step 6e

Created: March 27, 2003
Revised: Sept 12, 2005

URL: http://webreference.com/programming/css_gallery2/1