Re: [WSG] Centering a liquid grid of image thumbs and captions

[Kristof Neirynck]

Nick Gleitzman wrote:
Thanks again, Kristof. I appreciate the time you've put into this; I 
have to get back to work too.

I'm not sure that even nesting tables would give the liquid layout; 
I meant to reply on this:
<-- [img] [img] [img] [img] [img] ... ->
<-- [img] [img] [img] [img] [img] ... ->
<--   [img] [img] [img]   ->
You could make the last row have less columns.
Just inserting a table in that row
Can't be done withhout javascript.
--
Kristof
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[RC Pierce]

Hi Nick,

The post is under this topic, from Saturday morning:

Bert Doorn

Saturday, June 05, 2004 4:51 AM

RE: [WSG] Centering a liquid grid of image thumbs and captions

The page on Bert's site where the layout is used:

http://www.betterwebdesign.com.au/clients/index.html

Cheers,

Roy



- Original Message - 
From: "Nick Gleitzman" <[EMAIL PROTECTED]>
To: <[EMAIL PROTECTED]>
Sent: Saturday, June 05, 2004 9:35 PM
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions


Roy - ummm,  did I miss a post? Can you point me to 'Bert's layout'?

Thanks
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/

On Sunday, June 6, 2004, at 01:59  AM, RC Pierce wrote:

> Bert's thumbnail layout is really quite straight forward. Wish I'd o'
> thought of using inline
> paragraphs as containers when I was having trouble with a thumbnail
> page, myself. The problem of
> attaching caption to image, getting it to center with the thumbnail is
> completely overcome using
> that simple technique. Beats <.td><.img><.br /><.a>caption<./a><./td>
> (ignore dots) all to heck when
> it comes to elasticity and fluidity. Nice one, Bert.

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*


*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [WSG] Centering a liquid grid of image thumbs and captions

[Mike Pepper]

Nick,

I think the trick here is to examine the nature of the containers and
whether they are block or in-line elements. I just don't have time to
revisit until next weekend ... like all of us, no doubt.

I like the idea of using an unordered list since it's semantically correct
so I'll begin there and work my way to the bounding containers. Of course,
it may not be possible, but in my experience there is *always* a way. Just a
question of finding it.

... and then if falls apart in Explorer ...

Cheers,

Mike Pepper
Accessible Web Developer (indoors when it's a glorious sunny day)
www.seowebsitepromotion.com
www.gawds.org

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Nick Gleitzman
Sent: 06 June 2004 16:43
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions


Thanks again, Kristof. I appreciate the time you've put into this; I
have to get back to work too.

I'm not sure that even nesting tables would give the liquid layout;
surely a table by definition has a hard-coded number of columns? I
guess my vision is of a CSS solution that not only equals what tables
can do, but betters it - by allowing the 'rows' to have a variable
number of columns, according to the width of the enclosing container. I
know we can do that, but only, it seems, justified left or right...

Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/

On Monday, June 7, 2004, at 01:19  AM, Kristof Neirynck wrote:

>> OK, I lied. Second question: your solution is very usable; I class
>> this as 'elegant' because all the img/caption pairs are contained in
>> one (open-ended) list. Just what I was after. But just out of
>> interest, do you think it's possible to go one step further, and
>> style the list so that the number of images in a row varies as window
>> is resized - still keeping the 'grid' centred - for a truly liquid
>> layout?
>
> No it can't be done without javascript.
> I don't have the time to work on a script for that right now.
>
> You said you wanted something to replace *ONE* table.
> This does replace one table.
> To replace nested tables is a whole other ballgame.

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*


*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Nick Gleitzman]

Thanks again, Kristof. I appreciate the time you've put into this; I 
have to get back to work too.

I'm not sure that even nesting tables would give the liquid layout; 
surely a table by definition has a hard-coded number of columns? I 
guess my vision is of a CSS solution that not only equals what tables 
can do, but betters it - by allowing the 'rows' to have a variable 
number of columns, according to the width of the enclosing container. I 
know we can do that, but only, it seems, justified left or right...

Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Monday, June 7, 2004, at 01:19  AM, Kristof Neirynck wrote:
OK, I lied. Second question: your solution is very usable; I class 
this as 'elegant' because all the img/caption pairs are contained in 
one (open-ended) list. Just what I was after. But just out of 
interest, do you think it's possible to go one step further, and 
style the list so that the number of images in a row varies as window 
is resized - still keeping the 'grid' centred - for a truly liquid 
layout?
No it can't be done without javascript.
I don't have the time to work on a script for that right now.
You said you wanted something to replace *ONE* table.
This does replace one table.
To replace nested tables is a whole other ballgame.
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Kristof Neirynck]

Mike Pepper wrote:
Far out!
Kristof, well done, mate :o) Big smiley for you.
Nick Gleitzman wrote:
I'm with Mike - that's brilliant. It'll certainly fix my immediate 
needs. Thanks, Kristof!
Thank you both.
Talking about:

Now just to implement it ...
I only tested in op6, op7.5, ff0.8, ie6
All on windows, I don't own a mac and don't garantee it works there.
You will probably also need to hide the css from netscape 4.
One question: what's this hack for?
* html #images a {
height: 100px;
he\ight: 95px;
}
Boxmodel hack for ie5.0 win.
The "* html" makes shure only ie sees it.
The first value is seen by all ie's, it includes the padding.
The second is only seen by ie6 and overwrites the previous one.
Ie6 MUST be in standards compliance mode for this to be usefull.
I can write this a lot faster than the tantek hack.
See: A Modified SBMH (Tan hack)

