Thumbnail gallery without tables?

[Max Quordlepleen]

Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.

I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.

Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of table-less thumbnails, and one example of an
approach that worked was
http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
renders properly for me in my Gecko browsers, and iCapture shows it as
rendering properly in Safari, but in IE6, the thumbnails are lined up
vertically in a single column. I am very pleased to have been able to
avoid using any tables at all so far, and would love to keep this
up. May I ask for suggestions on how to achieve a plain, boring
table-like gallery in CSS2, sans tables?

--
Democracy is a form of government that substitutes election by the
incompetent many for appointment by the corrupt few. - G. B. Shaw

[Els]

Max Quordlepleen wrote:

Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.

I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.

Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of table-less thumbnails, and one example of an
approach that worked was
http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
renders properly for me in my Gecko browsers, and iCapture shows it as
rendering properly in Safari, but in IE6, the thumbnails are lined up
vertically in a single column.
Not in my IE6.0....
I am very pleased to have been able to
avoid using any tables at all so far, and would love to keep this
up. May I ask for suggestions on how to achieve a plain, boring
table-like gallery in CSS2, sans tables?

give them 'display:inline'. This way you can center them or
left align them, just like regular text.
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Lauri Raittila]

In article Max Quordlepleen wrote:

Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.

I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.

Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of table-less thumbnails, and one example of an
approach that worked was
http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
renders properly for me in my Gecko browsers, and iCapture shows it as
rendering properly in Safari, but in IE6, the thumbnails are lined up
vertically in a single column.
Could you specify which IE6 minor version? On what platform? IIRC have
tested on XP and 2000.
I am very pleased to have been able to
avoid using any tables at all so far, and would love to keep this
up. May I ask for suggestions on how to achieve a plain, boring
table-like gallery in CSS2, sans tables?

how about:
http://www.student.oulu.fi/~atlas/kuvat/

Does it happen there too?

(special interest as I did both sites)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Lauri Raittila]

In article Els wrote:

Max Quordlepleen wrote:

Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.

I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.

Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of table-less thumbnails, and one example of an
approach that worked was
http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
renders properly for me in my Gecko browsers, and iCapture shows it as
rendering properly in Safari, but in IE6, the thumbnails are lined up
vertically in a single column.

Not in my IE6.0....

I am very pleased to have been able to
avoid using any tables at all so far, and would love to keep this
up. May I ask for suggestions on how to achieve a plain, boring
table-like gallery in CSS2, sans tables?

give them 'display:inline'. This way you can center them or
left align them, just like regular text.

Display:inline should not work as it does in IE, so it is useless when
you have captions.

but:
http://www.student.oulu.fi/~laurirai/www/css/gallery/

Uses inline for IE and inline-table for Opera 6 and 7 and bugless
browsers. Tried to aply float:left for mozilla, but html*somthing bug is
fixed in gecko, and it don't work anymore.

Why they don't they fix bugs that do some real harm, instead of fixing
useful bugs? There has been no big CSS fixes since Mozilla 1.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Max Quordlepleen]

Els <el*********@tiscali.nl> writes:

Not in my IE6.0....

Now _that's_ weird. My HTML editor is set to invoke my default browser
(K-Meleon), and my IE6, so that I can see how pages look in both. When
I open this page in the editor, and invoke IE6, the thumbs are
vertically aligned. When I paste the URL into an already open IE6
address bar, they are properly aligned. Very strange. Sorry for
troubling you, and thanks for the prompt, helpful response.

--
Life? Don't talk to me about life!

http://www.maxqnz.com/References.html

[Els]

Lauri Raittila wrote:

In article Els wrote:

Max Quordlepleen wrote:

I am very pleased to have been able to
avoid using any tables at all so far, and would love to keep this
up. May I ask for suggestions on how to achieve a plain, boring
table-like gallery in CSS2, sans tables?
give them 'display:inline'. This way you can center them or
left align them, just like regular text.

Display:inline should not work as it does in IE, so it is useless when
you have captions.

True, I wasn't thinking of captions, actually, just the thumbs.
but:
http://www.student.oulu.fi/~laurirai/www/css/gallery/

Uses inline for IE and inline-table for Opera 6 and 7 and bugless
browsers. Tried to aply float:left for mozilla, but html*somthing bug is
fixed in gecko, and it don't work anymore.
The work of a webmaster/designer is never done...
All these manufacturers of browsers should really have a
maillist for webmasters, in which they tell exactly which
bugs they fix everytime they do... together with a
workaround if it was a useful bug ;-)

On a recent site I already resorted to little tables (two
cells) inside divs floating left. (where i didn't need it
centered)
That way I was able to define a height to the thumb and
caption together, so that when the caption is more than one
line, the divs don't start piling up at the end of the row.
Also it made it possible to have the horizontal thumbs not
top align with the vertical thumbs.
Why they don't they fix bugs that do some real harm, instead of fixing
useful bugs?
Maybe the useful bugs are just easier to fix :-)
There has been no big CSS fixes since Mozilla 1.

Good, I haven't memorized all CSS rules and bugs yet. Let 'm
wait till I have ;-)

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Richard]

Lauri Raittila wrote:

In article Max Quordlepleen wrote:

Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.

I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.

Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of table-less thumbnails, and one example of an
approach that worked was
http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
renders properly for me in my Gecko browsers, and iCapture shows it as
rendering properly in Safari, but in IE6, the thumbnails are lined up
vertically in a single column.

Could you specify which IE6 minor version? On what platform? IIRC have
tested on XP and 2000. I am very pleased to have been able to
avoid using any tables at all so far, and would love to keep this
up. May I ask for suggestions on how to achieve a plain, boring
table-like gallery in CSS2, sans tables?

how about:
http://www.student.oulu.fi/~atlas/kuvat/ Does it happen there too? (special interest as I did both sites)

Good job too. Shows up in my IE 6 just fine. The sites show 3 across.
1024x768.

[Sid Ismail]

On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <ma**@nonags.com>
wrote:

: and one example of an
: approach that worked was
: http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
: renders properly for me in my Gecko browsers, and iCapture shows it as
: rendering properly in Safari, but in IE6, the thumbnails are lined up
: vertically in a single column. I am very pleased to have been able to
: avoid using any tables at all so far, and would love to keep this
: up. May I ask for suggestions on how to achieve a plain, boring
: table-like gallery in CSS2, sans tables?
What in heaven's name is wrong with using tables for this application?
Especially if you have text captions under/above each image.

Tables is more universal than souped-up morse code.

