How to Create a Photographic Gallery Using CSS

One of the many uses for personal and professional web site is to display a gallery of photographs that show off your skills with a camera. Until now these galleries have been produced using javascript, PHP or CGI.

With this article I hope to show you how to produce a professional quality photograph gallery using nothing more than an unordered list of photographs and a Cascading Style Sheet (CSS). I will take you through the styling one step at a time and end up converting:

Each step will be thoroughly explained and will have an example page showing the effect of the additional styling so that you can see what to expect.

The photograph gallery will work in all the latest browsers and I have included hacks enabling Internet Explorer 5.5 to interpret the style correctly. The styling is not too long or difficult, but the layout will need a lot of attention to detail and pre-planning.

Method

Step 1

The images

I have found that this gallery will load fairly quickly with up to twelve medium sized (approximately 400px by 250px and 15-20KB) images, as it requires all the images to be preloaded before it will work. Any more than this will cause the page loading time, in my opinion, to become unacceptable. You may find that this is not the case with your images but it is best to test this out before you begin.

Start with your basic unordered list and see how long this takes to load (emptying your cache before you do so). I have chosen twelve images of dogs comprising 6 in portrait format and six in landscape. The basic (x)html list is given below.

<div id="container">
  <ul>
    <li>
      <img src="../images/p1.jpg" alt="Alpha" title="Alpha" />
      <br />
      ALPHA
      <br />
      Photographed by Dorota Mrowka, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p2.jpg" alt="Minie" title="Minie" />
      <br />
      MINIE
      <br />
      Photographed by José Antonio Assis, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p3.jpg" alt="Megan" title="Megan" />
      <br />
      MEGAN
      <br />
      Photographed by Rob Waterhouse, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p4.jpg" alt="Nancy" title="Nancy" />
      <br />
      NANCY
      <br />
      Photographed by Philip Keller, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p5.jpg" alt="Missy" title="Missy" />
      <br />
      MISSY & PANDA
      <br />
      Photographed by Kat Shurtz, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p6.jpg" alt="Stray pup" title="Stray pup" />
      <br />
      STRAY PUP
      <br />
      Photographed by Bethan Hazell, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p7.jpg" alt="Rolo" title="Rolo" />
      <br />
      ROLO
      <br />
      Photographed by Paul Leach, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p8.jpg" alt="Gigio" title="Gigio" />
      <br />
      GIGIO
      <br />
      Photographed by Davide Guglielmo, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p9.jpg" alt="Westy pup" title="Westy Pup" />
      <br />
      WESTY PUP
      <br />
      Photographed by Rob Waterhouse, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p10.jpg" alt="Giga Byte" title="Fishing" />
      <br />
      GIGA BYTE
      <br />
      Photographed by Jefras, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p11.jpg" alt="Puppy" title="Puppy" />
      <br />
      PUPPY
      <br />
      Photographed by Clodiney Cruz, courtesy of the stock.xchng
    </li>
    <li>
      <img src="../images/p12.jpg" alt="Buffy" title="Buffy" />
      <br />
      BUFFY
      <br />
      Photographed by Rob Waterhouse, courtesy of the stock.xchng
    </li>
  </ul>
</div>