OK, I lied. Second question: your solution is very usable; I class this 
as 'elegant' because all the img/caption pairs are contained in one 
(open-ended) list. Just what I was after. But just out of interest, do 
you think it's possible to go one step further, and style the list so 
that the number of images in a row varies as window is resized - still 
keeping the 'grid' centred - for a truly liquid layout?
No it can't be done without javascript.
I don't have the time to work on a script for that right now.
You said you wanted something to replace *ONE* table.
This does replace one table.
To replace nested tables is a whole other ballgame.
--
Kristof
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[t94xr.net.nz webmaster]

- Original Message - 
From: "Nick Gleitzman" <[EMAIL PROTECTED]>
To: <[EMAIL PROTECTED]>
Sent: Sunday, June 06, 2004 9:42 PM
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions


> I have a 400MHz iMac you can have for $300 - that's less than a 
> software upgrade. I'll even load all the browsers on it for you.
> 
> Damn. No self contol. Sorry. I'm off for a Bex and a good lie down.
> 
> Nick
> ___
> Omnivision. Websight.
> http://www.omnivision.com.au/
> On Sunday, June 6, 2004, at 07:18  PM, Bert Doorn wrote:
> 
> > I believe this is heading off-topic, but in a nutshell...  Wasting 
> > money for
> > me is to buy a system I won't use.
> 
> *
> The discussion list for http://webstandardsgroup.org/
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
> * 
> 
> 
> 
> 

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Rick Faaberg]

On 6/6/04 2:42 AM "Nick Gleitzman" <[EMAIL PROTECTED]> sent this out:

> Damn. No self contol. Sorry. I'm off for a Bex and a good lie down.

When in doubt, delete them.

I do.

Rick Faaberg

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Nick Gleitzman]

I have a 400MHz iMac you can have for $300 - that's less than a 
software upgrade. I'll even load all the browsers on it for you.

Damn. No self contol. Sorry. I'm off for a Bex and a good lie down.
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Sunday, June 6, 2004, at 07:18  PM, Bert Doorn wrote:
I believe this is heading off-topic, but in a nutshell...  Wasting 
money for
me is to buy a system I won't use.
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Michaël Willemot]

I'm looking for something similar, wondering what a good html syntax could  
be for this.
i need a title, image and a description:

<-- Title   Title2  Title3-->
<-- [img] descrip   [img] descr [img] another -->
<-- tion of thislong  -->
<-- image   description   -->
<--   -->
<-- Title4  Title5  Title6-->
<-- [img] descrip   [img] descr [img] another -->
<-- tion of thislong  -->
<-- image   description   -->
<--   -->
<-- Title7-->
<-- [img] descrip -->
<-- tion of this  -->
<-- image -->
greetz
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*

RE: [WSG] Centering a liquid grid of image thumbs and captions

[Bert Doorn]

Hugh

> Don't know what constitutes 'wasting money' for you, 

I believe this is heading off-topic, but in a nutshell...  Wasting money for
me is to buy a system I won't use.

> The most compliant browsers, including the default one, are found on 
> the Mac. As this list has so often said, develop first for standards, 
> and then figure out what needs to be done to the code to address IE 
> shortcomings.

And is is also said..  The VAST majority of people out there are using a
Windows based PC with MSIE5.5 or 6.  

Heck, I might as well buy a mainframe running Unix while I'm at it because
some people use it?

It's a matter of ecomomics.

> Just my 2c.

And mine

-- 
Bert Doorn, Better Web Design
www.betterwebdesign.com.au
Fast-loading, user-friendly websites


*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Nick Gleitzman]

Wow. I (and no doubt every other Mac user in the world) will be shocked 
and deeply perturbed to discover that we've wasted our money. I wonder 
if Apple give refunds?

Let me suggest that the direction this thread is taking should stop 
right here - it's gonna get off-topic (ie Mac v PC) really fast.

I think most people will agree that a real web dev environment includes 
the ability to test across paltforms and browsers. 'Nuff said?

Ah, but I can't resist this: I have 3 Windows 'boxes' (WIn2K/IE5.5, 
Win2K/IE6 and WinXP/IE6) running on my Mac. Can your PC do that?

Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Sunday, June 6, 2004, at 02:49  PM, Bert Doorn wrote:
I don't know how my site looks on a Mac (I don't have one and am not 
going
to waste my money on one), but it's to be expected.
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [WSG] Centering a liquid grid of image thumbs and captions

[Mike Pepper]

Bert,

That's what I came up with but they remain uncentred within the container.

Would you care to apply your expertise to something like --

... a standard structure, a list (ul, li ...) which holds images and
associated captions centred in a fluid container.

e.g. -

<-- [img] [img] [img] [img] [img] ... ->
<-- [img] [img] [img] [img] [img] ... ->
<--   [img] [img] [img]   ->

(I know I've posted this twice before but it seems that people are missing
the point, the nub of the requirement: centred within a container.)

Mike Pepper
(optimistic) Accessible Web Developer
www.seowebsitepromotion.com
www.gawds.org



-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Bert Doorn
Sent: 06 June 2004 05:05
To: [EMAIL PROTECTED]
Subject: RE: [WSG] Centering a liquid grid of image thumbs and captions


G'day

Sorry, I emailed direct rather than to the list.

Here it is:

I stay away from using NESTED tables

I try to use DIVS only (and it's fine in simple layouts)

I use a maximum of one table per page, if it makes life
easier, such as where there is a complex layout, or where I
have something that, with some imagination, could qualify as
"tabular data".

Having said all that, if you can control the height of the
captions, you could use divs or ps with a fixed height.
Have a look at the portfolio page on my site (url in
signature) for an example.

I use paragraphs here, but you could use divs, an unordered
list,   or whatever :-)  The beauty (to me) of this set up is
that at different resolutoins you get a different number of
thumbs across.  For instance, at 800x600 I see 5 across, at
1024x768 there's 7 and at 1280x1024 I get as many as 9 across.