Sid

[Els]

Sid Ismail wrote:

On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <ma**@nonags.com>
wrote:

: and one example of an
: approach that worked was
: http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
: renders properly for me in my Gecko browsers, and iCapture shows it as
: rendering properly in Safari, but in IE6, the thumbnails are lined up
: vertically in a single column. I am very pleased to have been able to
: avoid using any tables at all so far, and would love to keep this
: up. May I ask for suggestions on how to achieve a plain, boring
: table-like gallery in CSS2, sans tables?

What in heaven's name is wrong with using tables for this application?
Especially if you have text captions under/above each image.

(lack of) flexibility :-)

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Max Quordlepleen]

On Mon, 23 Feb 2004 22:11:26 GMT, Lauri Raittila
<la***@raittila.cjb.net> proffered, in :
news:MP************************@news.individual.ne t:

Could you specify which IE6 minor version? On what platform? IIRC
have tested on XP and 2000.

I am very pleased to have been able to
avoid using any tables at all so far, and would love to keep this
up. May I ask for suggestions on how to achieve a plain, boring
table-like gallery in CSS2, sans tables?

how about:
http://www.student.oulu.fi/~atlas/kuvat/

Does it happen there too?

(special interest as I did both sites)

Sorry, Lauri, it must have been some snafu when I downloaded the pages
to dissect in my HTML editor. when I visit the pages using IE6, they
are just fine. My sincere apologies.

--
Please do not press this button again

http://www.maxqnz.com/References.html

[Nik Coughin]

Sid Ismail wrote:

What in heaven's name is wrong with using tables for this application?
Especially if you have text captions under/above each image.

Tables is more universal than souped-up morse code.

Sid

Tables aren't the best or even the simplest way to do it.

Far from "souped-up morse code", a simple CSS thumbnail gallery would look
like this:

CSS:

..thumbnail{float: left;text-align: center;}

gallery:

<span class="thumbnail><img src="thumb1.gif" alt ="thumb 1" /><br />Caption
For Thumb 1</span>
<span class="thumbnail><img src="thumb2.gif" alt ="thumb 2" /><br />Caption
For Thumb 1</span>
etc.

That's a hell of a lot simpler than using tables. I should know, I
converted my table-based thumbnail gallery to a CSS-based one today.

Also, a table is going to be a fixed number of cells wide. This means that
your gallery is a fixed number of thumbs wide. The above will fit as many
thumbs as possible into the space available horizontally and wrap the rest
onto the next line. If you *want* it to be a fixed number of thumbs wide
then you wrap it in a div that only has room for that many thumbs.

If you want to apply styling to every thumb, you only have to add more
attributes to the CSS part.

CSS is a far superior way of doing thumbs than a table. That's what's wrong
with using tables for this application.

I don't agree with the argument that you shouldn't use tables for layout
because they are intended for tabular data. I think you shouldn't use
tables for layout because once you understand CSS it gives you much more
power, is much more flexible and is simpler to implement than a table. It's
simply a better way of doing things. You're limiting yourself if you use
tables.

[Andrew Urquhart]

"Sid Ismail" <el***@nospam.com> wrote in message
news:l3********************************@4ax.com...

On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <ma**@nonags.com>
wrote:

: and one example of an
: approach that worked was
: http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
: renders properly for me in my Gecko browsers, and iCapture shows it as
: rendering properly in Safari, but in IE6, the thumbnails are lined up
: vertically in a single column. I am very pleased to have been able to
: avoid using any tables at all so far, and would love to keep this
: up. May I ask for suggestions on how to achieve a plain, boring
: table-like gallery in CSS2, sans tables?
What in heaven's name is wrong with using tables for this application?
Especially if you have text captions under/above each image.

Tables is more universal than souped-up morse code.

Sid

With either method (tables or divs) there could be a loss of semantic
information depending on the implementation. For example if captions are a
seperate table row then the connection between the image and the caption may
not work very well for browsers rendering the content in non-visual ways,
although obviously the title attribute would help here.

As an alternate method I built a photo gallery as a collection of nested
lists, although it doesn't have explicit captions it might make more
semantic sense, but I'm still trying to decide:
http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
alone]
--
Andrew Urquhart
http://www.andrewu.co.uk/about/conta...ewsgroup_ciwas

[Els]

Andrew Urquhart wrote:

"Sid Ismail" wrote:

What in heaven's name is wrong with using tables for this application?
Especially if you have text captions under/above each image.

Tables is more universal than souped-up morse code.
With either method (tables or divs) there could be a loss of semantic
information depending on the implementation. For example if captions are a
seperate table row then the connection between the image and the caption may
not work very well for browsers rendering the content in non-visual ways,
although obviously the title attribute would help here.

What about my mix of div's and tables here:
http://www.mediatech.nl/~rachel/Rach...hcaptions.html
(don't click the links, or you'll go into the site I
borrowed the pics from ;-) )
Would it lose semantic information? It's completely
flexible, only left aligned, while I'd wish it to be
centered, but that's ok.
As an alternate method I built a photo gallery as a collection of nested
lists, although it doesn't have explicit captions it might make more
semantic sense, but I'm still trying to decide:
http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
alone]

Looks very nice, but why did you put all these widths and
heights in? The heights are all equal, and the widths don't
matter, as far as I can see. And you are saying 128kb of
markup, well, that might have to do with the length of your
uri's :-D

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Nik Coughin wrote:

Sid Ismail wrote:

What in heaven's name is wrong with using tables for this application?
Especially if you have text captions under/above each image.

Tables is more universal than souped-up morse code.

Tables aren't the best or even the simplest way to do it.

Far from "souped-up morse code", a simple CSS thumbnail gallery would look
like this:

CSS:

.thumbnail{float: left;text-align: center;}

gallery:

<span class="thumbnail><img src="thumb1.gif" alt ="thumb 1" /><br />Caption
For Thumb 1</span>
<span class="thumbnail><img src="thumb2.gif" alt ="thumb 2" /><br />Caption
For Thumb 1</span>
etc.

That's a hell of a lot simpler than using tables. I should know, I
converted my table-based thumbnail gallery to a CSS-based one today.

Just out of curiosity on the subject, could you give a url
to that gallery you just converted?
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Nik Coughin]

Els wrote:

Nik Coughin wrote:

Sid Ismail wrote:

What in heaven's name is wrong with using tables for this
application? Especially if you have text captions under/above each
image.

Tables is more universal than souped-up morse code.

