How to Create a Photographic Gallery Using CSS / Page 2 | WebReference

How to Create a Photographic Gallery Using CSS / Page 2


[previous] [next]

How to Create a Photographic Gallery Using CSS [con't]

My images are either 372px high by 240px wide (portrait format) or 240px high by 372px wide (landscape format). These sizes have been calculated for several reasons, namely:

  1. To enable the gallery to fit within a screen resolution of 800 x 600 pixels without the need for scrolling.
  2. To give thumbnail images of 93px by 60px (a quarter of the full size), which I consider to be large enough to give a good preview of the full size image.
  3. To enable me to place three portrait thumbnails OR two landscape thumbnails in a line using a border of 1 pixel and a left / right margin of 2 pixels.

A horizontal row of three portrait images, 60px wide, each one having a border of 1px and a left / right margin of 2px gives a total width of 3 times 66px which is 198px.

A horizontal row of two landscape images, 93px wide, each one having a border of 1px and a left / right margin of 2px gives a total width of 2 times 99px which is also 198px.

I find it best to sketch out a rough plan of the gallery before I begin to add the styling, this way I can calculate the best size for my thumbnails and full size images. A little bit of thought 'up front' will save a lot of frustration and redesign.

Step 2

The !DOCTYPE

Firstly and most importantly, make sure that you have the correct (X)HTML !DOCTYPE. Without this most browsers will be thrown into 'quirks' mode which will lead to all sorts of incompatibility problems. W3C QA - List of valid DTDs has a list of valid DOCTYPES that can be used. Select from XHTML1.0 or XHTML1.1 as these are more suitable for this styling. I use XHTML1.1 for all my current web pages.

Step 3

Adding links and style information

In order that I can use the :hover pseudo class style I need to change the basic unordered list into an unordered list of links. This is because Internet Explorer will only allow :hover to be used on links. I also need to add extra markup to target specific images.

The (x)html will now look like this:

‡ Style Ready List

Every list item is now enclosed in a link which has a common gallery class and a unique slide letter class. They are also further enclosed by a span which does not have any specific class or id.

I have used href="#nogo" instead of the more usual href="#" so that anyone clicking the link will not jump to the top of the page (just make sure you do not have an anchor #nogo on your page). You can, if you wish use this to link to take visitors to a larger image on a new page.

The (x)html unordered list is now complete and I will not need to make any more changes to it.

The Styling

Step 4

The body

The <body> is first to be styled with the font-family for the whole page. I have chosen Tahoma as the first choice but you can select any font you wish. I have also chosen a font size of 76% as this is gives a suitable default size for most screen resolutions. It also allows Internet Explorer users to resize the font if they wish.

I have added text-align:center; so that Internet Explorer will place the #container div centrally (left / right) on the page. This will only target Internet Explorer and Opera, all other browsers will ignore this styling. I will use the 'correct method' as described in Step 4 to target all other browsers.

‡ Example #1

Step 5

The container

In order that the gallery can be viewed at a resolution of 800 x 600 I will limit the #container div to a fixed size of 770px wide by 396px high. I will also add a 1px thick grey border.

This is fairly straightforward to style as seen below:

‡ Example #2

I have given this div a relative position so that I can position the gallery images within it using absolute positions. The margins have been given a left / right value of auto so that all browsers, except Internet Explorer (which has been taken care of in Step 3 above), will center the div (left / right) on the page.

Depending on which browser you are using you will see either the images overflowing the container or the images held within an expanded container. The 'correct' interpretation is that the images should overflow the container.

Step 6

Removing the bullets

I will need to style the unordered list by 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.

‡ Example #3

Now the bullets are gone.


[previous] [next]