Divs or Unordered List For Creating a Thumbnail Gallery

[Ed]

Just starting out trying to learn XHTML/CSS and, to this end, I have a
project to create a thumbnail gallery in which I can click on any image
to display the full size picture. And I want to do this without using
frames or tables. I've come across two approaches to this.

The first is to put each thumbnail in its own div (all with the same
class) and then use CSS to float these left and to add style:

<div class="thumbnail"><a href="page5.htm"><img src="imgp0416_tmbn.jpg"
alt="pic" height="125" />Image 416</a></div>

<div class="thumbnail"><a href="page3.htm"><img src="imgp0382_tmbn.jpg"
alt="pic" height="125" />Image 382</a></div>

<div class="thumbnail"><a href="page4.htm"><img src="imgp0383_tmbn.jpg"
alt="pic" height="125" />Image 383</a></div>


In the second approach, each thumbnail is placed in an unordered list
like so:

<div class="thumbs">
<ul>

<li><a href="page5.htm"><img src="imgp0416_tmbn.jpg" height="125"
alt="[pic]" />Image 416</a></li>

<li><a href="page3.htm"><img src="imgp0382_tmbn.jpg" height="125"
alt="[pic]" />Image 382</a></li>

<li><a href="page4.htm"><img src="imgp0383_tmbn.jpg" height="125"
alt="[pic]" />Image 383</a></li>

</ul>
</div>

Again, CSS is used to float the images to the left and apply style.

Both approaches give me the same result. But is one method considered
more strict? Are there any inherent advantages/disadvantages to one
approach over the other?

I would appreciate any advice based on the experience of this group,
though I suspect that this is a project that has been done umpteen times
by people here so may not be of any interest to you But, for me, it is
new, and I'd like to get off to a good start.

Thanks,
Ed

 

[Andy Dingley]

And I want to do this without using
frames or tables.

Frames suck, tables don't. Just because some people have mis-used
tables in the past doesn't mean you should avoid them.

The first is to put each thumbnail in its own div (all with the same
class) and then use CSS to float these left and to add style:

In the second approach, each thumbnail is placed in an unordered list
like so:

Both approaches give me the same result. But is one method considered
more strict? Are there any inherent advantages/disadvantages to one
approach over the other?

CSS can control almost every display behaviour. You can make a <u>
look like a <menu> if you want to. It can't change the DTD behaviour
though, so anything that's defined at that level you're stuck with
(learn to read DTDs, and learn to understand the difference between
block and inline elements)

It's entirely possible (and sometimes done) to make your entire page
out of <div> and <span> with some classes to tie-in the CSS. This
isn't good practice though.

A good design principle for CSS-dependent HTML is to imagine how the
page will behave _without_ any CSS. Think about the semantics of HTML
alone and build a page using that. Don't worry how ugly it is, just
think about it as a text-only spider would see it. Then apply CSS to
make it look however you wish.

Another advantage of this technique is that it degrades well on
limited display devices - you should be caring about how pages are
rendered on phones these days, not just IE and Lynx.

Don't be afraid to strip all the default display behaviour from a <li>
if you want - stick them as absolute positioned images in a circle, if
that's what the design calls for. The crucial aspect of list behaviour
is that it's a set of items with some connection between them - so in
your case, <ul> <li> is a better choice than a sequence of unconnected
<div>s.

On the whole though, I'd go for a <table>. Your data is a set of
thumbnail icons and this has as much right to be regarded as "tabular
data" as any phone directory does.

 

[Toby Inkster]

It's entirely possible (and sometimes done) to make your entire page
out of <div> and <span> with some classes to tie-in the CSS. This
isn't good practice though.

With display:block, why do you need <div>?

The minimum elements you need for a validating HTML 4.01 Transitional page
that could look virtually however you liked would be <title>, <a> and
either <link>, <style> or <script> to apply the styling information.

 

[Toby Inkster]

On the whole though, I'd go for a <table>. Your data is a set of
thumbnail icons and this has as much right to be regarded as "tabular
data" as any phone directory does.

Fooey!

It's tabular data if you do this:

Umbrella Car Boat
Red [Red umbrella] [Red car] [Red boat]
Blue [Blue umbrella] [Blue car] [Blue boat]
Pink [Pink umbrella] [Pink car] [Pink boat]

(Where the sqaure bracketed strings represent images)

That's because there's a legitimate association between all the cells in
each row, and between all the cells in each column.

This is not tabular data though:

[Goat] [Turkey] [Umbrella]
[Car] [Cat] [Boat]
[Pineapple] [Map of Egypt] [Clint Eastwood]
[Smith family] [Guitar] [Chicken]

Because there are no associations between rows and columns -- it is merely
utilising a grid for layout purposes, so shouldn't use an HTML table.

 

[Andy Dingley]

With display:block, why do you need <div>?

You don't .

But you do need <span>, because the DTD won't let you have
<a ...> foo <div> bar </div></a>
You could manage with one of them alone, but not <div> alone.


However this is a crazy example, so it's best not to worry too much
about it.

 

[Andy Dingley]

Because there are no associations between rows and columns -- it is merely
utilising a grid for layout purposes, so shouldn't use an HTML table.

IMHO, a grid for layout purposes (as a grid) is a legitimate table.
That is a control of the inherent _topology_, which requires control
of the HTML not just CSS.

A table for setting column-widths isn't legitimate. That's taking the
topology of plain old linear HTML and merely tweaking the sizes.