Tables aren't the best or even the simplest way to do it.

Far from "souped-up morse code", a simple CSS thumbnail gallery
would look like this:

CSS:

.thumbnail{float: left;text-align: center;}

gallery:

<span class="thumbnail><img src="thumb1.gif" alt ="thumb 1" /><br
/>Caption For Thumb 1</span>
<span class="thumbnail><img src="thumb2.gif" alt ="thumb 2" /><br
/>Caption For Thumb 1</span>
etc.

That's a hell of a lot simpler than using tables. I should know, I
converted my table-based thumbnail gallery to a CSS-based one today.

Just out of curiosity on the subject, could you give a url
to that gallery you just converted?

Harder said than done.

I have no ftp access to my site at the moment.

You can see the original table based gallery at:

http://homepages.ihug.co.nz/~nrkn/xml/

Click screenshot test.

You won't be able to see any source though, as it is an xml document being
translated by xsl and the thumb gallery table itself is generated by
JavaScript dynamically within the xsl. If you don't use IE 6 then I doubt
very much that it will work -- not something that I'm proud of, but it was
made last year before I started writing proper cross browser pages and using
CSS.

However, if you want to see what the html source looks like, copy the code
below and paste it into notepad (or any other plain text editor), then save
it as tables.html and open it in your browser. Below that, I have included
my code for doing it with CSS. Notice that the table version is fixed
width, the CSS version scales to your browser window.

<html>
<head>
<title>Gallery with tables</title>
</head>
<body>
Thumbnails<br/><br/>
<table cellpadding="8" border="0">
<tr>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior0.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior0.gif" alt="0"
border="0" align="bottom"/><br/>Caption 1</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior1.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior1.gif" alt="1"
border="0" align="bottom"/><br/>Caption 2</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior2.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior2.gif" alt="2"
border="0" align="bottom"/><br/>Caption 3</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior3.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior3.gif" alt="3"
border="0" align="bottom"/><br/>Caption 4</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior4.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior4.gif" alt="4"
border="0" align="bottom"/><br/>Caption 5</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior5.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior5.gif" alt="5"
border="0" align="bottom"/><br/>Caption 6</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior6.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior6.gif" alt="6"
border="0" align="bottom"/><br/>Caption 7</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior7.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior7.gif" alt="7"
border="0" align="bottom"/><br/>Caption 8</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior8.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior8.gif" alt="8"
border="0" align="bottom"/><br/>Caption 9</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior9.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior9.gif" alt="9"
border="0" align="bottom"/><br/>Caption 10</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior10.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior10.gif"
alt="10" border="0" align="bottom"/><br/>Caption 11</a>
</center>
</td>
<td>
<center>
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior11.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior11.gif"
alt="11" border="0" align="bottom"/><br/>Caption 12</a>
</center>
</td>
</tr>
</table>
</body>
<html>
<head>
<title>Gallery with CSS</title>
<style>.thumb{float:left;text-align:center;padding:8px;}</style>
</head>
<body>
Thumbnails<br/><br/>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior0.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior0.gif" alt="0"
border="0" align="bottom"/><br/>Caption 1</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior1.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior1.gif" alt="1"
border="0" align="bottom"/><br/>Caption 2</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior2.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior2.gif" alt="2"
border="0" align="bottom"/><br/>Caption 3</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior3.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior3.gif" alt="3"
border="0" align="bottom"/><br/>Caption 4</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior4.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior4.gif" alt="4"
border="0" align="bottom"/><br/>Caption 5</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior5.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior5.gif" alt="5"
border="0" align="bottom"/><br/>Caption 6</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior6.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior6.gif" alt="6"
border="0" align="bottom"/><br/>Caption 7</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior7.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior7.gif" alt="7"
border="0" align="bottom"/><br/>Caption 8</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior8.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior8.gif" alt="8"
border="0" align="bottom"/><br/>Caption 9</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior9.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior9.gif" alt="9"
border="0" align="bottom"/><br/>Caption 10</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior10.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior10.gif"
alt="10" border="0" align="bottom"/><br/>Caption 11</a>
</span>
<span class="thumb">
<a
href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior11.gif"><img
src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior11.gif"
alt="11" border="0" align="bottom"/><br/>Caption 12</a>
</span>
</body>

[Nik Coughin]

Nik Coughin wrote:

Harder said than done.

Don't know where that came from. I meant easier said than done. Fool :)

[Andrew Urquhart]

"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...

Andrew Urquhart wrote:

With either method (tables or divs) there could be a loss of semantic
information depending on the implementation. For example if captions are a seperate table row then the connection between the image and the caption may not work very well for browsers rendering the content in non-visual ways, although obviously the title attribute would help here.
What about my mix of div's and tables here:
http://www.mediatech.nl/~rachel/Rach...hcaptions.html
(don't click the links, or you'll go into the site I
borrowed the pics from ;-) )
Would it lose semantic information? It's completely
flexible, only left aligned, while I'd wish it to be
centered, but that's ok.

Hmmn, in your implementation for each thumbnail image you've got a div
containing a 1 cell x 2 row table. I think it's unlikely that the caption
and image are ever going to get pulled apart from each other as they might
do in a multi-celled table, so it'd be quite difficult not to associate the
caption text with the image. That said, the table does actually seem
somewhat redundant to me.

Looking at the information you're representing in the page you have a
collection of images with caption data, there are no categories or
sub-categories in the gallery so you don't need any additional structural
markup to order and partition your thumbnails - the reason why I used
multiple lists of various types. The only thing you could do different
AFAICS is use a single list, but you wouldn't gain too much by doing that. A
list would allow a user to know how many items are in the gallery and to
jump from thumbnail to thumbnail without being forced to jump over the
captions as well, plus the user could more easily find the end of the list
and skip to any following content, but in your example there only is the
gallery and no other content, it would be hard to recommend implementing a
list in such a case.

As an alternate method I built a photo gallery as a collection of nested
lists, although it doesn't have explicit captions it might make more
semantic sense, but I'm still trying to decide:
http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup alone]
Looks very nice, but why did you put all these widths and
heights in? The heights are all equal, and the widths don't
matter, as far as I can see.

If the browser knows the dimensions of the content (in this case the images)
during download it can in theory render and layout the page as it downloads
instead of having to wait for each image to download and then calculate the
image dimensions from the image file data and then re-draw the page. It's
also valid markup that way as well!
And you are saying 128kb of
markup, well, that might have to do with the length of your
uri's :-D

