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:
- To enable the gallery to fit within a screen resolution of 800 x 600 pixels without the need for scrolling.
- 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.
- 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.
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.
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:
Every list item is now enclosed in a link which has a common
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.
<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
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.
In order that the gallery can be viewed at a resolution of 800 x 600 I will
#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:
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.
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.
Now the bullets are gone.