/    Sign up×
Community /Pin to ProfileBookmark

Help with creating a cluster of different-sized icons

Copy linkTweet thisAlerts:
Apr 14.2009

Hello

I have a design for a site featuring a ‘cluster’ of icons that should look something like [URL=”http://www.pdev.co.uk/images/Picture-15.jpg”]this[/URL].

I thought I could do this with a simple float rule in the CSS, but what I actually get is [URL=”http://www.pdev.co.uk/images/Picture-14.jpg”]this[/URL] (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.

[URL=”http://s281341589.websitehome.co.uk/_dev/news.html”]Here’s[/URL] 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:

[code=html].thumb {
position:relative;
float:left;
padding:0 5px 5px 0;
max-width:200px;
overflow:visible;
} [/code]

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

Any thoughts or ideas would be greatly appreciated.

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@bigalcauthorApr 15.2009 — 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...
Copy linkTweet thisAlerts:
@FangApr 15.2009 — Just add more images to the list, it's not limited to 3.
Copy linkTweet thisAlerts:
@bigalcauthorApr 15.2009 — 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?
Copy linkTweet thisAlerts:
@FangApr 15.2009 — That would require resizing the images according to 'prominence' before arranging the images.
Copy linkTweet thisAlerts:
@lystarApr 15.2009 — 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:

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

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.
Copy linkTweet thisAlerts:
@bigalcauthorApr 15.2009 — 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.
Copy linkTweet thisAlerts:
@lystarApr 15.2009 — 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 [/QUOTE]

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)
×

Success!

Help @bigalc spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...