:o) I know! The reason that the URIs are written out in full is rather off
topic! It's because the page was actually created using a mirroring script
that I built (http://www.andrewu.co.uk/tools/mirro...irroragent.zip
[9KB, zipped HTA]). That entire page is actually mirrored from
www.andrewu.co.uk/photo/ in an attempt to save that sites megre bandwidth!
The mirroring script changed the relative links in the original page during
the mirroring process so that the web page would work on a different domain,
it's just that I haven't gotten round to making it use relative URLs during
this process. So, that's why their absolutely referenced! :o)
--
Andrew Urquhart
http://www.andrewu.co.uk/about/conta...ewsgroup_ciwas

[Craig]

Each div is float: left; with the same height and width.
http://www.amd-m.com/guys/
Max Quordlepleen wrote:

Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.

I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.

Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of table-less thumbnails, and one example of an
approach that worked was
http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
renders properly for me in my Gecko browsers, and iCapture shows it as
rendering properly in Safari, but in IE6, the thumbnails are lined up
vertically in a single column. I am very pleased to have been able to
avoid using any tables at all so far, and would love to keep this
up. May I ask for suggestions on how to achieve a plain, boring
table-like gallery in CSS2, sans tables?

[Paul Furman]

reformatted for the slow among us:

Nik Coughin wrote:

..thumbnail {
float: left;
text-align: center;
}
<span class="thumbnail>
<img src="thumb1.gif" alt ="thumb 1" />
<br />
Caption For Thumb 1
</span>
<span class="thumbnail>
<img src="thumb2.gif" alt ="thumb 2" />
<br />
Caption For Thumb 2
</span>

[Steve R.]

Nik Coughin wrote in message ...

You can see the original table based gallery at:
http://homepages.ihug.co.nz/~nrkn/xml/

That page took forever to load on a dial-up, but I couldn't understand why.

Maybe tables *are* quicker :~)

[Steve R.]

Andrew Urquhart wrote in message ...

it's a bit big -128KB of markup alone.

Dial-up users won't be looking at your pages then.

I'm sure the HTLM for tables would have loaded much more quickly.

[Barry Pearson]

Nik Coughin wrote:
[snip]

Also, a table is going to be a fixed number of cells wide. This
means that your gallery is a fixed number of thumbs wide. The above
will fit as many thumbs as possible into the space available
horizontally and wrap the rest onto the next line. If you *want* it
to be a fixed number of thumbs wide then you wrap it in a div that
only has room for that many thumbs.

[snip]

I build my thumbnail galleries in the basis of balanced rows of 5 photographs.
I also wanted a regular spacing, even though my thumbnails are not all the
same width. (They all have 1 dimension 125 pixels, and the other the same or
less). So I want that level of inflexibility, and I want it whether or not the
user has CSS.

In the gallery below, I believe that using tables is sensible. The problem is
having extra rows for the extra links, which means it doesn't linearise well,
and causes problems for people using speaking browsers. (I didn't design my
photography pages for people needing speaking browsers, although I have tested
them to see how they behaved).

http://www.barry.pearson.name/photog...olios/lrps.htm

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Steve R.]

Craig wrote in message ...

Each div is float: left; with the same height and width.
http://www.amd-m.com/guys/

Many of your thumbnails are very poorly web-optimised, especially on a page
which carries so many images. Pity the poor dial-up user (60% or more of
all users)

This one for example is 19K ..
http://www.amd-m.com/guys/thumbs/jonathanh_jpg.jpg

and this one 19K ...
http://www.amd-m.com/guys/thumbs/tomwastintime_jpg.gif

Thumbnails that pixel size can easily be around 3K - 4K maximum.

[Sid Ismail]

On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
<reply_via_contact_page@website_in.sig> wrote:

: With either method (tables or divs) there could be a loss of semantic
: information depending on the implementation. For example if captions are a
: seperate table row then the connection between the image and the caption may
: not work very well for browsers rendering the content in non-visual ways
<td>
<img.... ><br>
Caption goes in the same TD cell
</td>

Sid

[Els]

Andrew Urquhart wrote:

"Els" wrote:

Andrew Urquhart wrote:

With either method (tables or divs) there could be a loss of semantic
information depending on the implementation. For example if captions are a
seperate table row then the connection between the image and the caption may
not work very well for browsers rendering the content in non-visual ways,
although obviously the title attribute would help here.
What about my mix of div's and tables here:
http://www.mediatech.nl/~rachel/Rach...hcaptions.html
(don't click the links, or you'll go into the site I
borrowed the pics from ;-) )
Would it lose semantic information? It's completely
flexible, only left aligned, while I'd wish it to be
centered, but that's ok.

Hmmn, in your implementation for each thumbnail image you've got a div
containing a 1 cell x 2 row table. I think it's unlikely that the caption
and image are ever going to get pulled apart from each other as they might
do in a multi-celled table, so it'd be quite difficult not to associate the
caption text with the image. That said, the table does actually seem
somewhat redundant to me.

It's not redundant. Try taking it out :-)
If you use two divs inside the div instead of two table rows
inside the div, the picture can't be vertically aligned with
the other pictures and the caption ditto.
Looking at the information you're representing in the page you have a
collection of images with caption data, there are no categories or
sub-categories in the gallery so you don't need any additional structural
markup to order and partition your thumbnails - the reason why I used
multiple lists of various types. The only thing you could do different
AFAICS is use a single list, but you wouldn't gain too much by doing that. A
list would allow a user to know how many items are in the gallery and to
jump from thumbnail to thumbnail without being forced to jump over the
captions as well, plus the user could more easily find the end of the list
and skip to any following content, but in your example there only is the
gallery and no other content, it would be hard to recommend implementing a
list in such a case.
True, and on the actual page, the only other content is the
menu, both before and after the thumbnail collection. But if
I were to make it a list, are you suggesting having each div
as a <li> item?

As an alternate method I built a photo gallery as a collection of nested
lists, although it doesn't have explicit captions it might make more
semantic sense, but I'm still trying to decide:
http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
alone]

Looks very nice, but why did you put all these widths and
heights in? The heights are all equal, and the widths don't
matter, as far as I can see.

If the browser knows the dimensions of the content (in this case the images)
during download it can in theory render and layout the page as it downloads
instead of having to wait for each image to download and then calculate the
image dimensions from the image file data and then re-draw the page.

