Thumbnail gallery without tables?

[Andrew Urquhart]

Re: Thumbnail gallery without tables?

"Els" <els.aNOSPAM@ti scali.nl> wrote in message
news:403b1dcb$0 $41752$5fc3050@ dreader2.news.t iscali.nl...[color=blue][color=green]
> > That said, the table does actually seem
> > somewhat redundant to me.[/color]
>
> 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.[/color]

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)
[color=blue]
> But if
> I were to make it a list, are you suggesting having each div
> as a <li> item?[/color]

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.
[color=blue][color=green]
> > So, that's why [the URIs are] absolutely referenced! :o)[/color]
>
> If they're all on the same domain, making them relative will
> only take about 1 second with search and replace :-)[/color]

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: https://www.andrewu.co.uk/about/cont...ewsgroup_ciwas

[Els]

Re: Thumbnail gallery without tables?


Andrew Urquhart wrote:
[color=blue]
> "Els" <els.aNOSPAM@ti scali.nl> wrote in message
> news:403b1dcb$0 $41752$5fc3050@ dreader2.news.t iscali.nl...
>[color=green][color=darkred]
>>>That said, the table does actually seem
>>>somewhat redundant to me.[/color]
>>
>>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.[/color]
>
> 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)[/color]

Well, I've tried to do it, but it just got way to
complicated, which is why I used the tables.
[color=blue][color=green]
>>But if
>>I were to make it a list, are you suggesting having each div
>>as a <li> item?[/color]
>
> 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.[/color]

That was easy!

http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptionslist.html

So this way it would be quicker to jump from thumbnail to
thumbnail? Good :-)
[color=blue][color=green][color=darkred]
>>>So, that's why [the URIs are] absolutely referenced! :o)[/color]
>>
>>If they're all on the same domain, making them relative will
>>only take about 1 second with search and replace :-)[/color]
>
> 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)[/color]

Make it 5 minutes then :-)

--
Els

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

[Sid Ismail]

Re: Thumbnail gallery without tables?

On Tue, 24 Feb 2004 11:22:30 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:

:
:
: Sid Ismail wrote:
:
: > On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
: > <reply_via_cont act_page@websit e_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]

Re: Thumbnail gallery without tables?

Els wrote:
[color=blue]
> Andrew Urquhart wrote:
>[color=green]
>> 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)[/color]
>
> Well, I've tried to do it, but it just got way to complicated, which is
> why I used the tables.[/color]

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]

Re: Thumbnail gallery without tables?



Sid Ismail wrote:
[color=blue]
> On Tue, 24 Feb 2004 11:22:30 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:
>
> :
> :
> : Sid Ismail wrote:
> :
> : > On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
> : > <reply_via_cont act_page@websit e_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?[/color]

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]

Re: Thumbnail gallery without tables?

Sid Ismail wrote:
[color=blue]
> On 24 Feb 2004, Max Quordlepleen <maxq@nonags.co m> wrote:
>[color=green]
>> http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/[/color]
>
> What in heaven's name is wrong with using tables for this application?[/color]

What in heaven's name is the data relationship between e.g., the photo
of "Coordinato rs" and that of "Hall of upper cottage?"
[color=blue]
> Especially if you have text captions under/above each image.[/color]

That would be the only use of table, thus 1 table for each
image/caption, floated left.
[color=blue]
> Tables is more universal than souped-up morse code.[/color]

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]

Re: Thumbnail gallery without tables?

Els wrote:[color=blue]
>
> ...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 :-)[/color]


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]

Re: Thumbnail gallery without tables?


Paul Furman wrote:
[color=blue]
> Els wrote:
>[color=green]
>> ...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 :-)[/color]
>
> I took a stab at those issues. It gets a whole lot more complicated![/color]

I know :-)
[color=blue]
> It
> has nested divs for the thumb and caption inside the same float left
> span above.
>
> http://www.edgehill.net/html/css/gallery2.htm[/color]

Almost what I want...
[color=blue]
> 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.[/color]

True :-)
[color=blue]
> It
> is nice to get the automatic wrapping though.[/color]

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/Rachel/thumbswithcaptions.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/Rachel/thumbswithcaptionslist.html

[color=blue]
> 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.[/color]

Horizontally: text-align:center to the div.
Vertically: only possible if you know the height of each
thumb, by using positioning and negative margin.
[color=blue]
> 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.[/color]

Me neither.
(in a div that is)
[color=blue]
> 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[/color]

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]

Re: Thumbnail gallery without tables?

Paul Furman wrote:
[snip][color=blue]
> I don't think CSS is necessarily easier or more compact than tables.[/color]
[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]

Re: Thumbnail gallery without tables?

Els wrote:[color=blue]
> ...
> 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. :-)[/color]

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]

Re: Thumbnail gallery without tables?



Paul Furman wrote:
[color=blue]
> Els wrote:
>[color=green]
>> ...
>> 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. :-)[/color]
>
> Ah ha!
> I tried something like that too:
> http://www.edgehill.net/html/css/gallery4.htm
> http://www.edgehill.net/html/css/gallery5.htm[/color]

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

:-)
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.]

Re: Thumbnail gallery without tables?

Els wrote in message ...[color=blue]
> The width and height of each thumb I don't specify though,
> cause it's a hassle, as they're all different.[/color]

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

[Els]

Re: Thumbnail gallery without tables?

Steve R. wrote:
[color=blue]
> Els wrote in message ...
>[color=green]
>>The width and height of each thumb I don't specify though,
>>cause it's a hassle, as they're all different.[/color]
>
> 'Frontpage' users do all that with a simple click of the button :~)[/color]

Blasphemist! :-D

--
Els

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

[Nik Coughin]

Re: Thumbnail gallery without tables?

Steve R. wrote:[color=blue]
> Nik Coughin wrote in message ...[color=green]
>> You can see the original table based gallery at:
>> http://homepages.ihug.co.nz/~nrkn/xml/[/color]
>
> That page took forever to load on a dial-up, but I couldn't
> understand why.
>
> Maybe tables *are* quicker :~)[/color]

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]

Re: Thumbnail gallery without tables?

"Andrew Urquhart" <reply_via_cont act_page@websit e_in.sig> wrote in
news:HKF_b.2618 $Vv.1980@newsfe 2-gui.server.ntli .net:
[color=blue]
> 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.[/color]

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.