Floating thumbnail gallery with different image sizes

There are several tutorials on the net showing you how to create a
thumbnail gallery with floating thumbails which automagically uses all
horizontal space available (e.g.
http://css.maxdesign.com.au/floatuto...orial0407.htm). However all
of them use images which are all equal in size - and that's not the case
with my thumbnails. The method itself still works, however I want to
center all the images in a row vertically with the highest image (in
that row). Like that:

xxxxxxxxxx
xxxxxxxxxx x x
xxxxxxxxxx x x x x
x x x x x x
x x x x x x
xxxxxxxxxx x x x x
xxxxxxxxxx x x
xxxxxxxxxx

xxxxxxxxxx
xxxxxxxxxx x x
x x x x xxxxxxxxxx
x x x x x x
x x x x x x
x x x x xxxxxxxxxx
xxxxxxxxxx x x
xxxxxxxxxx

All methods I tried will align the images of a row either on the top or
on the bottom of a row, not at the middle.

Basically, I want to have the effect I would get if I put each image in
a table cell with vertical-align=middle set on the tds (+ the
automatical change of columns when the available width changes).

Any hints?

Thanks,
Florian
--
Sir, we are surrounded! - Excellent! Now we can attack in any direction
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

re: Floating thumbnail gallery with different image sizes

In comp.infosystems.www.authoring.stylesheets Florian Brucker said:
[color=blue]
> There are several tutorials on the net showing you how to create a
> thumbnail gallery with floating thumbails which automagically uses all
> horizontal space available (e.g.
> http://css.maxdesign.com.au/floatuto...orial0407.htm). However all
> of them use images which are all equal in size - and that's not the case
> with my thumbnails.[/color]

add margins to the images so they become all the same size. e.g:

10px margin 30px margin 15px margin
80px image 40px image 70px image
10px margin 30px margin 15px margin

etc etc

you can do it manually if you only have a few images or a bit of fun 'n
giggly server side scripting to do it automatically if you have a lot.
[color=blue]
> Basically, I want to have the effect I would get if I put each image in
> a table cell with vertical-align=middle set on the tds[/color]

div{width:200px;height:200px;display:table-cell;vertical-align:middle;text-align:center;}

not supported by IE


--
l i t t l e v o i c e s m a k e m e

re: Floating thumbnail gallery with different image sizes

brucie wrote:[color=blue]
> add margins to the images so they become all the same size. e.g:[/color]
[snip][color=blue]
> you can do it manually if you only have a few images or a bit of fun 'n
> giggly server side scripting to do it automatically if you have a lot.[/color]
I'd like to keep it as simple as possible - that includes no special
styles for all elements of a group. I just don't like the extra effort
it's causing both in creating and maintaining. The server side scripting
would help, but I still prefer CSS solution like
[color=blue]
> div{width:200px;height:200px;display:table-cell;vertical-align:middle;text-align:center;}[/color]
That looks like a nice solution!
[color=blue]
> not supported by IE[/color]
Seems like that's the catch in all those "only a bit more
advanced"-css-techniques. Not that I would care about it :)

Thanks!
Florian
--
Better to rule in Hell than to serve in Heaven. (Milton)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

re: Floating thumbnail gallery with different image sizes

Florian Brucker <torf@torfbold.com> wrote:
[color=blue]
>All methods I tried will align the images of a row either on the top or
>on the bottom of a row, not at the middle.[/color]

Only bottom aligning will produce proper wrapping.
[color=blue]
>Basically, I want to have the effect I would get if I put each image in
>a table cell with vertical-align=middle set on the tds (+ the
>automatical change of columns when the available width changes).[/color]

Stop wanting that is probably the best advice.

Second best would be to wrap each image in a inline-block level
container with it's height fixed @ the same as the tallest image.

Beware that you will run into loads of problems when trying to do that.
Mozilla's non support of inline-block and/or inline table, IE's
broken/limited support of inline-block, convoluted methods needed to
vertically center the images etc. (Lauri R. has a page with vertical
centering pointers should you want to go down that route).

--
Spartanicus

re: Floating thumbnail gallery with different image sizes

In article <2si9oaF1j2a77U1@uni-berlin.de>, torf@torfbold.com says...[color=blue]
> There are several tutorials on the net showing you how to create a
> thumbnail gallery with floating thumbails which automagically uses all
> horizontal space available (e.g.
> http://css.maxdesign.com.au/floatuto...orial0407.htm).[/color]
[color=blue]
> However all
> of them use images which are all equal in size - and that's not the case
> with my thumbnails.[/color]

Yes, because it is easiest when making examples, did that first myself
too...
[color=blue]
> The method itself still works, however I want to
> center all the images in a row vertically with the highest image (in
> that row). Like that:
>
> xxxxxxxxxx
> xxxxxxxxxx x x
> xxxxxxxxxx x x x x
> x x x x x x
> x x x x x x
> xxxxxxxxxx x x x x
> xxxxxxxxxx x x
> xxxxxxxxxx[/color]
[color=blue]
> xxxxxxxxxx
> xxxxxxxxxx x x
> x x x x xxxxxxxxxx
> x x x x x x
> x x x x x x
> x x x x xxxxxxxxxx
> xxxxxxxxxx x x
> xxxxxxxxxx
>[/color]

No captions?

img {vertical-align:middle;}

<img><img><img><img><img><img>

And if you want to center horizontally, wrap them to div and use
text-align.

If you do have captions, Brucie told what to do.




--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

re: Floating thumbnail gallery with different image sizes

In article
<2jt7m094fnnr39hug8evmv9cjepput5k91@news.spartanic us.utvinternet.ie>,
me@privacy.net says...[color=blue]
> Florian Brucker <torf@torfbold.com> wrote:
>[color=green]
> >All methods I tried will align the images of a row either on the top or
> >on the bottom of a row, not at the middle.[/color][/color]
[color=blue]
> Stop wanting that is probably the best advice.[/color]

No it is not. This is not that hard. And IMHO they look ugly if not
vertically centered.
[color=blue]
> Second best would be to wrap each image in a inline-block level
> container with it's height fixed @ the same as the tallest image.[/color]

No, floating box is good also, as OP is not trying to center rows
horizontally, or at least never said so and ASCII art didn't implicate
centering either... There is less problems doing this using floats. One
that comes mind is Opera 6 float bug, but it is not that easy to tricker.
[color=blue]
> Beware that you will run into loads of problems when trying to do
> [inline-block way][/color]

Some, yes.
[color=blue]
> IE's broken/limited support of inline-block, convoluted methods needed to
> vertically center the images etc.[/color]

IE has nice bug to treat dispaly:inline as if it was inline-block
[color=blue]
> (Lauri R. has a page with vertical
> centering pointers should you want to go down that route).[/color]

In this case, adding margins to both sides will do it most widely
supported (works on all browsers use CSS afaik), display:table stuff
second widely supported (but does not work on IE). Both in brucies post.
Page mentioned:
http://www.student.oulu.fi/~laurirai/www/css/middle/

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

re: Floating thumbnail gallery with different image sizes

Lauri Raittila <lauri@raittila.cjb.net> wrote:
[color=blue][color=green]
>> IE's broken/limited support of inline-block, convoluted methods needed to
>> vertically center the images etc.[/color]
>
>IE has nice bug to treat dispaly:inline as if it was inline-block[/color]

IE actually supports the inline-block property (to some extend). It was
introduced as a proprietary extension (don't know when, but IE 5.5
"supports" it).

--
Spartanicus

re: Floating thumbnail gallery with different image sizes

Spartanicus <me@privacy.net> wrote:
[color=blue]
>inline-block property[/color]

inline-block value

--
Spartanicus

re: Floating thumbnail gallery with different image sizes

>>All methods I tried will align the images of a row either on the top or[color=blue][color=green]
>>on the bottom of a row, not at the middle.[/color][/color]
[color=blue]
> Only bottom aligning will produce proper wrapping.[/color]

Can you explain why that should be the case? Wrapping should occur if
the sum of widths of all elements in the current row (including margins
etc.) is greater than the available horizontal space. Please tell me
what difference *vertical* alignment makes here.

[color=blue][color=green]
>>Basically, I want to have the effect I would get if I put each image in
>>a table cell with vertical-align=middle set on the tds (+ the
>>automatical change of columns when the available width changes).[/color][/color]
[color=blue]
> Stop wanting that is probably the best advice.[/color]

Nope, don't think so. If I leave out the wrapping, it's even possible
with plain HTML. And there are 2 different solutions, as Brucie and
Lauri Raittila showed.

[color=blue]
> Second best would be to wrap each image in a inline-block level
> container with it's height fixed @ the same as the tallest image.[/color]

That would require me to know the height of the tallest image. Although
I might be able to retrieve this piece of information, I'm looking for a
general, non-case-specific method.

[color=blue]
> Beware that you will run into loads of problems when trying to do that.[/color]
[Broken browser report snipped]

What I do care about is the CSS specification, nothing else ;).
Hopefully no browser-specific hacks will ever find their way into my code.


Florian
--
I believe in God, only I spell it Nature.
(Frank Lloyd Wright)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

re: Floating thumbnail gallery with different image sizes

> No captions?
[color=blue]
> img {vertical-align:middle;}[/color]
[color=blue]
> <img><img><img><img><img><img>[/color]

Simple, working, wow ;)
[color=blue]
> And if you want to center horizontally, wrap them to div and use
> text-align.[/color]


Thanks for the help!
Florian
--
All religions are founded on the fear of the many
and the cleverness of the few. (Stendhal)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

re: Floating thumbnail gallery with different image sizes

Florian Brucker <torf@torfbold.com> wrote:
[color=blue][color=green]
>> Only bottom aligning will produce proper wrapping.[/color]
>
>Can you explain why that should be the case?[/color]

No, brainfart :-)

--
Spartanicus