True.
It's also valid markup that way as well!

That I knew :-)

And you are saying 128kb of
markup, well, that might have to do with the length of your
uri's :-D

:o) I know! The reason that the URIs are written out in full is rather off
topic! It's because the page was actually created using a mirroring script
that I built (http://www.andrewu.co.uk/tools/mirro...irroragent.zip
[9KB, zipped HTA]). That entire page is actually mirrored from
www.andrewu.co.uk/photo/ in an attempt to save that sites megre bandwidth!
The mirroring script changed the relative links in the original page during
the mirroring process so that the web page would work on a different domain,
it's just that I haven't gotten round to making it use relative URLs during
this process. So, that's why their absolutely referenced! :o)

If they're all on the same domain, making them relative will
only take about 1 second with search and replace :-)
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Barry Pearson wrote:

Nik Coughin wrote:
[snip]

Also, a table is going to be a fixed number of cells wide. This
means that your gallery is a fixed number of thumbs wide. The above
will fit as many thumbs as possible into the space available
horizontally and wrap the rest onto the next line. If you *want* it
to be a fixed number of thumbs wide then you wrap it in a div that
only has room for that many thumbs.
[snip]

I build my thumbnail galleries in the basis of balanced rows of 5 photographs.
I also wanted a regular spacing, even though my thumbnails are not all the
same width. (They all have 1 dimension 125 pixels, and the other the same or
less). So I want that level of inflexibility, and I want it whether or not the
user has CSS.

Yep, that's what I did too, with tables, on various pages of
http://www.rachelrijsdijk.com/ (forgive me about the splash
screen, it is too big, but it wasn't my design)
In the gallery below, I believe that using tables is sensible.
I agree.
The problem is
having extra rows for the extra links, which means it doesn't linearise well,
and causes problems for people using speaking browsers. (I didn't design my
photography pages for people needing speaking browsers, although I have tested
them to see how they behaved).

http://www.barry.pearson.name/photog...olios/lrps.htm

That's what I call a good way of using tables for layout
purposes. It's difficult to do that with divs. I'd say
impossible too, unless you use little tables inside the
divs, but as this is fixed width, I'd say a table is far
easier to maintain and much less code too.
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Nik Coughin wrote:

Els wrote:

Nik Coughin wrote:

Tables aren't the best or even the simplest way to do it.

Far from "souped-up morse code", a simple CSS thumbnail gallery
would look like this:

CSS:

.thumbnail{float: left;text-align: center;}

gallery:

<span class="thumbnail><img src="thumb1.gif" alt ="thumb 1" /><br
/>Caption For Thumb 1</span>
<span class="thumbnail><img src="thumb2.gif" alt ="thumb 2" /><br
/>Caption For Thumb 1</span>
etc.

That's a hell of a lot simpler than using tables. I should know, I
converted my table-based thumbnail gallery to a CSS-based one today.

Just out of curiosity on the subject, could you give a url
to that gallery you just converted?

However, if you want to see what the html source looks like, copy the code
below and paste it into notepad (or any other plain text editor), then save
it as tables.html and open it in your browser. Below that, I have included
my code for doing it with CSS. Notice that the table version is fixed
width, the CSS version scales to your browser window.

[snip code]

I did copy and paste that, and it looks okay, but it won't
work if you don't carefully put them in order of height..
Try it with alternating heights, or with a double line
caption here and there. It will break up and not look at all
the way you want, I'm sure :-)

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Craig wrote:

Each div is float: left; with the same height and width.
http://www.amd-m.com/guys/

I personally don't like the pictures and their captures
'floating' to the top of each div.
Which is why I used tables (2 rows each) inside the floating
divs myself.
Example page:
http://www.mediatech.nl/~rachel/Rach...hcaptions.html
I don't think that visual effect can be gained with divs only?

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Sid Ismail wrote:

On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
<reply_via_contact_page@website_in.sig> wrote:

: With either method (tables or divs) there could be a loss of semantic
: information depending on the implementation. For example if captions are a
: seperate table row then the connection between the image and the caption may
: not work very well for browsers rendering the content in non-visual ways

<td>
<img.... ><br>
Caption goes in the same TD cell
</td>

Which only will look 'okay' if all thumbs have the same
height. They don't at least on my pages :-)

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Andrew Urquhart]

"Steve R." <stevie_ritchie(NOSPAM)@hotmail.com> wrote in message
news:tI*******************@news-text.cableinet.net...

Andrew Urquhart wrote in message ...

it's a bit big -128KB of markup alone.

Dial-up users won't be looking at your pages then.

I'm sure the HTLM for tables would have loaded much more quickly.

Hi Steve, I agree with you that the page is not dial-up friendly and it is
my intention to remedy that in the future.

However, I very much disagree when you say "tables would have loaded much
more quickly". I'm sure that it would load more slowly and here are my
reasons:

1. If my gallery was table-based then the instead of an <li> and <ol> I'd
need at least <td>, <tr> and <table> (I'll omit <tbody> and summary
attributes etc.) I calculate that if I make my gallery table-based I would
use 285 extra characters of HTML (225 for <tr> and 60 for the extra chars in
<table>). In reality this figure would be larger as I'm viewing 10
thumbnails per line in my 1024px-width viewport and I would need to reduce
this to not larger than 800px, hence more rows would be needed. It should be
noted that I could never accommodate every viewport size with a table-based
layout - if I fix the number of thumbnails per line then it's not going to
fit in someones display and would look too small in someone elses.

It should also be noted that:
2. This gallery has a DHTML-based display mechanism (for those that support
it, for those that don't there's an alternative) so each image has a rather
large onclick handler attached that really beefs-up the markup.
3. There simply are an awful lot of thumbnails in the gallery - 184 to be
exact each with very descriptive alt and title attributes.
4. The URIs used are absolute and not relative due to the process in which
the page was created via a robot, this is explained in an earlier post in
this thread. Correcting the absolute URIs would reduce the gallery by at
least 8832 characters.
--
Andrew Urquhart
http://www.andrewu.co.uk/about/conta...ewsgroup_ciwas

[Andrew Urquhart]

"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...

That said, the table does actually seem
somewhat redundant to me.
It's not redundant. Try taking it out :-)
If you use two divs inside the div instead of two table rows
inside the div, the picture can't be vertically aligned with
the other pictures and the caption ditto.

Agreed, getting all images and captions to appear with the same vertical
positioning is likely to be a big problem without tables, although I'd not
say it couldn't be done, but it would certainly make the CSS less trivial!
:o)
But if
I were to make it a list, are you suggesting having each div
as a <li> item?

