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;
  }

position:relative; - no purpose other than we can now specify a z-index.
width:62px; - makes the width 62px.
height:46px; - makes the height 46px.
border:1px solid #888; - adds a 1px border dark grey.
z-index:100; - applies a z-index of 100 to make sure that the thumbnails stay visible on the top layer.

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;
  }

width:64px; - makes the width 64px.
height:48px; - makes the height 48px.
float:left; - floats all the images left as a default.
z-index:100; - ensures that the thumbnails are always visible.

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;
  }

float:left; - moves images to the left hand edge.
clear:left; - clears any previously floated images so that they appear beneath each other.

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;
  }

float:right; - moves images to the right hand edge.
clear:right; - clears any previously floated images so that they appear beneath each other.

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;
  }

height:0; - the <li> takes up no room on the grid.
display:block; - gives the <li> a block display.
margin-top:-2px; - gets rid of the top margin that Internet Explorer gives as default.
width:448px; - makes the <li> as wide as the <ul>.
font-size:0; - makes sure that the <li> height is zero by setting a font size of 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;
  }

position:relative; - this is required to allow us to set a z-index.
width:64px; - makes each link 64px wide.
height:48px; - makes each link 48px high.
display:block; - gives the links a block display.
float:left; - THIS gets rid of the vertical gaps in Internet Explorer.
z-index:100; - makes sure that the links are always on top (top layer).
cursor:default; - changes the normal link pointer (hand) to the default arrow.

Example Step 6e

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

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

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