How to Create a Photographic Gallery Using CSS

Introduction

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.

Now, there is now another way.

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>

Access FREE HP High-Availability Solutions for Exchange 2007 Tools:
Whitepaper: Backup and Recovery Best Practices for SQL Server 2005, Including HP Data Protector	Whitepaper: Configuration Best Practices for Microsoft SQL Server 2005 with HP EVA4000 and HP Blade Servers	Whitepaper: Best Practices for Microsoft Exchange 2007 with HP Server and Storage in Mid-range