Yes, it just has extra semantic meaning than a div ("Here is a
catalogue/list of something" vs. "Here are some blocks"), but can be styled
to do everything that your div can do.

So, that's why [the URIs are] absolutely referenced! :o)

If they're all on the same domain, making them relative will
only take about 1 second with search and replace :-)

Very true! Although the mirroring process is all automated so I'd have to
manually intervene, open an editor, go find the processed page, etc., etc.,
and that would take a bit longer than 1 second! :o)
--
Andrew Urquhart
Reply: http://www.andrewu.co.uk/about/conta...ewsgroup_ciwas

[Els]

Andrew Urquhart wrote:

"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...

That said, the table does actually seem
somewhat redundant to me.

It's not redundant. Try taking it out :-)
If you use two divs inside the div instead of two table rows
inside the div, the picture can't be vertically aligned with
the other pictures and the caption ditto.

Agreed, getting all images and captions to appear with the same vertical
positioning is likely to be a big problem without tables, although I'd not
say it couldn't be done, but it would certainly make the CSS less trivial!
:o)

Well, I've tried to do it, but it just got way to
complicated, which is why I used the tables.

But if
I were to make it a list, are you suggesting having each div
as a <li> item?

Yes, it just has extra semantic meaning than a div ("Here is a
catalogue/list of something" vs. "Here are some blocks"), but can be styled
to do everything that your div can do.

That was easy!
http://www.mediatech.nl/~rachel/Rach...tionslist.html

So this way it would be quicker to jump from thumbnail to
thumbnail? Good :-)

So, that's why [the URIs are] absolutely referenced! :o)

If they're all on the same domain, making them relative will
only take about 1 second with search and replace :-)

Very true! Although the mirroring process is all automated so I'd have to
manually intervene, open an editor, go find the processed page, etc., etc.,
and that would take a bit longer than 1 second! :o)

Make it 5 minutes then :-)

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Sid Ismail]

On Tue, 24 Feb 2004 11:22:30 +0100, Els <el*********@tiscali.nl> wrote:

:
:
: Sid Ismail wrote:
:
: > On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
: > <reply_via_contact_page@website_in.sig> wrote:
: >
: > : With either method (tables or divs) there could be a loss of semantic
: > : information depending on the implementation. For example if captions are a
: > : seperate table row then the connection between the image and the caption may
: > : not work very well for browsers rendering the content in non-visual ways
: >
: > <td>
: > <img.... ><br>
: > Caption goes in the same TD cell
: > </td>
:
: Which only will look 'okay' if all thumbs have the same
: height. They don't at least on my pages :-)
Have valign=bottom in your TD then?

Sid

[Els]

Els wrote:

Andrew Urquhart wrote:

Agreed, getting all images and captions to appear with the same vertical
positioning is likely to be a big problem without tables, although I'd
not say it couldn't be done, but it would certainly make the CSS less
trivial!
:o)

Well, I've tried to do it, but it just got way to complicated, which is
why I used the tables.

Oh, and it is (to my knowledge) simply impossible to have
the various thumbs (different heights) aligned - vertically
centered - without specifying exact height for each thumb
seperately.
Can be done automatically with Perl or maybe PHP, but it's a
hassle and a lot of extra code.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Sid Ismail wrote:

On Tue, 24 Feb 2004 11:22:30 +0100, Els <el*********@tiscali.nl> wrote:

:
:
: Sid Ismail wrote:
:
: > On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
: > <reply_via_contact_page@website_in.sig> wrote:
: >
: > : With either method (tables or divs) there could be a loss of semantic
: > : information depending on the implementation. For example if captions are a
: > : seperate table row then the connection between the image and the caption may
: > : not work very well for browsers rendering the content in non-visual ways
: >
: > <td>
: > <img.... ><br>
: > Caption goes in the same TD cell
: > </td>
:
: Which only will look 'okay' if all thumbs have the same
: height. They don't at least on my pages :-)

Have valign=bottom in your TD then?

That just aligns the lot to the bottom of the td instead of
centered. Which helps a little bit, if all the captions are
the same height ;-) It still won't look aligned nicely.
With seperate tablecells, the captions will be aligned with
each other, and so will the thumbs.
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Brian]

Sid Ismail wrote:

On 24 Feb 2004, Max Quordlepleen <ma**@nonags.com> wrote:

http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/
What in heaven's name is wrong with using tables for this application?

What in heaven's name is the data relationship between e.g., the photo
of "Coordinators" and that of "Hall of upper cottage?"
Especially if you have text captions under/above each image.
That would be the only use of table, thus 1 table for each
image/caption, floated left.
Tables is more universal than souped-up morse code.

10 tables? I think it's simpler the way it is.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Paul Furman]

Els wrote:

...it looks okay, but it won't work if you
don't carefully put them in order of height..
Try it with alternating heights, or with a double line caption here and
there. It will break up and not look at all the way you want, I'm sure :-)

I took a stab at those issues. It gets a whole lot more complicated! It
has nested divs for the thumb and caption inside the same float left
span above.

http://www.edgehill.net/html/css/gallery2.htm

I was able to omit the width in Mozilla and it sized to the thumb if the
text was not too wide but the second one stretched to the end of the
earth in IE. The height has to be fixed to get the captions to line up
in the bottom. IE won't show the fixed height of the two-line caption
box unless there is enough text to fill it, Mozilla overflows if I write
a caption longer than two lines.

I don't think CSS is necessarily easier or more compact than tables. It
is nice to get the automatic wrapping though. If I was processing this
with php, I could calculate the largest height image for all and set the
width based on each image width (and set the caption box width to match)
then the caption height (and the container span) would have to be
calculated in ems for the largest caption in the set!

I couldn't figure out how to center the image but it's probably
something simple.

If the contents could be aligned to the bottom at a consistent baseline,
I wouldn't mind the top being ragged. I have no clue how to do that.

Here's another version where I just let things fall where they want and
the only width or height I fix is the caption width to match the image
width (plus padding/margin which shows differently in IE & Mozilla so
it's not perfect:
http://www.edgehill.net/html/css/gallery3.htm

[Els]

Paul Furman wrote:

Els wrote:

...it looks okay, but it won't work if you don't carefully put them in
order of height..
Try it with alternating heights, or with a double line caption here
and there. It will break up and not look at all the way you want, I'm
sure :-)
I took a stab at those issues. It gets a whole lot more complicated!

