CSS Coder/designer question

[Mutt]

i want to make my thumbnails with rounded corners - using a transparent png overlay on top of the thumbnail in a <DIV> like this http://host.sonspring.com/png_overlay/

the question is how do you make the actual thumbnail underneath the overlay clickable?

[fris]

style the a href

[Mutt]

Originally Posted by fris

style the a href

i don't know what you mean. there's a <DIV> absolutely postioned on top of the <DIV> that has the a href in it.

[Serge Litehead]

Originally Posted by Mutt

i don't know what you mean. there's a <DIV> absolutely postioned on top of the <DIV> that has the a href in it.

CSS allows to transform almost any tag to any other tag.. for instance you can make A act like P

in your case, instead of that absolute DIV there can be an absolute A with same css properties of that DIV
OR
that absolute DIV to have A tag inside of it with 98-100% for width and height of that DIV

both cases may ruin current css hierarchy tho if css rules are addressed in hierarchical way and not adjusted to current change.
example of hierarchical rule:
div.internal div.absolute {...}


edit: i maybe off a bit, haven't toyed with css/html long time, principally it's correct.

[FlexxAeon]

would have to apply the href to the top image, or the div that contains them both

[gimme-website]

This has worked for me in the past, just copied and pasted from source code and css file of a live site so it will have some unnecessary code:

HTML:
<div class="model"><img src="images/model_01.jpg"><div class="overlay"></div>
<a href="#"></a></div>

CSS:

.model {
display:inline;
float:left;
height:150px;
margin:0 0 0 25px;
position:relative;
width:120px;
}
.model img {
height:150px;
width:120px;
}
.model .overlay {
background:url(images/overlay.png) no-repeat;
display:block;
height:150px;
left:0;
position:absolute;
top:0;
width:120px;
z-index:2;
}
.model a {
display:block;
left:0;
height:150px;
position:absolute;
top:0;
width:120px;
z-index:4;
}

[MetaMan]

you cant just apply it to the image underneath.

you can float div on top as the "3rd layer" and positioning it the width and height of the thumbnail. then link that div.

that is the best way,

if you mean let me clarify:

bottom layer: thumbnails
2nd layer (on top): border layer
then the 3rd layer would be a block with a link on it

or just have the border layer a bg with the linked div inside it.

im hopping on a flight but thats the best way i can think of.

[Bird]

I like the using Javascript for that..

try corner.js or glossy.js
http://www.netzgesta.de/corner/
http://www.netzgesta.de/glossy/

http://www.netzgesta.de/index.php

[harvey]

step 1: get a rounded corner image and the image you want to use and use it like this:

<div class="whatever">
<a href="#"><img src="myroundedimage.png" alt="" /></a>
</div>

then the css

.whatever{background: transparent url(myimage.jpg) no-repeat;}

of course you'll need different classes for each image (like .whatever, .whatever1, .whatever2 and such)

the same could be accomplished this way:

<div style="background: transparent url(myimage.jpg) no-repeat;">
<a href="#"><img src="myroundedimage.png" alt="" /></a>
</div>

therefore, you'll need 1 class per image. Using php, you can do it automatically

[ProG]

If you are using JavaScript just throw an event listener on the DIV

[grumpy]

use css 3
http://www.webdesignerwall.com/trend...est-practices/

[czarina]

Originally Posted by Bird

I like the using Javascript for that..

try corner.js or glossy.js
http://www.netzgesta.de/corner/
http://www.netzgesta.de/glossy/

http://www.netzgesta.de/index.php

the problem with using javascript is that lots of surfers have it disabled now, so it wont work for them

[ProG]

Originally Posted by czarina

the problem with using javascript is that lots of surfers have it disabled now, so it wont work for them

Anyone not running JavaScript in 2010 might as well unplug their computer.

I could only find some old stats on w3schools

Date JavaScript On JavaScript Off
January 2008 95% 5%
January 2007 94% 6%
January 2006 90% 10%

Source

[harvey]

Originally Posted by grumpy

use css 3
http://www.webdesignerwall.com/trend...est-practices/

yes, that would be the real solution on real browsers, sadly MSIE crap doesn't recognize CSS3 and much less rounded corners