P.S. I know this site isn't perfect.  Am working on it.

Regards
--
Bert Doorn, Better Web Design
www.betterwebdesign.com.au
Fast-loading, user-friendly websites


*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [WSG] Centering a liquid grid of image thumbs and captions

[Mike Pepper]

Been there, Nick --

I am looking for a standard structure, a list (ul, li ...) which holds
images and associated captions centred in a fluid container.

e.g. -

<-- [img] [img] [img] [img] [img] ... ->
<-- [img] [img] [img] [img] [img] ... ->
<--   [img] [img] [img]   ->

That's what we need, eh :o)

Mike

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Nick Gleitzman
Sent: 06 June 2004 04:33
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions


I'm with Mike - that's brilliant. It'll certainly fix my immediate
needs. Thanks, Kristof!

One question: what's this hack for?

* html #images a {
 height: 100px;
 he\ight: 95px;
}

OK, I lied. Second question: your solution is very usable; I class this
as 'elegant' because all the img/caption pairs are contained in one
(open-ended) list. Just what I was after. But just out of interest, do
you think it's possible to go one step further, and style the list so
that the number of images in a row varies as window is resized - still
keeping the 'grid' centred - for a truly liquid layout?

Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/

On Sunday, June 6, 2004, at 04:02  AM, Kristof Neirynck wrote:

> Nick Gleitzman wrote:
>> I've been trying to emulate, with CSS alone, what I've been doing for
>>  years with tables: create a grid of thumbnails, each with a caption
>> below, both image and caption linked to an enlargement. We all know
>> how  easy that is; center the table, center the cell content
>> vertically, add  some cell padding. Bingo.
>> Any takers?
> [snip]
>
> Do you mean something like this?
> <http://kristof.f2o.org/test/image_thumbs_and_captions/>
>
>
> --
> Kristof
> *
> The discussion list for http://webstandardsgroup.org/
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
> *
>
>

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*


*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and captions

[Mike Pepper]

7 sinz, If you noticed, I wasn't using tables
http://www.english-sofas.co.uk/els_new/value_leather_sofas_0.htm. The
challenge was to incorporate fluid and centred linear lists. The presented
solution doesn't actually satisfy the requirement but does so for the client
(who loved the site then mentioned centred product ranges). Good enough for
me at the moment.

What I was missing was the fudge to give a 25%-ish value to the image
block -- thus causing it to stretch and centre, but effectively limiting the
display to 4 images per row.

Good fudge, though.

But let me state again:-

I am looking for a standard structure, a list (ul, li ...) which holds
images and associated captions centred in a fluid container.

e.g. -

<-- [img] [img] [img] [img] [img] ... ->
<-- [img] [img] [img] [img] [img] ... ->
<--   [img] [img] [img]   ->

Any takers?

Mike Pepper
Accessible Web Developer
www.seowebsitepromotion.com
www.gawds.org


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of 7 sinz
Sent: 05 June 2004 23:50
To: [EMAIL PROTECTED]
Subject: RE: [Spam] Re: [WSG] Centering a liquid grid of image thumbs
and captions



doesnt look like he wants to use tables anymore



>From: "Mike Pepper" <[EMAIL PROTECTED]>
>Reply-To: [EMAIL PROTECTED]
>To: <[EMAIL PROTECTED]>
>Subject: RE: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and
>captions
>Date: Sat, 5 Jun 2004 19:35:24 +0100
>
>Far out!
>
>Kristof, well done, mate :o) Big smiley for you.
>
>Now just to implement it ...
>
>Many thanks,
>
>Mike Pepper
>(grateful) Accessible Web Developer
>www.seowebsitepromotion.com
>www.gawds.org
>
>
>-Original Message-
>From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
>Behalf Of Kristof Neirynck
>Sent: 05 June 2004 19:03
>To: [EMAIL PROTECTED]
>Subject: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and
>captions
>
>
>Nick Gleitzman wrote:
> > I've been trying to emulate, with CSS alone, what I've been doing for
> > years with tables: create a grid of thumbnails, each with a caption
> > below, both image and caption linked to an enlargement. We all know how
> > easy that is; center the table, center the cell content vertically, add
> > some cell padding. Bingo.
> >
> > Any takers?
> >
>[snip]
>
>Do you mean something like this?
><http://kristof.f2o.org/test/image_thumbs_and_captions/>
>
>
>--
>Kristof



*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Hugh Todd]

Bert,
Don't know what constitutes 'wasting money' for you, but to me it makes 
sense to buy a system with a commitment to open standards (and quite a 
lot of open source as well) rather than one which seems to have as its 
goal the sabotaging of open standards for the purpose of ensuring that 
the majority stays locked into its proprietary world.

The most compliant browsers, including the default one, are found on 
the Mac. As this list has so often said, develop first for standards, 
and then figure out what needs to be done to the code to address IE 
shortcomings.

Just my 2c.
-Hugh Todd
I don't know how my site looks on a Mac (I don't have one and am not 
going
to waste my money on one), but it's to be expected.
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [WSG] Centering a liquid grid of image thumbs and captions

[Bert Doorn]

Hi Nick

I don't know how my site looks on a Mac (I don't have one and am not going
to waste my money on one), but it's to be expected.

But as my PS said, I am changing the site.  Can't be bothered to do to much
to it at the moment as I don't need extra work and it works for the vast
majority anyway.  

