Tables or no tables?

[TobyA]

Hi,

I am trying to layout thumbnails on a page but I'm running into difficulties using CSS...

http://www.19august2005.co.uk/tracy/weddings.htm

I was considering making all the thumbnail images square and arranging them in a 3x3 square.

Would the use of a table be considered deprecated for this application?

(The problem with the current design is that the <br> affects the right hand side image, which is supposed to be flush with the top menu).

Any help would be greatly appreciated!

Cheers,
Toby

 

[Foamcow]

How about this?
Make all your thumbnails the same size, say 100x100 pixels
Place the thumbnails in an element with a fixed width (i.e. a div) of say 324 pixels.
Then simply throw your 9 thumbnails in, all floated left with a 4 pixel margin, and they will set themselves up into a nice grid.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Foamcow]

I meant to add, that if you find yourself replicating a table by creating classes for rows etc then you may as well use a table.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[TobyA]

Thanks Foamcow!

It had the same result initially (e.g. it pushed the big image down). However I put the big image first in the markup (see below) and it's done the job!

Cheers,
Toby

<img id="imgZoom" class="mainpic" src="images/wedding001.jpg" />

<div class="thumbnails">
<img src="images/red.gif" class="weddingThumb" />
<img src="images/green.gif" class="weddingThumb" />
<img src="images/purple.gif" class="weddingThumb" />
<img src="images/yellow.gif" class="weddingThumb" />
</div>

 

[Bebe56]

css:
img.mainpic {float:right;}

htm:
<div class="content">

<img id="imgZoom" class="mainpic" src="weddings_files/wedding001.jpg">

<img src="weddings_files/wedding001_thumb.jpg" class="weddingThumb">
<img src="weddings_files/wedding002_thumb.jpg" class="weddingThumb">
<img src="weddings_files/wedding003_thumb.jpg" class="weddingThumb">
<br clear="left">
<img src="weddings_files/wedding004_thumb.jpg" class="weddingThumb">
</div>