Help with creating a cluster of different-sized icons

[bigalc]

Hello

I have a design for a site featuring a 'cluster' of icons that should look something like this (http://www.pdev.co.uk/images/Picture-15.jpg).

I thought I could do this with a simple float rule in the CSS, but what I actually get is this (http://www.pdev.co.uk/images/Picture-14.jpg) (the blue lines are from viewing it in dreamweaver but the layout looks the same in the browser).

I know I won't be able to get it exactly like the first one, but what I want is for the thumbnails to jump upwards into the available space rather than stacking in rows as they do currently. Strangely, if I re-arrange the order, this does sometimes happen, but since these icons will change all the time I can't rely on that or lay them out manually.

Here's (http://s281341589.websitehome.co.uk/_dev/news.html) a link to a test page. It's only been tested on a Mac so far because my PC's up the swanny (as usual).

The style class on each thumbnail looks like this:

.thumb {
position:relative;
float:left;
padding:0 5px 5px 0;
max-width:200px;
overflow:visible;
}

I've tried different display types as well, to no avail.

Any thoughts or ideas would be greatly appreciated.

[Fang]

http://www.alistapart.com/articles/magazinelayout/

[bigalc]

Hi fang, thanks for the article. It's very clever indeed but unfortunately not quite what I'm looking for, and I need to be able to process more images...

[Fang]

Just add more images to the list, it's not limited to 3.

[bigalc]

Ok thanks, I just re-read as I thought it said it was limited to 6.

However, the other problem is that I need to be able to control the size of the images - in my system each image has a 'prominence' setting which dictates how large it appears on the page, and it looks as though I won't be able to do this, unless I've missed something?

[Fang]

That would require resizing the images according to 'prominence' before arranging the images.

[lystar]

I'm assuming that this page is generated dynamically by php or some other server side language?

This is probably a little more complicated than you want, but you could add either a database or a flat file to store image 'prominences' and simply have your script insert the thumbnail sizes as required.

If each image is nested inside of its own <div> then you could nest a <div> within it with either position: absolute; and extreme margins to push it out of visible range, or use display: none; properties on them. Then add a :hover to the parent div like this:

parentDiv :hover nestedDiv {
display: block;
position: absolute;
<INSERT Co-Ords where you want the big image to pop up>
}

I've used that method for similar purposes before, though I might have that bit of pseudo css a little off. The basic idea is there, try playing with that.

[bigalc]

Fang - yes that's right, I guess I could hack around in the A List Apart example and try to make it work that way.

Lystar - Yes it's a PHP page running off a database, all the images are 200x200px and then the prominence setting simply adjusts the width value in the image tag to shrink it accordingly. This is just temporary though, I will have a resize script on the server at some point.

So I guess what you're both saying is that this won't be possible with styles alone, I'll have to write something in PHP to arrange them correctly?

Lystar, not sure what you're getting at with your css though - I don't need a big image to appear on a hover or anything like, all I'm trying to do at the moment is arrange the thumbs correctly.

[lystar]

Sorry,

I thought you meant the active image was being pushed to the front when you said:
what I want is for the thumbnails to jump upwards into the available space

But re-reading what you posted I understand what you meant now.

Anyway, yes I'm pretty sure you'll need a script (For now anyway; look at the changes in CSS 3.0 some very excellent things are coming to handle just this type of thing! We just need to wait 20 years for browsers to conform to it :p)