It's one of those cases where I have used features that work in the
mainstream browser on the mainstream platform, but which are seemingly
impossible to implement on other browsers.  I have another site that's more
up to date. www.bwdzine.net - nothing fancy there, just plain boring CSS
divs (seems the server is down however).  That one probably doesn't work in
Mac IE either.

Regards
-- 
Bert Doorn, Better Web Design
www.betterwebdesign.com.au
Fast-loading, user-friendly websites



-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Nick Gleitzman
Sent: Sunday, 6 June 2004 12:26 PM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions


Thanks, Bert - that's a different and very useful take on the problem.

Er - Notwithstanding your PS, do you know how unwell your site is in 
Mac browsers? IE5 particularly - the only  thing that shows up is the 
bgrd image (red at left). I think it's the height:100% that's doing 
it...

If you want, I can send you some screenshots direct; I have a range of 
IE versions on both OS9 and OSX, and Safari 1 for OSX. Maybe some 
others might like to contribute sshots from other browsers?

Nick

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Nick Gleitzman]

Thanks, Bert - that's a different and very useful take on the problem.
Er - Notwithstanding your PS, do you know how unwell your site is in 
Mac browsers? IE5 particularly - the only  thing that shows up is the 
bgrd image (red at left). I think it's the height:100% that's doing 
it...

If you want, I can send you some screenshots direct; I have a range of 
IE versions on both OS9 and OSX, and Safari 1 for OSX. Maybe some 
others might like to contribute sshots from other browsers?

Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Sunday, June 6, 2004, at 02:05  PM, Bert Doorn wrote:
G'day
Sorry, I emailed direct rather than to the list.
Here it is:
I stay away from using NESTED tables
I try to use DIVS only (and it's fine in simple layouts)
I use a maximum of one table per page, if it makes life
easier, such as where there is a complex layout, or where I
have something that, with some imagination, could qualify as
"tabular data".
Having said all that, if you can control the height of the
captions, you could use divs or ps with a fixed height.
Have a look at the portfolio page on my site (url in
signature) for an example.
I use paragraphs here, but you could use divs, an unordered
list,   or whatever :-)  The beauty (to me) of this set up is
that at different resolutoins you get a different number of
thumbs across.  For instance, at 800x600 I see 5 across, at
1024x768 there's 7 and at 1280x1024 I get as many as 9 across.
P.S. I know this site isn't perfect.  Am working on it.
Regards
--
Bert Doorn, Better Web Design
www.betterwebdesign.com.au
Fast-loading, user-friendly websites

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Nick Gleitzman
Sent: Sunday, 6 June 2004 11:35 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions
Roy - ummm,  did I miss a post? Can you point me to 'Bert's layout'?
Thanks
Nick
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [WSG] Centering a liquid grid of image thumbs and captions

[Bert Doorn]

G'day

Sorry, I emailed direct rather than to the list.

Here it is:

I stay away from using NESTED tables

I try to use DIVS only (and it's fine in simple layouts)

I use a maximum of one table per page, if it makes life
easier, such as where there is a complex layout, or where I 
have something that, with some imagination, could qualify as 
"tabular data".

Having said all that, if you can control the height of the
captions, you could use divs or ps with a fixed height.  
Have a look at the portfolio page on my site (url in 
signature) for an example.  

I use paragraphs here, but you could use divs, an unordered 
list,   or whatever :-)  The beauty (to me) of this set up is
that at different resolutoins you get a different number of 
thumbs across.  For instance, at 800x600 I see 5 across, at 
1024x768 there's 7 and at 1280x1024 I get as many as 9 across.

P.S. I know this site isn't perfect.  Am working on it.

Regards
-- 
Bert Doorn, Better Web Design
www.betterwebdesign.com.au
Fast-loading, user-friendly websites



-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Nick Gleitzman
Sent: Sunday, 6 June 2004 11:35 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions


Roy - ummm,  did I miss a post? Can you point me to 'Bert's layout'?

Thanks
Nick

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Nick Gleitzman]

Roy - ummm,  did I miss a post? Can you point me to 'Bert's layout'?
Thanks
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Sunday, June 6, 2004, at 01:59  AM, RC Pierce wrote:
Bert's thumbnail layout is really quite straight forward. Wish I'd o' 
thought of using inline
paragraphs as containers when I was having trouble with a thumbnail 
page, myself. The problem of
attaching caption to image, getting it to center with the thumbnail is 
completely overcome using
that simple technique. Beats <.td><.img><.br /><.a>caption<./a><./td> 
(ignore dots) all to heck when
it comes to elasticity and fluidity. Nice one, Bert.
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Nick Gleitzman]

I'm with Mike - that's brilliant. It'll certainly fix my immediate 
needs. Thanks, Kristof!

One question: what's this hack for?
* html #images a {
height: 100px;
he\ight: 95px;
}
OK, I lied. Second question: your solution is very usable; I class this 
as 'elegant' because all the img/caption pairs are contained in one 
(open-ended) list. Just what I was after. But just out of interest, do 
you think it's possible to go one step further, and style the list so 
that the number of images in a row varies as window is resized - still 
keeping the 'grid' centred - for a truly liquid layout?

Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Sunday, June 6, 2004, at 04:02  AM, Kristof Neirynck wrote:
Nick Gleitzman wrote:
I've been trying to emulate, with CSS alone, what I've been doing for 
 years with tables: create a grid of thumbnails, each with a caption  
below, both image and caption linked to an enlargement. We all know 
how  easy that is; center the table, center the cell content 
vertically, add  some cell padding. Bingo.
Any takers?
[snip]
Do you mean something like this?

