semplice effetto su immagini con i CSS

[keplero]

Salve a tutti, vorrei creare il seguente "effetto grafico" sui link ipertestuali rappresentati da immagini servendomi dei CSS. In pratica vorrei che quando il mouse passa sopra l'immagine appaia un bordino intorno all'immagine, ottenendo lo stesso risultato che avrei facendo:

.thumbnail {border: 1px dashed Grey;}

ovviamente in questo caso il bordo è fisso. Ho tentato di risolvere in questo modo:

a.link_thumbnail:link, a.link_thumbnail:visited {border: 1px dashed Black;}

a.link_thumbnail:hover {border: 1px dashed Grey;}

ma purtroppo quando passo il mouse sull'immagine mi compare un bordino più piccolo, dietro.

Se qualcuno può darmi una mano, gliene sarei grato.

[pierofix]

Prova così:

XHTML
<a href="sito.it" class="thumbnail">
   [img]home.png[/img]
</a>

CSS
.thumbnail img
{
   border:1px dashed #ccc;
}
.thumbnail:hover img
{
   border:1px dashed #000;
}

[keplero]

Grazie mille, funziona alla perfezione! Non sapevo di dover mettere quel "img" dopo il nome della classe. Sei stato gentilissimo.

[pierofix]

Approfondimento sui selettori CSS:

- www.w3.org/TR/CSS21/selector.html

[keplero]

Mi sono accorto solo ora che la soluzione non funziona con Internet Explorer 6 (io uso Opera)! Stranamente non riesco neanche ad allontanare il bordo dalle immagini attraverso il padding.

Avevo bisogno di creare una riga per 3 thumbnail, con l'effetto del bordo che appare (o cambia colore) al passaggio del mouse. Ho così preparato una tabella con 3 colonne; alla tabella ho assegnato la classe tabella_thumbnail, poi ho assegnato tre classi alle colonne chiamate: prima_tabella_thumbnail_up , tabella_thumbnail_up e ultima_tabella_thumbnail_up. Dopodiché ho inserito ogni immagine in una colonna fra due tag "<A>" assegnati alla classe link_thumbnail. Tutto questo con l'unico scopo di avere le "cose in ordine", diciamo.

Fatta questa premessa, ecco il pezzo di CSS interessato:

.tabella_thumbnail {width: 400px;}
.tabella_thumbnail_up {padding-top: 40px; padding-left: 4px; padding-right: 4px; padding-bottom: 4px;}
.prima_tabella_thumbnail_up {padding-top: 40px; padding-left: 0px; padding-right: 4px; padding-bottom: 4px;}
.ultima_tabella_thumbnail_up {padding-top: 40px; padding-left: 4px; padding-right: 0px; padding-bottom: 4px;}
.link_thumbnail img { /* stile dei thumbnails */
	border: 1px dashed #333333;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
}
.link_thumbnail img:hover { /* vedi sopra */
	border: 1px solid #C0C0C0;
}

Con Opera funziona tutto alla perfezione, IE invece non considera per niente né il padding, né l'effetto sul link. Come prima, se qualcuno ha la pazienza di aiutarmi... Lo so che avrò fatto 100 errori stupidi, abbiate pietà

[salasir]

Per quanto riguarda l'hover, IE lo considera solo applicato al tag <a>. :rollo:
Per gli altri c'è solo da sperare in IE7 oppure usare js.
La faccenda del padding non l'ho capita. Forse indicando anche il codice (X)HTML ..

[keplero]

Ecco il codice HTML, questa è la tabella che contiene i thumbnails. Ditemi qualcosa!

<table border="0" cellpadding="0" cellspacing="0" align="center" class="tabella_thumbnail">
<tr>
<td class="prima_tabella_thumbnail_up">[img]thumbs/thumb1.jpg[/img]</td>
<td class="tabella_thumbnail_up">[img]thumbs/thumb2.jpg[/img]</td>
<td class="ultima_tabella_thumbnail_up">[img]thumbs/thumb3.jpg[/img]</td>
</tr>
</table>

Grazie per l'aiuto.

[keplero]

up...