Fluid display for multiple images

[Steven Saunderson]

I am trying to improve my page that displays multiple images so the
number of images per row will depend on the window width. My previous
attempt uses a table with two columns but this relies on the window
being approximately 800px wide.

Each image should have a caption centered underneath. I first tried
div's and float but this left-justifies the images and I would prefer a
centered display.

I am now using inline tables where each table contains one image and its
caption. This seems to work but the CSS is quirky to get things to work
in Opera, FF, and IE.

The test page is <http://phelum.net/images/LMLR/2007-02-01/>. The CSS
is in the file.

For each table Opera needs display:inline-table, but FF and IE need
display:inline. I can accommodate IE by using a conditional comment but
for FF I need :

table.image
{
width: <?php echo ($thumbwidth + 8);?>px;
display: inline; /* FireFox uses this */
display: inline-table; /* Op uses this, FF ignores it */
}

Can anybody suggest a better way to achieve a centered display of
maximum images per row with captions underneath ? I think dorayme
explored this a while ago but I don't think the caption issue was
resolved. I have tried divs with display:inline but this doesn't
support the captions.

Thanks,

 

[Ben C]

I am trying to improve my page that displays multiple images so the
number of images per row will depend on the window width. My previous
attempt uses a table with two columns but this relies on the window
being approximately 800px wide.

Each image should have a caption centered underneath. I first tried
div's and float but this left-justifies the images and I would prefer a
centered display.

If you want to centre the images, you're right, floating them is off.
display: inline-block would be perfect, but is not supported by FF or
IE. You have no choice but to use tables.

If it wasn't for the captions, you could leave the images as inline and
give the container text-align: center.

I am now using inline tables where each table contains one image and its
caption. This seems to work but the CSS is quirky to get things to work
in Opera, FF, and IE.

The test page is <http://phelum.net/images/LMLR/2007-02-01/>. The CSS
is in the file.

For each table Opera needs display:inline-table, but FF and IE need
display:inline. I can accommodate IE by using a conditional comment but
for FF I need :

table.image
{
width: <?php echo ($thumbwidth + 8);?>px;
display: inline; /* FireFox uses this */
display: inline-table; /* Op uses this, FF ignores it */
}

Can anybody suggest a better way to achieve a centered display of
maximum images per row with captions underneath ?

I don't know of a better way (that works in all these browsers).

 

[Jonathan N. Little]

I am trying to improve my page that displays multiple images so the
number of images per row will depend on the window width. My previous
attempt uses a table with two columns but this relies on the window
being approximately 800px wide.

Each image should have a caption centered underneath. I first tried
div's and float but this left-justifies the images and I would prefer a
centered display.

I am now using inline tables where each table contains one image and its
caption. This seems to work but the CSS is quirky to get things to work
in Opera, FF, and IE.

<snip>

Just did a TABLEless design example for another thread that may help:

http://www.littleworksstudio.com/temp/usenet/alt.html.20070216.php
Better Way

 

[Steven Saunderson]

Just did a TABLEless design example for another thread that may help:

http://www.littleworksstudio.com/temp/usenet/alt.html.20070216.php
Better Way

It certainly is much cleaner and more reliable than my convoluted
approach. Is there any way you can get the display centred ? This is
where divs and float fell down for me.

 

[Jonathan N. Little]

It certainly is much cleaner and more reliable than my convoluted
approach. Is there any way you can get the display centred ? This is
where divs and float fell down for me.

No not really, but they will add a column as the window allows which it
more accommodating for your visitors. Not everything has to be perfectly
centered in the world you know. Only why I could think of would require
calculations and JavaScript...for little benefit IMO.

 

[Steven Saunderson]

No not really, but they will add a column as the window allows which it
more accommodating for your visitors. Not everything has to be perfectly
centered in the world you know. Only why I could think of would require
calculations and JavaScript...for little benefit IMO.

I agree that centering may not be a critical feature but in my case it
is noticeable. I have bigger previews than your example and also my
previous effort provided it so perhaps I am more sensitive to the
effect. I definitely wouldn't try anything like JS to arrange it but I
will persist with my inline-tables approach for the moment.

Thanks for your reply,

 

[Neredbojias]

<snip>

Just did a TABLEless design example for another thread that may help:

http://www.littleworksstudio.com/temp/usenet/alt.html.20070216.php
Better Way

What's a "Photocrapher"?

 

[Jonathan N. Little]

What's a "Photocrapher"?

A typo! ;-)

 

[Travis Newbury]

Just did a TABLEless design example for another thread that may help:
http://www.littleworksstudio.com/temp/usenet/alt.html.20070216.php

I hate black and white images of the Grand Canyon. It completely
loses its magic. (Actually I hate images of it at all as they can
never even begin to capture the canyon.)

 

[Jonathan N. Little]

I hate black and white images of the Grand Canyon. It completely
loses its magic. (Actually I hate images of it at all as they can
never even begin to capture the canyon.)

Oooooooookay....but what does that have to do with the HTML?

 

[dorayme]

Oooooooookay....but what does that have to do with the HTML?

Looks like a bit of stuff is not coming to my newsreader.

So Travis said this eh?

Well, Travis, for your information, a good photograph "of the
Grand Canyon" is not trying to capture the canyon. This is a
naive idea about pictures and representative art generally. A
good artistic photograph is something in itself and is not a
travel poster to give you some information on what a treat you
are in for if you visit the "real" thing. Nor is it a substitute
for the real thing, more convenient to visit or have.

To begin to understand what I am telling you, you might need to
concentrate first on bromide prints made from original negatives.

 

[Travis Newbury]

Looks like a bit of stuff is not coming to my newsreader.
So Travis said this eh?
Well, Travis, for your information, a good photograph "of the
Grand Canyon" is not trying to capture the canyon. This is a
naive idea about pictures and representative art generally. A
good artistic photograph is something in itself and is not a
travel poster to give you some information on what a treat you
are in for if you visit the "real" thing. Nor is it a substitute
for the real thing, more convenient to visit or have.

To begin to understand what I am telling you, you might need to
concentrate first on bromide prints made from original negatives.

I still don't like like them...

 

[dorayme]

I still don't like like them...

Oh... I don't at all mind this. Freedom is a very good thing. But
what I see as a fundamental ignorance about the whole nature of
representative art is something I do mind. In other words,
freedom is a very good thing, but only up to a point. I have no
idea at all if Luigi understood the limits.