I know :-)
It
has nested divs for the thumb and caption inside the same float left
span above.

http://www.edgehill.net/html/css/gallery2.htm
Almost what I want...
I was able to omit the width in Mozilla and it sized to the thumb if the
text was not too wide but the second one stretched to the end of the
earth in IE. The height has to be fixed to get the captions to line up
in the bottom. IE won't show the fixed height of the two-line caption
box unless there is enough text to fill it, Mozilla overflows if I write
a caption longer than two lines.

I don't think CSS is necessarily easier or more compact than tables.
True :-)
It
is nice to get the automatic wrapping though.
Just in case you didn't see my message in a 'side-thread' of
this one, I made an example that has the ease of tables, and
the wrapping of divs:
http://www.mediatech.nl/~rachel/Rach...hcaptions.html
I was told it's even better (for usability) to make it a
list, so I then changed it to
http://www.mediatech.nl/~rachel/Rach...tionslist.html
If I was processing this
with php, I could calculate the largest height image for all and set the
width based on each image width (and set the caption box width to match)
then the caption height (and the container span) would have to be
calculated in ems for the largest caption in the set!

I couldn't figure out how to center the image but it's probably
something simple.
Horizontally: text-align:center to the div.
Vertically: only possible if you know the height of each
thumb, by using positioning and negative margin.
If the contents could be aligned to the bottom at a consistent baseline,
I wouldn't mind the top being ragged. I have no clue how to do that.
Me neither.
(in a div that is)
Here's another version where I just let things fall where they want and
the only width or height I fix is the caption width to match the image
width (plus padding/margin which shows differently in IE & Mozilla so
it's not perfect:
http://www.edgehill.net/html/css/gallery3.htm

That's exactly what will mess up the look of the page if you
have more than just two thumbs with different heights.
For me tables (one per thumb) is the answer to this problem,
and as there is no accessibility or flexibility issue (as
far as I know), I don't think it's bad coding or design to
do it the way I did. :-)

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Barry Pearson]

Paul Furman wrote:
[snip]

I don't think CSS is necessarily easier or more compact than tables.

[snip]

I examined several layouts, using types of CSS positioning and also using
tables, and found that, on average, my table pages were perhaps 25 bytes extra
per item being positioned. So for 3 columns, it might be about 75 bytes. If
you add spacer GIFs, then you can possibly manage with just one (a single,
transparent, pixel) at less than about 50 bytes. These are just rules of
thumb, and depend on such things as the lengths of ID names, etc.

Somethings I haven't managed (yet) to do with CSS positioning. Some design
ideas are silly to try with tables. I'm currently trying to solve a design
idea that I don't know how to do with either, largely because of well known
problems with IE, but I think I know how to do with a combination of a simple
table and floats within it.

If all you have is a hammer, everything looks like a nail. (Traditional)

If all you have is a screwdriver, everything may get screwed up. (Barry
Pearson, 2004)

And sometimes you just place the screwdriver against some ice you want to
remove, and hit the end of it with a hammer!

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Paul Furman]

Els wrote:

...
Just in case you didn't see my message in a 'side-thread' of this one, I
made an example that has the ease of tables, and the wrapping of divs:
http://www.mediatech.nl/~rachel/Rach...hcaptions.html
I was told it's even better (for usability) to make it a list, so I then
changed it to
http://www.mediatech.nl/~rachel/Rach...tionslist.html

For me tables (one per thumb) is the answer to this problem, and as
there is no accessibility or flexibility issue (as far as I know), I
don't think it's bad coding or design to do it the way I did. :-)

Ah ha!
I tried something like that too:
http://www.edgehill.net/html/css/gallery4.htm
http://www.edgehill.net/html/css/gallery5.htm

Then I boiled yours down to the basics and color coded to make sense of
it: http://www.edgehill.net/html/css/gallery6.htm

[Els]

Paul Furman wrote:

Els wrote:

...
Just in case you didn't see my message in a 'side-thread' of this one,
I made an example that has the ease of tables, and the wrapping of divs:
http://www.mediatech.nl/~rachel/Rach...hcaptions.html
I was told it's even better (for usability) to make it a list, so I
then changed it to
http://www.mediatech.nl/~rachel/Rach...tionslist.html

For me tables (one per thumb) is the answer to this problem, and as
there is no accessibility or flexibility issue (as far as I know), I
don't think it's bad coding or design to do it the way I did. :-)
Ah ha!
I tried something like that too:
http://www.edgehill.net/html/css/gallery4.htm
http://www.edgehill.net/html/css/gallery5.htm

You know, I never thought about the possibility of floating
the tables themselves!
Then I boiled yours down to the basics and color coded to make sense of
it: http://www.edgehill.net/html/css/gallery6.htm

:-)
And true, there's no need for the height of the table to be
specified. Taking that out....

The div version was 18.345 bytes on the server, the li
version 17.912, without the height it's now 17.897, and just
uploaded the div version without the divs: 16.645 bytes :-)

The width and height of each thumb I don't specify though,
cause it's a hassle, as they're all different.
I would (to make the page load in a more stable way) specify
a max-width for each thumb, as they are never wider or
higher than 100px, but I don't know how to do that. As soon
as I specify a width, in html or in css, the picture
stretches to become that width...
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Steve R.]

Els wrote in message ...

The width and height of each thumb I don't specify though,
cause it's a hassle, as they're all different.

'Frontpage' users do all that with a simple click of the button :~)

[Els]

Steve R. wrote:

Els wrote in message ...

The width and height of each thumb I don't specify though,
cause it's a hassle, as they're all different.

'Frontpage' users do all that with a simple click of the button :~)

Blasphemist! :-D

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Nik Coughin]

Steve R. wrote:

Nik Coughin wrote in message ...

You can see the original table based gallery at:
http://homepages.ihug.co.nz/~nrkn/xml/

That page took forever to load on a dial-up, but I couldn't
understand why.

Maybe tables *are* quicker :~)

That page uses tables, not CSS :)

It probably took a long time to load because of the way the XSL stylesheet
(nothing to do with CSS) translates the XML. When I wrote that page I knew
nothing about XSL so it doesn't exactly produce optimal code.

[Eric Bohlman]

"Andrew Urquhart" <reply_via_contact_page@website_in.sig> wrote in
news:HK****************@newsfe2-gui.server.ntli.net:

2. This gallery has a DHTML-based display mechanism (for those that
support it, for those that don't there's an alternative) so each image
has a rather large onclick handler attached that really beefs-up the
markup.

