CSS help, clipping

[Kenneth K]

I asked for this in an old thread but with no replys so I'm asking this again here.

Here it goes: I would like to clip my thumbnails to show a smaller thumbnail on the front page of what is shown in the archive. I don't have a problem clipping the thumbs but position them is the trouble. AFAIK it is required setting position to absolute and that gives some problems as the thumbs just clutter on top of each other :?

I'm by no means a coder and CSS is still new to me. So I hope somebody has a workaround this.

Here is the old thread.

Here are some screenshots showing what I'm talking about.

/Kenneth

tell us the CSS otherwise what can we do?

I am sure there might some solution, I am also no CSS expert, but without any code :?

[Kenneth K]

Ok this is the css applied to the thumbs. I disabled the position on current_thumbnail so I can see it...

.thumbnails {
    padding:5px;
    border:0px;
    margin:10px;
    clip:rect(25px 85px 85px 25px);
    overflow:hidden;
    position:absolute;
    }
.current_thumbnail {
    padding:5px;
    border:1px dotted #999;
    margin:10px;
    clip:rect(25px 85px 85px 25px);
    overflow:hidden;
    //position:absolute;
    }

/Kenneth

well, have a look at

http://www.photografitti.de/clip/

<div style="position:absolute; top:100px; left:100px; clip:rect(0px 130px 130px 0px);">

position:fixed without position will not show!

you must use position:fixed with values for position

and then, I think, with clipping you will not get a nice chain of small thumbnails, as the image will still use the complete space even when it shows only a part of it

thumbrule:

values for clip: below > top, right > left
position:absolute + values for the fixed position

[Kenneth K]

I've tried using the fixed property but that doesn't help anything. The thumbs still clutter on top of each other and are now just fixed on the page.

I did a quick test and simply squished the thumbs down to 30x30px or so and that actually works ok. The Opera browser will rerender the picture so they look smooth, MS IE and FF doesn't seem to do that but it looks OK. So I'm sticking with that for now.

I'm still open for solutions using css clipping.

/Kenneth

I've tried using the fixed property but that doesn't help anything. The thumbs still clutter on top of each other and are now just fixed on the page.

sure, because the CSS defines the position for one thumbnail. But each thumbnail needs a relative position in relation to the others
that's why clipping will work for single images with their own respective position, but not for a row of images...

I was wondering why you did not scale down the thumbnails....
so I think the way you are doing it now is the only possible solution :lol:

[pixelpunk]

What happens if you put all thumbnails in a container?

// punk