How to Create a Photographic Gallery Using CSS
By
|
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 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.
