Using CSS for Thumbnail Presentation

[frankdux]

Ok, so I am trying to get with the program and stop using tables and html for presentation and use CSS instead. My question for the CSS gurus is, if I am need to have a page with 16 thumbnails (4 x4) what is the proper combination of CSS and HTML to use? The old way would have me using tables, tr's and td's. Would I just use a bunch of nested DIV's? Or is the old way still appropriate in this case?

[Xerxos]

well you can go for div for every image and set it float: left; and width that it has to have that is what I would do...
i dont suppose you need nested divs, why that?

[Paul O'B]

Hi,

Well it all depends if the images are to be centred or not and if they are captioned or not.

If they have no captions then the simplest way is to leave them inline and just give them a margin to space themselves. No divs or html needed. You can even centre them using text-align:centre if they remain inline.

However if they have captions then you will need to float them left in a div and put the caption underneath. This means that they won't all be centred on the page.

There is a complicated method that I devised and I'm only showing it for interest but this method will allow captioning and centering but may be a step too far for such a simple task.

http://www.pmob.co.uk/temp/centremultipledivs.htm

If the images have captions and need to centred then a table would be ok to use and may be the easiest solution.

Alistapart has an article on floating images with captions that you might find useful.

http://www.alistapart.com/articles/practicalcss/

Hope that doesn't beg more questions than answers

Paul

[frankdux]

Paul,

Thanks for your reply. The images do require centering and captions. Your recommedations don't beg more questions than answers, but what it's telling me is that it will take further development of CSS before one can completely stop using HTML for presentation. For now I'll continue to use mostly CSS or a combo of HTML/CSS. In this case of my thumbnail presentation I think I'll either use tables or try the AListApart method.