Hi -- I'm trying to figure out how to make a photo thumbnail gallery
page using CSS and no tables that (1) has a caption below each image
and (2) is centered -- so that as browser width changes the images
consistently reconstitute themselves as centered rows with the maximum
number of images on each row.

I've made a test page at http://www.americanstate.org/test/gal01/ that
illustrates what I'm aiming for and how close I've gotten. I've found
two nearly successful strategies: Use the float property (you can use
captions, but everything's edge-aligned, not center-aligned) or use
CSS-tweaked lists (you can center-align, but you can't have captions).

I actually succeeded in producing a CSS-defined thumbnail gallery page
with centered, captioned images, using the display:inline property --
but it only works in Internet Explorer 5.0 for Windows. That suggests
that what I'm aiming for is possible . . . but I want it to work in
standards-compliant browsers, too.

Would folks go take a look at my test page and see if they can solve
the problem? Thanks! I'll write up any success there and keep it in
circulation.

unamiccia@yahoo.com (Filippo Giarratano) wrote:
[color=blue]
>Hi -- I'm trying to figure out how to make a photo thumbnail gallery
>page using CSS and no tables that (1) has a caption below each image
>and (2) is centered -- so that as browser width changes the images
>consistently reconstitute themselves as centered rows with the maximum
>number of images on each row.[/color]

The proper way to do this is to use the css 2.1 value "inline-block" for
the "display" property. (only supported by recent Operas afaik)

Have you considered dropping the caption and using the title attribute?

--
Spartanicus

unamiccia@yahoo.com (Filippo Giarratano) wrote:
[color=blue]
>I actually succeeded in producing a CSS-defined thumbnail gallery page
>with centered, captioned images, using the display:inline property --
>but it only works in Internet Explorer 5.0 for Windows. That suggests
>that what I'm aiming for is possible . . . but I want it to work in
>standards-compliant browsers, too.[/color]

What happens in IE is that it uses your specified width, this is not
standard compliant behaviour, as width should be ignored for inline
elements. A standard compliant UA will ignore the set width.

--
Spartanicus

in post: <news:d825678f.0401312000.2cce1212@posting.google. com>
unamiccia@yahoo.com (Filippo Giarratano) said:
[color=blue]
> Hi -- I'm trying to figure out how to make a photo thumbnail gallery
> page using CSS and no tables that (1) has a caption below each image
> and (2) is centered -- so that as browser width changes the images
> consistently reconstitute themselves as centered rows with the maximum
> number of images on each row.[/color]

why not do something creative instead of the same old boring row/column
thumb layouts?

e.g: http://balls.bruciesusenetshit.info/



--
brucie - i usenet nude

In article Filippo Giarratano wrote:
[color=blue]
> Hi -- I'm trying to figure out how to make a photo thumbnail gallery
> page using CSS and no tables that (1) has a caption below each image
> and (2) is centered -- so that as browser width changes the images
> consistently reconstitute themselves as centered rows with the maximum
> number of images on each row.[/color]

I have thought that long too. It's been possible since Opera 5+, in
Opera, and IE god knows how long, using the bug.
[color=blue]
> I've made a test page at http://www.americanstate.org/test/gal01/ that
> illustrates what I'm aiming for and how close I've gotten. I've found
> two nearly successful strategies: Use the float property (you can use
> captions, but everything's edge-aligned, not center-aligned) or use
> CSS-tweaked lists (you can center-align, but you can't have captions).[/color]

The caption is the problem, there is no problem at all witout captions.
[color=blue]
> I actually succeeded in producing a CSS-defined thumbnail gallery page
> with centered, captioned images, using the display:inline property --
> but it only works in Internet Explorer 5.0 for Windows. That suggests
> that what I'm aiming for is possible . . . but I want it to work in
> standards-compliant browsers, too.[/color]

Unfortunately only enaugh standards compliant browser is Opera 5+

Quick and dirty hack:
http://www.student.oulu.fi/~laurirai/www/css/gallery/

This will look OK in WinIE5.5 and Opera 7.5.

It will use float:left for mozilla.

Tested with Opera 7.5p1, IE5.5, Firebird 0.7. Please tell if you test on
other browers. I hope it doesn't break anything.


--
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" ...
....[color=blue]
> http://www.student.oulu.fi/~laurirai/www/css/gallery/[/color]
[color=blue]
> It will use float:left for mozilla.[/color]

You do not specifically mention tests in Moz.
but that is the effect in Moz 1.3 (left aligned)
[color=blue]
> Tested with Opera 7.5p1, IE5.5, Firebird 0.7. Please tell if you test on
> other browers. I hope it doesn't break anything.[/color]

Works fine in IE6 on XP (centred) as well.

Both browsers will put as many images
on the line as can fit before going to the
next line of images.

HTH

--
Andrew Thompson
* http://www.PhySci.org/ Open-source software suite
* http://www.PhySci.org/codes/ Web & IT Help
* http://www.1point1C.org/ Science & Technology

In article Andrew Thompson wrote:[color=blue]
> "Lauri Raittila" ...
> ...[color=green]
> > http://www.student.oulu.fi/~laurirai/www/css/gallery/[/color]
>[color=green]
> > It will use float:left for mozilla.[/color]
>
> You do not specifically mention tests in Moz.
> but that is the effect in Moz 1.3 (left aligned)[/color]

Should have said gecko, but I never remeber how to spell it...
[color=blue][color=green]
> > Tested with Opera 7.5p1, IE5.5, Firebird 0.7. Please tell if you test on
> > other browers. I hope it doesn't break anything.[/color]
>
> Works fine in IE6 on XP (centred) as well.[/color]

Thanks

Anyone on Safari/Konqueror ? MacIE? I didn't remember what MacIE does
with display:inline and width, so I assumed it was same as win, which
might be problmem...

--
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.

> The proper way to do this is to use the css 2.1 value "inline-block" for[color=blue]
> the "display" property. (only supported by recent Operas afaik)[/color]

Precisely: I want inline blocks! But I want them in CSS that today's
browsers support. The fact that CSS 2.1 supports them suggests that
others have also struggled with this. Has anyone succeeded in
implementing inline block behavior?

brucie wrote:[color=blue]
>
> why not do something creative instead of the same old boring
> row/column thumb layouts?
>
> e.g: http://balls.bruciesusenetshit.info/[/color]

! I'm impressed.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

snip....[color=blue][color=green]
>> consistently reconstitute themselves as centered rows with the maximum
>> number of images on each row.[/color]
>
>why not do something creative instead of the same old boring row/column
>thumb layouts?
>
>e.g: http://balls.bruciesusenetshit.info/
>[/color]
Nice piece of work!






de groeten,

martin

http://home.planet.nl/~usa
http://www.route51.com

brucie schrieb:
[color=blue]
> in post: <news:d825678f.0401312000.2cce1212@posting.google. com>
> unamiccia@yahoo.com (Filippo Giarratano) said:
>
>[color=green]
>>Hi -- I'm trying to figure out how to make a photo thumbnail gallery
>>page using CSS and no tables that (1) has a caption below each image
>>and (2) is centered -- so that as browser width changes the images
>>consistently reconstitute themselves as centered rows with the maximum
>>number of images on each row.[/color]
>
>
> why not do something creative instead of the same old boring row/column
> thumb layouts?
>
> e.g: http://balls.bruciesusenetshit.info/[/color]

Clap clap clap clap! Neat demonstration.

--
Nicolai Zwar

Lauri Raittila <lauri@raittila.cjb.net> wrote in message news:<MPG.1a8729c2b3465392989e2b@news.cis.dfn.de>. ..
[color=blue]
> I have thought that long too. It's been possible since Opera 5+, in
> Opera, and IE god knows how long, using the bug.[/color]

.. . .
[color=blue]
> Quick and dirty hack:
> http://www.student.oulu.fi/~laurirai/www/css/gallery/
>
> This will look OK in WinIE5.5 and Opera 7.5.
>
> It will use float:left for mozilla.
>
> Tested with Opera 7.5p1, IE5.5, Firebird 0.7. Please tell if you test on
> other browers. I hope it doesn't break anything.[/color]

Lauri: It centers in my Opera 7.11 and IE 5.0 and floats left in
Mozilla 1.6 (all Windows), just as you intended. Good job!

Do we agree that this is the best that can be achieved until more
browsers support "inline-block"?

In article Filippo Giarratano wrote:[color=blue]
> Lauri Raittila <lauri@raittila.cjb.net> wrote:
>[color=green]
> > I have thought that long too. It's been possible since Opera 5+, in
> > Opera, and IE god knows how long, using the bug.[/color]
>
> . . .
>[color=green]
> > Quick and dirty hack:
> > http://www.student.oulu.fi/~laurirai/www/css/gallery/
> >
> > This will look OK in WinIE5.5 and Opera 7.5.
> >
> > It will use float:left for mozilla.[/color][/color]

Seem to have strange effect on Opera 6, sometimes last line is not
wrapped.
[color=blue]
> Lauri: It centers in my Opera 7.11 and IE 5.0 and floats left in
> Mozilla 1.6 (all Windows), just as you intended. Good job!
>
> Do we agree that this is the best that can be achieved until more
> browsers support "inline-block"?[/color]

I don't untill it is tested on KHTML and MacIE.

--
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 wrote:
[color=blue]
> In article Filippo Giarratano wrote:[color=green]
>> Lauri Raittila <lauri@raittila.cjb.net> wrote:
>>[color=darkred]
>> > I have thought that long too. It's been possible since Opera 5+, in
>> > Opera, and IE god knows how long, using the bug.[/color]
>>
>> . . .
>>[color=darkred]
>> > Quick and dirty hack:
>> > http://www.student.oulu.fi/~laurirai/www/css/gallery/
>> >
>> > This will look OK in WinIE5.5 and Opera 7.5.
>> >
>> > It will use float:left for mozilla.[/color][/color]
>
> Seem to have strange effect on Opera 6, sometimes last line is not
> wrapped.
>[color=green]
>> Lauri: It centers in my Opera 7.11 and IE 5.0 and floats left in
>> Mozilla 1.6 (all Windows), just as you intended. Good job!
>>
>> Do we agree that this is the best that can be achieved until more
>> browsers support "inline-block"?[/color]
>
> I don't untill it is tested on KHTML and MacIE.[/color]

Konqueror 3.1.4: the individual images are centred, but the whole table
isn't (it's on the left). Opera 7.23 (linux) has the images and the table
centred. In both cases, there's a gap between the image and the caption,
but not between the caption and the image below - this should be the other
way around, yes?

<http://hex.zapto.org/temp/2004/feb/konqueror.jpg>
<http://hex.zapto.org/temp/2004/feb/opera.jpg>

--
Matt



-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----

In article Matt wrote:[color=blue]
> Lauri Raittila wrote:
>[color=green]
> > In article Filippo Giarratano wrote:[color=darkred]
> >> Lauri Raittila <lauri@raittila.cjb.net> wrote:
> >>
> >> > I have thought that long too. It's been possible since Opera 5+, in
> >> > Opera, and IE god knows how long, using the bug.
> >>
> >> . . .
> >>
> >> > Quick and dirty hack:
> >> > http://www.student.oulu.fi/~laurirai/www/css/gallery/[/color][/color][/color]
[color=blue]
> Konqueror 3.1.4: the individual images are centred, but the whole table
> isn't (it's on the left).[/color]

There is no table.
[color=blue]
> Opera 7.23 (linux) has the images and the table
> centred. In both cases, there's a gap between the image and the caption,
> but not between the caption and the image below - this should be the other
> way around, yes?[/color]

The styling is very minimal, to not confuse browsers before testing
concept. (as you can see it's not real case, links aren't real.)
[color=blue]
> <http://hex.zapto.org/temp/2004/feb/konqueror.jpg>[/color]

Seems to act like Mozilla. Thanks.
[color=blue]
> <http://hex.zapto.org/temp/2004/feb/opera.jpg>[/color]

Same as on win. Maybe I remember to test with MacIE tomorrow. (speeded
past computer room with macs today, but didn't remember to pop in)

--
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.