--
Kristof
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and captions

[7 sinz]

doesnt look like he wants to use tables anymore

From: "Mike Pepper" <[EMAIL PROTECTED]>
Reply-To: [EMAIL PROTECTED]
To: <[EMAIL PROTECTED]>
Subject: RE: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and 
captions
Date: Sat, 5 Jun 2004 19:35:24 +0100

Far out!
Kristof, well done, mate :o) Big smiley for you.
Now just to implement it ...
Many thanks,
Mike Pepper
(grateful) Accessible Web Developer
www.seowebsitepromotion.com
www.gawds.org
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Kristof Neirynck
Sent: 05 June 2004 19:03
To: [EMAIL PROTECTED]
Subject: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and
captions
Nick Gleitzman wrote:
> I've been trying to emulate, with CSS alone, what I've been doing for
> years with tables: create a grid of thumbnails, each with a caption
> below, both image and caption linked to an enlargement. We all know how
> easy that is; center the table, center the cell content vertically, add
> some cell padding. Bingo.
>
> Any takers?
>
[snip]
Do you mean something like this?
<http://kristof.f2o.org/test/image_thumbs_and_captions/>
--
Kristof
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
_
What's your house worth? Click here to find out:  
http://www.ninemsn.realestate.com.au

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and captions

[Mike Pepper]

Far out!

Kristof, well done, mate :o) Big smiley for you.

Now just to implement it ...

Many thanks,

Mike Pepper
(grateful) Accessible Web Developer
www.seowebsitepromotion.com
www.gawds.org


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Kristof Neirynck
Sent: 05 June 2004 19:03
To: [EMAIL PROTECTED]
Subject: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and
captions


Nick Gleitzman wrote:
> I've been trying to emulate, with CSS alone, what I've been doing for  
> years with tables: create a grid of thumbnails, each with a caption  
> below, both image and caption linked to an enlargement. We all know how  
> easy that is; center the table, center the cell content vertically, add  
> some cell padding. Bingo.
> 
> Any takers?
> 
[snip]

Do you mean something like this?
<http://kristof.f2o.org/test/image_thumbs_and_captions/>


-- 
Kristof
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 


*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Kristof Neirynck]

Nick Gleitzman wrote:
I've been trying to emulate, with CSS alone, what I've been doing for  
years with tables: create a grid of thumbnails, each with a caption  
below, both image and caption linked to an enlargement. We all know how  
easy that is; center the table, center the cell content vertically, add  
some cell padding. Bingo.

Any takers?
[snip]
Do you mean something like this?

--
Kristof
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[RC Pierce]

"I hope you're not suggesting going back to nested tables are you?"

Not on your life. Tableless, free-flowing, css driven layout is really the ticket, to 
be sure. I
much prefer the ease with which a page can be constructed and styled later. Add to 
this that once a
working template is created, one never has to consider presentation again. Adding new 
content to a
site is so much easier when all one needs to do is insert it into a 'proven' 
construct. Not to
mention, restyling a site doesn't involve 're-tooling' it. This could never be done 
using tables.

Bert's thumbnail layout is really quite straight forward. Wish I'd o' thought of using 
inline
paragraphs as containers when I was having trouble with a thumbnail page, myself. The 
problem of
attaching caption to image, getting it to center with the thumbnail is completely 
overcome using
that simple technique. Beats <.td><.img><.br /><.a>caption<./a><./td> (ignore dots) 
all to heck when
it comes to elasticity and fluidity. Nice one, Bert.

On the other hand, if a page is not elastic (shudder) then a table works just fine, at 
least this
one does, anyway. It is still very linear.

Now this brings up the question: Is there a 'standard' way for linearizing tables? 
Does one move
across, then down row by row, or down then across column by column?

Roy


- Original Message - 
From: "7 sinz" <[EMAIL PROTECTED]>
To: <[EMAIL PROTECTED]>
Sent: Saturday, June 05, 2004 3:56 AM
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions



yes use tables, but use them wiely, use them as they were intended for (
tabular data )
I hope you're not suggesting going back to nested tables are you?

For me CSS holds to many advantages; and i feel it is just the future ( for
me ne ways )to effectivley render beautiful sematic webpages.

-peace

>From: "RC Pierce" <[EMAIL PROTECTED]>
>Reply-To: [EMAIL PROTECTED]
>To: <[EMAIL PROTECTED]>
>Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions
>Date: Sat, 5 Jun 2004 03:26:17 -0600
>
>They haven't deprecated the table tag, yet, have they? Maybe I'm just a
>beginner, but I can easily
>follow the difficulty folks are having with 'pure css.' It was fun for me
>until I saw that a
>hackless site was a near impossibility, even if it's just the 3-pixel jog
>hack (which doesn't work
>for lists).
>
>think the jury is going to be out for a long time on this one. There really
>is no 'hack free' way
>to deal with css and cross browser support. Sure there have been plenty of
>'elegant' uses of
>tableless markup, but when it takes a simple process and turns it into a
>morass of problems and
>surprises, it really does cross the line.
>
>Until the 'table police' show up and put on the cuffs, the best thing is do
>what is expedient, and
>what is effective and dependable. Whether for layout or tabular data, the
>use of tables, and their
>predictable results should not be discounted or frowned upon--especially if
>the table makes sense
>when linearized.
>
>What you are trying to do 'fits the bill' for a legitimate table. Until CSS
>reaches the point where
>proper centering, width and height is possible across all browsers and all
>platforms without hacks
>and kludges, hybrid designs should be expected, and not discouraged. As
>long as tables are still a
>part of html, I say use them.
>
>Roy
>
>
>- Original Message -
>From: "Rick Faaberg" <[EMAIL PROTECTED]>
>To: <[EMAIL PROTECTED]>
>Sent: Friday, June 04, 2004 10:30 PM
>Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions
>
>
>On 6/4/04 9:10 PM "Nick Gleitzman" <[EMAIL PROTECTED]> sent this out:
>
> > A parting thought: does a series of thumbnail/caption pairs actually
>qualify
> > as tabular data - thus leaving me feeling better about giving up and
>using a
> > table to lay the bloody thing out anyway?
>
>That was my first thought when I began to read about your angst.
>
>It's tabular data - deal with that way. Get it over with.
>
>I'm no authority.
>
>Rick Faaberg
>
>*
>The discussion list for http://webstandardsgroup.org/
>See http://webstandardsgroup.org/mail/guidelines.cfm
>for some hints on posting to the list & getting help
>*
>
>
>
>*
>The discussion list for http://webstandardsgroup.org/
>See http://webstandardsgroup.org/mail/guidelines.cfm
&