You can probably refactor your code to achieve a large space saving. It
sounds to me like there's a whole lot of code duplicated in each handler;
figure out what's common, write functions with parameters to do the common
stuff, and have the individual handlers simply call the functions with the
right parameters. That way the common code appears in only one place
rather than duplicated for every image.

[Andrew Urquhart]

"Eric Bohlman" <eb******@earthlink.net> wrote in message
news:Xn*******************************@130.133.1.4 ...

"Andrew Urquhart" <reply_via_contact_page@website_in.sig> wrote in
news:HK****************@newsfe2-gui.server.ntli.net:

2. This gallery has a DHTML-based display mechanism (for those that
support it, for those that don't there's an alternative) so each image has a rather large onclick handler attached that really beefs-up the
markup.
You can probably refactor your code to achieve a large space saving.

It sounds to me like there's a whole lot of code duplicated in each handler; figure out what's common, write functions with parameters to do the common stuff, and have the individual handlers simply call the functions with the right parameters. That way the common code appears in only one place
rather than duplicated for every image.

Hi Eric, if you _look_ you'll see that that is exactly how it already
works.
--
Andrew Urquhart
Reply: http://www.andrewu.co.uk/about/conta...sgroup_althtml

[Eric Bohlman]

"Andrew Urquhart" <reply_via_contact_page@website_in.sig> wrote in
news:gH8%b.1119$bJ1.416@newsfe1-win:

"Eric Bohlman" <eb******@earthlink.net> wrote in message
news:Xn*******************************@130.133.1.4 ...

You can probably refactor your code to achieve a large space saving.

It

sounds to me like there's a whole lot of code duplicated in each

handler;

figure out what's common, write functions with parameters to do the

common

stuff, and have the individual handlers simply call the functions with

the

right parameters. That way the common code appears in only one place
rather than duplicated for every image.

Hi Eric, if you _look_ you'll see that that is exactly how it already
works.

You could knock off about 4K right away by having ShowPhoto prepend the
path to the photo URIs; that would save you several hundred
"/andrewu/pix/photos/". Another factor contributing to the bloat is the
long directory names.

[Andrew Urquhart]

"Eric Bohlman" <eb******@earthlink.net> wrote in message
news:Xn*******************************@130.133.1.4 ...

"Andrew Urquhart" <reply_via_contact_page@website_in.sig> wrote in
news:gH8%b.1119$bJ1.416@newsfe1-win:

"Eric Bohlman" <eb******@earthlink.net> wrote in message
news:Xn*******************************@130.133.1.4 ...

You can probably refactor your code to achieve a large space
saving. It sounds to me like there's a whole lot of code duplicated
in each handler; figure out what's common, write functions with
parameters to do the common stuff, and have the individual
handlers simply call the functions with the right parameters.
That way the common code appears in only one place
rather than duplicated for every image.

Hi Eric, if you _look_ you'll see that that is exactly how it already works.

You could knock off about 4K right away by having ShowPhoto
prepend the path to the photo URIs; that would save you several
hundred "/andrewu/pix/photos/". Another factor contributing to the
bloat is the long directory names.

Hi Eric. I wrote the XML and XSLT behind the gallery (links to those
files at bottom of gallery) to be flexible enough for others to use if
they want to. So whilst I could introduce tweaks of this nature the code
becomes less general purpose. All of the data is in the XML, all of the
processing is in the XSLT and photo.js is a blackbox that provides
additional DHTML functionality for those browsers that support
javascript. I don't want to cross those boundaries and put data in the
DHTML module for example. If I gave the impression that I was puzzled as
to why the page was large then I apologise as this is not the case. The
long directory and filenames have been lifted directly from my offline
store of photos where they have a purpose in reminding me what they are
by how they are named, they have not been optimised for the web other
than in making them URI-safe. I posted the link as it provided an
example of how to use CSS with semantic HTML to display thumbnails in a
gallery, I wouldn't post it to a thread about file-size optimisation!
:o)

Thanks for the interest.

Best,
--
Andrew Urquhart
Reply: http://www.andrewu.co.uk/about/conta...ewsgroup_ciwas

[Roy Reed]

Steve R. wrote:

Craig wrote in message ...

Each div is float: left; with the same height and width.
http://www.amd-m.com/guys/

Many of your thumbnails are very poorly web-optimised, especially on
a page which carries so many images. Pity the poor dial-up user (60%
or more of all users)

This one for example is 19K ..
http://www.amd-m.com/guys/thumbs/jonathanh_jpg.jpg

and this one 19K ...
http://www.amd-m.com/guys/thumbs/tomwastintime_jpg.gif

Thumbnails that pixel size can easily be around 3K - 4K maximum.

It's not the JPG optimisation that's the problem. The images still have EXIF
data embedded. That's probably between 10K and 15K of the file size.

--
Must fly

Roy

www.reeddesign.co.uk

[Lauri Raittila]

In article Andrew Urquhart wrote:

"Sid Ismail" <el***@nospam.com> wrote in message
news:l3********************************@4ax.com...

On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <ma**@nonags.com>
wrote:

: and one example of an
: approach that worked was
: http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
: renders properly for me in my Gecko browsers, and iCapture shows it as
: rendering properly in Safari, but in IE6, the thumbnails are lined up
: vertically in a single column. I am very pleased to have been able to
: avoid using any tables at all so far, and would love to keep this
: up. May I ask for suggestions on how to achieve a plain, boring
: table-like gallery in CSS2, sans tables?
What in heaven's name is wrong with using tables for this application?
Especially if you have text captions under/above each image.
Do you mean by wrapping whole thing to one table? - Everything. Try it in
big/small window for example.

Or every image? - I don't think doing that just to get pre CSS browsers
tile images would be worth hassle.

Or like I suggest further this message?

Or do you mean inline styles? Those are bad, I admit. They are generated
automatically, and I intend to move them to stylesheet when I have time.
(I don't want to hardcode them to stylesheet.)
Tables is more universal than souped-up morse code.

Depends much how you use them.
As an alternate method I built a photo gallery as a collection of nested
lists, although it doesn't have explicit captions it might make more
semantic sense, but I'm still trying to decide:
http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
alone]

I have thought about

<table>
<tr><th>Caption<td>image
<tr><td>Caption1<td>image1
</table>

And then making it look like my example using CSS. I think that is much
better than abusing dl's. I haven't had time to test it unfortunately.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.