Attributi sui link e sulle immagini

[Profondo]

Salve a tutti. Ho un problema con il CSS del mio sito.
Ho impostato nel CSS questi attributi per i collegamenti:

a:link,
a:visited,
a:focus,
a:active{
	background: transparent;
	color: #444;
	text-decoration: none;
}

a:hover{
	background: transparent;
	color: #364F5F;
	border-bottom: 1px dashed #2F4484;
}

E sin qui tutto ok, il problema è che quest'effetto si ha anche sulle immagini del sito con l'effetto che passando sopra quest'ultime il bordo inferire smuove tutto il layout...
Come mi devo comportare?


PS:

img {
	border: 0px; /* makes sure linked images do not have a border */
      text-decoration: none;
}

[crestina]

Devi creare una classe senza bordi da associare al link dell'immagine, ovvero:

codice html

[img][/img]

nuova classe in css

a.nobordi:hover {
	border: 0!important;
}

Le proprietà che si attribuiscono ai tags, in questo caso al link, hanno priorità maggiore rispetto alle classi assegnate; proprio per questo nella nuova classe che creerai dovrai utilizzare "!important".

Questo

img {
border: 0px; /* makes sure linked images do not have a border */
text-decoration: none;
}

non basta, perché sei andata ad agire sull'immagine e non sul link (il bordo che vedevi NON era dell'immagine ma quindi era sull'hover del link).

[Profondo]

E' un'operazione che scoccia un po ma penso sia l'unica alternativa...
Non rischio però che poi al passaggio del mouse si annulli il bordo inferiore?

[crestina]

Credo anche io che sia l'unico modo, ho fatto un po' di prove.
Siccome hai deciso di mettere a tutti i link il bordo inferiore, anche le immagini linkate avranno il bordo.
Agendo sull'immagine non puoi modificare l'effetto "hover" del link, quindi bisognerà andare a mettere una classe senza bordi all'href dell'immagine.
L'hover è una "proprietà" del tag a e l'img è contenuta nel tag a.
Devi quindi pensare all'immagine come un contenuto linkato, come per esempio una parola, a cui tu però vorrai togliere l'effetto dell'hover.
Tutto questo per spiegarti che non si può agire sul tag img per modificare l'hover, ma sul link.
Siccome al tag a, hai dato delle proprietà generali, cioè:

a:link,
a:visited,
a:focus,
a:active{
	background: transparent;
	color: #444;
	text-decoration: none;
}

a:hover{
	background: transparent;
	color: #364F5F;
	border-bottom: 1px dashed #2F4484;
}

(...cioè che al passaggio del mouse venga il bordo inferiore), devi creare un'eccezione e quindi una classe che metterai al tag a quando vorrai che non venga visualizzato il bordo.

Non rischio però che poi al passaggio del mouse si annulli il bordo inferiore?

No, siccome metterai quella classe solo al link delle immagini, cioè:

contenuto linkato SENZA hover/bordo
<a href="#">contenuto linkato CON hover/bordo

Quindi:
hover con bordo = NO classe
hover senza bordo = SI classe

Spero di essermi spiegata meglio ora... Fammi sapere, ciaociao

[salasir]

O più semplicemente, se non vuoi i bordi sulle immagini:

a:hover img { border: none }

[crestina]

O più semplicemente, se non vuoi i bordi sulle immagini:

...ci avevo provato anche io... ma non funziona.

[salasir]

Rispondendo di fretta mi è saltato un pezzo.
Neanche con

a img,
a:hover img { border:none; }

?

[crestina]

nein!