RE: [WSG] Centering a liquid grid of image thumbs and captions

[Mike Pepper]

Yep :o)

But that begs the thought: when is a table not a table but a list of objects
with attributes and, therefore, the only criterion for dismissing them from
mark-up would be nesting. However, there are practical constraints to this
approach, not least of which the complexity of nested CSS markup.

Put another way: is CSS often used as a hammer to crack a peanut?

Good point, Rick.

Mike Pepper
(practical) Accessible Web Developer
www.seowebsitepromotion.com
www.gawds.org


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Rick Faaberg
Sent: 05 June 2004 11:56
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions


On 6/5/04 3:47 AM "Mike Pepper" <[EMAIL PROTECTED]> sent
this out:

> Not so with a sequence of images (unless, of course, you're ordering them
> alphabetically but that's not the issue).

Couldn't Cost and Monday have a value which is an image along with a
caption?

:-)

Rick Faaberg

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*



*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [WSG] Centering a liquid grid of image thumbs and captions

[Mike Pepper]

My hovercraft is full of eels ;o)

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of 7 sinz
Sent: 05 June 2004 12:07
To: [EMAIL PROTECTED]
Subject: RE: [WSG] Centering a liquid grid of image thumbs and captions


i wasnt talking to you ;)


>From: "Mike Pepper" <[EMAIL PROTECTED]>
>Reply-To: [EMAIL PROTECTED]
>To: "WSG" <[EMAIL PROTECTED]>
>Subject: RE: [WSG] Centering a liquid grid of image thumbs and captions
>Date: Sat, 5 Jun 2004 11:47:12 +0100
>
>It's not tabular data, it's a linear stream of images with captions. One
>way
>of looking at it is to take the thumbs and associated text and jumble the
>sequence; do that with a proper table grid and you'll have a mess since the
>row and columnar formats will be meaningless.
>
>For instance --
>
>   Mon Tue Wed Thu Fri Sat Sun
>  Cost  10  20  20  10  20  20  20
>  Unit   3   5   2   6   4   1   7
>
>Cost/Sat = 20. It's position must remain fixed to make sense, although it
>may possibly remain true in another location. Incorporate the Unit value of
>the matrix and moving anything invalidates the results. This is a table;
>rows and columns point to specific cells; rows and columns have meaning.
>Move the cell values within the grid and the results are nonsense.
>
>Not so with a sequence of images (unless, of course, you're ordering them
>alphabetically but that's not the issue).
>
>Make sense?
>
>Mike Pepper
>Accessible Web Developer (after a great night's sleep)
>www.seowebsitepromotion.com
>www.gawds.org
>
>
>
>
>-----Original Message-----
>From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
>Behalf Of Rick Faaberg
>Sent: 05 June 2004 05:30
>To: [EMAIL PROTECTED]
>Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions
>
>
>On 6/4/04 9:10 PM "Nick Gleitzman" <[EMAIL PROTECTED]> sent this out:
>
> > A parting thought: does a series of thumbnail/caption pairs actually
>qualify
> > as tabular data - thus leaving me feeling better about giving up and
>using
>a
> > table to lay the bloody thing out anyway?
>
>That was my first thought when I began to read about your angst.
>
>It's tabular data - deal with that way. Get it over with.
>
>I'm no authority.
>
>Rick Faaberg
>
>*
>The discussion list for http://webstandardsgroup.org/
>See http://webstandardsgroup.org/mail/guidelines.cfm
>for some hints on posting to the list & getting help
>*
>
>
>
>*
>The discussion list for http://webstandardsgroup.org/
>See http://webstandardsgroup.org/mail/guidelines.cfm
>for some hints on posting to the list & getting help
>*
>

_
Smart Saving with ING Direct – earn 5.25% p.a. variable rate:
http://ad.au.doubleclick.net/clk;7249209;8842331;n?http://www.ingdirect.com.
au/burst6offer.asp?id=8

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*



*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [WSG] Centering a liquid grid of image thumbs and captions

[7 sinz]

i wasnt talking to you ;)

From: "Mike Pepper" <[EMAIL PROTECTED]>
Reply-To: [EMAIL PROTECTED]
To: "WSG" <[EMAIL PROTECTED]>
Subject: RE: [WSG] Centering a liquid grid of image thumbs and captions
Date: Sat, 5 Jun 2004 11:47:12 +0100
It's not tabular data, it's a linear stream of images with captions. One 
way
of looking at it is to take the thumbs and associated text and jumble the
sequence; do that with a proper table grid and you'll have a mess since the
row and columnar formats will be meaningless.

For instance --
  Mon Tue Wed Thu Fri Sat Sun
 Cost  10  20  20  10  20  20  20
 Unit   3   5   2   6   4   1   7
Cost/Sat = 20. It's position must remain fixed to make sense, although it
may possibly remain true in another location. Incorporate the Unit value of
the matrix and moving anything invalidates the results. This is a table;
rows and columns point to specific cells; rows and columns have meaning.
Move the cell values within the grid and the results are nonsense.
Not so with a sequence of images (unless, of course, you're ordering them
alphabetically but that's not the issue).
Make sense?
Mike Pepper
Accessible Web Developer (after a great night's sleep)
www.seowebsitepromotion.com
www.gawds.org

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Rick Faaberg
Sent: 05 June 2004 05:30
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions
On 6/4/04 9:10 PM "Nick Gleitzman" <[EMAIL PROTECTED]> sent this out:
> A parting thought: does a series of thumbnail/caption pairs actually
qualify
> as tabular data - thus leaving me feeling better about giving up and 
using
a
> table to lay the bloody thing out anyway?

That was my first thought when I began to read about your angst.
It's tabular data - deal with that way. Get it over with.
I'm no authority.
Rick Faaberg
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
_
Smart Saving with ING Direct – earn 5.25% p.a. variable rate:  
http://ad.au.doubleclick.net/clk;7249209;8842331;n?http://www.ingdirect.com.au/burst6offer.asp?id=8

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Rick Faaberg]

On 6/5/04 3:47 AM "Mike Pepper" <[EMAIL PROTECTED]> sent
this out:

> Not so with a sequence of images (unless, of course, you're ordering them
> alphabetically but that's not the issue).

Couldn't Cost and Monday have a value which is an image along with a
caption?

:-)

Rick Faaberg

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

RE: [WSG] Centering a liquid grid of image thumbs and captions

[Mike Pepper]

It's not tabular data, it's a linear stream of images with captions. One way
of looking at it is to take the thumbs and associated text and jumble the
sequence; do that with a proper table grid and you'll have a mess since the
row and columnar formats will be meaningless.

For instance --

  Mon Tue Wed Thu Fri Sat Sun
 Cost  10  20  20  10  20  20  20
 Unit   3   5   2   6   4   1   7

Cost/Sat = 20. It's position must remain fixed to make sense, although it
may possibly remain true in another location. Incorporate the Unit value of
the matrix and moving anything invalidates the results. This is a table;
rows and columns point to specific cells; rows and columns have meaning.
Move the cell values within the grid and the results are nonsense.

Not so with a sequence of images (unless, of course, you're ordering them
alphabetically but that's not the issue).

Make sense?

Mike Pepper
Accessible Web Developer (after a great night's sleep)
www.seowebsitepromotion.com
www.gawds.org




-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Rick Faaberg
Sent: 05 June 2004 05:30
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions


On 6/4/04 9:10 PM "Nick Gleitzman" <[EMAIL PROTECTED]> sent this out:

> A parting thought: does a series of thumbnail/caption pairs actually
qualify
> as tabular data - thus leaving me feeling better about giving up and using
a
> table to lay the bloody thing out anyway?

That was my first thought when I began to read about your angst.

It's tabular data - deal with that way. Get it over with.

I'm no authority.

Rick Faaberg

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*



*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[7 sinz]

yes use tables, but use them wiely, use them as they were intended for ( 
tabular data )
I hope you're not suggesting going back to nested tables are you?

For me CSS holds to many advantages; and i feel it is just the future ( for 
me ne ways )to effectivley render beautiful sematic webpages.

-peace
From: "RC Pierce" <[EMAIL PROTECTED]>
Reply-To: [EMAIL PROTECTED]
To: <[EMAIL PROTECTED]>
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions
Date: Sat, 5 Jun 2004 03:26:17 -0600
They haven't deprecated the table tag, yet, have they? Maybe I'm just a 
beginner, but I can easily
follow the difficulty folks are having with 'pure css.' It was fun for me 
until I saw that a
hackless site was a near impossibility, even if it's just the 3-pixel jog 
hack (which doesn't work
for lists).

think the jury is going to be out for a long time on this one. There really 
is no 'hack free' way
to deal with css and cross browser support. Sure there have been plenty of 
'elegant' uses of
tableless markup, but when it takes a simple process and turns it into a 
morass of problems and
surprises, it really does cross the line.

Until the 'table police' show up and put on the cuffs, the best thing is do 
what is expedient, and
what is effective and dependable. Whether for layout or tabular data, the 
use of tables, and their
predictable results should not be discounted or frowned upon--especially if 
the table makes sense
when linearized.

What you are trying to do 'fits the bill' for a legitimate table. Until CSS 
reaches the point where
proper centering, width and height is possible across all browsers and all 
platforms without hacks
and kludges, hybrid designs should be expected, and not discouraged. As 
long as tables are still a
part of html, I say use them.

Roy
- Original Message -
From: "Rick Faaberg" <[EMAIL PROTECTED]>
To: <[EMAIL PROTECTED]>
Sent: Friday, June 04, 2004 10:30 PM
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions
On 6/4/04 9:10 PM "Nick Gleitzman" <[EMAIL PROTECTED]> sent this out:
> A parting thought: does a series of thumbnail/caption pairs actually 
qualify
> as tabular data - thus leaving me feeling better about giving up and 
using a
> table to lay the bloody thing out anyway?

That was my first thought when I began to read about your angst.
It's tabular data - deal with that way. Get it over with.
I'm no authority.
Rick Faaberg
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*
_
Open an Online Savings Account today & collect a bonus $30*!  
http://clk.atdmt.com/1DG/go/hsb005000991dg/direct/01/

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[RC Pierce]

They haven't deprecated the table tag, yet, have they? Maybe I'm just a beginner, but 
I can easily
follow the difficulty folks are having with 'pure css.' It was fun for me until I saw 
that a
hackless site was a near impossibility, even if it's just the 3-pixel jog hack (which 
doesn't work
for lists).

I think the jury is going to be out for a long time on this one. There really is no 
'hack free' way
to deal with css and cross browser support. Sure there have been plenty of 'elegant' 
uses of
tableless markup, but when it takes a simple process and turns it into a morass of 
problems and
surprises, it really does cross the line.

Until the 'table police' show up and put on the cuffs, the best thing is do what is 
expedient, and
what is effective and dependable. Whether for layout or tabular data, the use of 
tables, and their
predictable results should not be discounted or frowned upon--especially if the table 
makes sense
when linearized.

What you are trying to do 'fits the bill' for a legitimate table. Until CSS reaches 
the point where
proper centering, width and height is possible across all browsers and all platforms 
without hacks
and kludges, hybrid designs should be expected, and not discouraged. As long as tables 
are still a
part of html, I say use them.

Roy


- Original Message - 
From: "Rick Faaberg" <[EMAIL PROTECTED]>
To: <[EMAIL PROTECTED]>
Sent: Friday, June 04, 2004 10:30 PM
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions


On 6/4/04 9:10 PM "Nick Gleitzman" <[EMAIL PROTECTED]> sent this out:

> A parting thought: does a series of thumbnail/caption pairs actually qualify
> as tabular data - thus leaving me feeling better about giving up and using a
> table to lay the bloody thing out anyway?

That was my first thought when I began to read about your angst.

It's tabular data - deal with that way. Get it over with.

I'm no authority.

Rick Faaberg

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*



*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Mike Pepper]

At to whether a list of thumbs is truly tabular ... I think not. It will
visually appear such but it's not a grid -- for which tables should be used,
as a matrix.

Tables have rows and columns at which cells intersect as combined related
values; a contiguous list of thumbs and associated captions have no common
properties other than being a picture and text and *will make sense in
isolation*.

But you're not going to like what I've discovered as a result of
experimenting with tables ...

The bloody things don't inherit relative (em- and percentage-based) font and
line-size attributes in IE 5/5.1, which means more bloody CSS and/or markup
to compensate for that cock-up.

Don't you just love being a standards-compliant developer :o(

So as I see it, it's a question of the lesser of two evils: wrap each image
and associated caption in another container and bulk the markup or use
semantically incorrect cells and bulk up the CSS to cope with IE's
shortcomings.

Funnily enough, the client previewed the near-finished site update yesterday
and was delighted ... then asked if I could centre the thumbs ...

I shall endeavour to persevere :o)

There is always a resolution

Mike Pepper
Accessible Web Developer (with attitude)
http://www.seowebsitepromotion.com
http://www.gawds.org

This email and any files transmitted with it are confidential and intended
solely for the use of the individual or body to whom they are addressed.
This footnote also confirms that this email message has been swept by Norton
AntiVirus for the presence of computer viruses. If this message is received
in error, please accept our apologies.


*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

Re: [WSG] Centering a liquid grid of image thumbs and captions

[Rick Faaberg]

On 6/4/04 9:10 PM "Nick Gleitzman" <[EMAIL PROTECTED]> sent this out:

> A parting thought: does a series of thumbnail/caption pairs actually qualify
> as tabular data - thus leaving me feeling better about giving up and using a
> table to lay the bloody thing out anyway?

That was my first thought when I began to read about your angst.

It's tabular data - deal with that way. Get it over with.

I'm no authority.

Rick Faaberg

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
* 

[WSG] Centering a liquid grid of image thumbs and captions

[Nick Gleitzman]

Hi All

I was interested to see Mike Pepper's post on June 1 (IE Max-width Emulation and Auto Centre) - particularly the auto center bit - because I've been wrestling with pretty much the same problem, and it's driving me nuts.

I understand Mike's aim to be to take the whole set of thumbnail/caption pairs (li's) and have them remain centered in the enclosing box, with individual pairs rewrapping as width is resized. If you resize his page now, you get more space on the right until eventually one li jumps from bottom row to top. 

I've been trying to emulate, with CSS alone, what I've been doing for years with tables: create a grid of thumbnails, each with a caption below, both image and caption linked to an enlargement. We all know how easy that is; center the table, center the cell content vertically, add some cell padding. Bingo.

But with CSS? Man, the most frustrating thing is the time I've spent on this. "CSS is quicker. CSS is better." Unnghh... I love CSS - don't get me wrong, I'm a staunch advocate - but this is definitely counter-productive in the context of trying to produce a deadline-driven result. 

What I've been doing is trying to come up with a hybrid of the 'Centered list navbar'  from Russ's Listamatic and the Floatutorial #4 'Floating an image thumbnail gallery' .

See my own tests at ; CSS is at .

Like Mike, I'd love an elegant solution to this - preferably using a list. It's possible to do it with nested divs, but I feel that the bloated code that results from doing it that way goes against the principle of CSS. 

Any takers? 

A parting thought: does a series of thumbnail/caption pairs actually qualify as tabular data - thus leaving me feeling better about giving up and using a table to lay the bloody thing out anyway?

Thanks...

Nick Gleitzman

PS 1st post to the group... thanks to all for the time and effort. See you on the 10th.
___
Omnivision. Websight.
http://www.omnivision.com.au/