How to Create a Photographic Gallery Using CSS [con't]
Removing the images
Well, almost removing them.
In order that the images are preloaded I must actually display them on the
screen but make them 'invisible.' I can do this by putting them in a container
(span) size of 1px by 1px and use an identical absolute position for each one
so that the are displayed on top of one other. This will have the effect of
displaying only the top left pixel of each image and showing a 1px 'dot' in
This will also hide the text associated with each image.
If you look very closely in the top left hand corner of the
#container divyou will see a 1px black dot. If you change the absolute position to top:-1px; left:-1px; the dot will be placed over the grey border of the
#container div; the position of the dot can be anywhere on the screen, the choice is yours.
The span overflow has been set to hidden to make sure that the rest of the image and the associated text is not displayed.
Other than this dot, the
#container div should now be empty.
Adding the thumbnails
Now that I have removed the images and text, I can move on to adding the thumbnails.
Using my favorite paint software I have reduced the size of each image by a ratio of 4:1 to create the thumbnails as shown below:
You will see that these images are large enough to have a reasonable image quality.
To display these images I need to set them as the background image of the link surrounding the list images. This is the most complex styling of the gallery.
This adds the styling that is common to all the links using the gallery class, then styles each unique list / link item using the 'slide letter' classes.
The example now shows the thumbnails as a vertical list of links, centrally placed in Internet Explorer and left aligned in all other browsers, with a default arrow cursor instead of the usual pointer.
I have added the 1px black border to each thumbnail, the left / right 2px margin
and a top / bottom margin of 1px. I have also set the text to be left aligned.
This will show up later when the text is displayed
Putting the thumbnails in order
Now that I have the thumbnails displayed I can place them in the correct column
/ row order. Because I have already worked out the size of the thumbnails to
allow either three portrait images or two landscape ones in a width of 198px,
I can style the
<ul> to be 198px wide. I will also have two rows of portrait
and three rows of landscape thumbnails each with a 1px border and a 1px top
/ bottom margin which gives a vertical height of 386px. To place the thumbnails
inline, I've added a left float to the
Now I can ADD the following to the list styling.
The gallery is beginning to take shape. The thumbnails are in order but still centered in the containing box in Internet Explorer and on the left side in all other browsers.
I have chosen to move them to the right hand edge. But this could equally as
well be the left hand edge. All that is needed to do this is to float the
to the right (or left).
I will also give the
<ul> a margin to space it away from the container
The thumbnails are now in position on the right hand side of the containing div in all browsers.
The actual position from the right hand edge will vary slightly between browsers. If this matters you can add a hack to target Internet Explorer to bring it into line with other browsers, but I don't see this as a problem.
All that is left to do is to add the :hover styles to the thumbnails, spans and images.
:hover style is a simple border color change from black to white.
If you now hover the mouse over the thumbnails you will see that the black borders will seem to vanish.
Next I will add the :hover span style. Since I have a relatively positioned #container div I can give the span an absolute position within this container (as I did at step 7 when hiding the images). I need to give this a width and height value of 372px to enable both portrait and landscape images to be fully displayed and a position of 10px from the top and 75px from the left to roughly center the images in the space available.
Hovering over the thumbnails will now make the full size images appear. You will notice that the text is only visible below the landscape images. This is because the portrait images take up all the available height so the text below the images is hidden.
To overcome this I need to style the images so that the text will appear to
one side when I display the portrait images. I can do this by using a left float
:hover img style. This will have no effect on the landscape images.
The text is now shown to the right of the portrait images and below the landscape images.
A few extra bits of styling
If I wanted to I could leave the styling as it is, but with just a little bit of extra styling I can improve the look and give a bit more variety to the gallery. I can easily style the middle portrait images to float right within their s so that the text will then appear on the left.
The images of MINIE and the WESTY PUP are now positioned to the right of their
<span> containers and the text is to the left.
When no images are displayed I am left with an uninteresting blank area on
the screen. This would look better if I had a default image with perhaps a gallery
title displayed. I can do this by adding a background image to the #container
div and, if this image is located in the same area as the span
:hover, it will
be hidden when I hover over a thumbnail images.
I have created this image for that purpose.
To add this to the
#container style I need the following.
The photographic gallery is now finished.
I hope that you have been able to follow this tutorial and that you will be tempted to give it a try. Don't be afraid to experiment with the layout (making sure that you understand each step before you do so), and remember that planning the layout is half the battle.
About the Author
Stu's Web site documents his attempts at understanding and exploring the possibilities of CSS. From standard navigation links to his more bizarre experimental techniques. [Editor's note: Prepare to be amazed!]
Original: April 12, 2005