css esterno, settare bordo di un colore di immagini linkate e hover di colore diverso

[Cavallaudo]

SAlve,

Sto andando ai matti.

Non riesco in un css esterno a settare bordo di 1 pixel per certe immagini di un colore, che cambi di colore rimanendo sempre a 1px di bordo, quando il cursore passa sopra l'immagine (linkata).

L'unico modo in cui ci sono riuscito e' cosi:

A:link, A:visited { color: white; text-decoration: underline }
A:hover { color: red; text-decoration: none; background: white  }
a:hover img {border: 1px solid black;}
.border {border: 1px solid #FFFF00;} 

Funziona, il grosso problema e che le altre immagini linkate, senza bordo alcuno, quado ci passa il cursore sopra diventano con bordo e tutto il layout di pagina si muove

ho provato a risolvere settando una classe "noborder"

A:link, A:visited { color: white; text-decoration: underline }
A:hover { color: red; text-decoration: none; background: white  }
a:hover img {border: 1px solid black;}
.border {border: 1px solid #FFFF00;}
a.noborder img{ border: 0px; } 

La soluzione funzia in firefox, ma in ie, non c'e' verso, continua lo stesso problema.

non so piu dove sbattere la testa, HELP!

non c'e' un modo per fare una classe .border con dentro non solo il bordo e il colore del bordo, ma pure il colore nel caso di "hover"?

ciao e grazie.

[Mich_]

Alcuni browser mettono di default un bordo alle immagini dentro i link; in qualche caso il bordo e` messo solo nella condizione :hover.
Nel tuo caso poi hai definito a:hover img con il bordo, e non lo hai tolto esplicitamente nella classe noboder. Quindi i browser possono interpretare in modo errato (e guarda caso il browser che si permette di interpretare a piacimento e` sempre lo stesso).

Quindi la soluzione (valida per tutti i browser) dovrebbe essere:

a img { 
  border: 1px solid transparent;
}
a:hover img {
  border: 1px solid black;
}
a.noborder img, a.noborder:hover img {
  border: 0;
}

[Caccio]

Ciao, prova così:

a.anchorimage{padding:1px;background: #FFFF00}
a.anchorimage:hover{padding:1px;background: black}

così eviti di alterare le dimensioni dell'immagine con relative problematiche di box-model.

[Cavallaudo]

Originariamente inviato da Mich_
Alcuni browser mettono di default un bordo alle immagini dentro i link; in qualche caso il bordo e` messo solo nella condizione :hover.
Nel tuo caso poi hai definito a:hover img con il bordo, e non lo hai tolto esplicitamente nella classe noboder. Quindi i browser possono interpretare in modo errato (e guarda caso il browser che si permette di interpretare a piacimento e` sempre lo stesso).

Quindi la soluzione (valida per tutti i browser) dovrebbe essere:

a img { 
  border: 1px solid transparent;
}
a:hover img {
  border: 1px solid black;
}
a.noborder img, a.noborder:hover img {
  border: 0;
}

Funziona, grazie mille.

pensavo che per risolvere totalmente il problema, devo evitare di settare:

a:hover img {border: 1px solid black;} 

come proprieta generale e di infilarlo nella classe "border"...

.border {border: 1px solid #FFFF00;}
a.border:hover img {border: 1px solid black;} 

Quindi cosi sposto l'hover da qualsiasi immagine, default, a solo la classe hover e posso togliere la classe noborder... esatto? il codice e' corretto?

sto smadonnando da ore su ste cose... i css mi mandano fuori di capoccia. :berto:

[Mich_]

Io preferisco non dare alle classi e agli id nomi presi dal DOM o dagli attributi CSS: se anche dal punto di vista formale si puo` fare, dal punto di vista umano crea confusione.

Comunque le regole CSS sono definite una dopo l'altra, e le successive sovrascrivono le precedenti.
Quindi quello che dici puo` essere vero, ma puo` portarti a confusione, specie se l'ordine delle regole e` sbagliato.

Comunque se il problema e` avere la classe "yborder" anziche` quella "noborder", la cosa e` fattibile:

a img { border: 0; }
a:hover img { border: 0; }

a.yborder img { border: 1px solid white; }
a.yborder:hover img { border: 1px solid black; }

Nota che prima ho messo la regola generale, poi quella con la classe.

Nota che ho definito un bordo anche per la situazione :link (senza :hover), in modo da non aver spostmenti dell'immagine quando si passa con il mouse.

[Cavallaudo]

Originariamente inviato da Mich_
Io preferisco non dare alle classi e agli id nomi presi dal DOM o dagli attributi CSS: se anche dal punto di vista formale si puo` fare, dal punto di vista umano crea confusione.

Comunque le regole CSS sono definite una dopo l'altra, e le successive sovrascrivono le precedenti.
Quindi quello che dici puo` essere vero, ma puo` portarti a confusione, specie se l'ordine delle regole e` sbagliato.

Comunque se il problema e` avere la classe "yborder" anziche` quella "noborder", la cosa e` fattibile:

a img { border: 0; }
a:hover img { border: 0; }

a.yborder img { border: 1px solid white; }
a.yborder:hover img { border: 1px solid black; }

Nota che prima ho messo la regola generale, poi quella con la classe.

Nota che ho definito un bordo anche per la situazione :link (senza :hover), in modo da non aver spostmenti dell'immagine quando si passa con il mouse.

Grazie mille.

provato ma non va (le immagini senza borod, sono senza bordo, ma quelle che dovrebbero averlo non lo hanno nemmeno loro), forse sbaglio a linkare la classe dentro il codice html...

metto: class="yborder"

nel tag img... va forse nel tag href ?

[Cavallaudo]

http://www.cawal.com/prova_css/

ho messo u ntest qui...

come mi dici tu elimina il problema delle immagini linkate, senza classe, ma quelle che dovrebbero avere il bordo ,non lo hanno piu per niente, anche quando cisi passa sopra con il mouse.

[Cavallaudo]

Possibile che sia cosi incasinato fare qualcosa di tutto sommato semplice, settare bordo e colore normale/hover per un tot di immagini?

sto cominciando a pensare di buttare i css nel cesso e risolvere con il border html classico e lasciando i colori di default dei link...

[Mich_]

Il trucco base per far funzionare i CSS e` usare una marcatura (codice HTML) corretto e senza formattazioni.

Tu usi una serie di formattazioni HTML, che potrebbero andare in conflitto con formattazione CSS.
In particolare gli attributi border="0" vanno in conflitto con i bordi usati nel CSS.alche brwoser seguira` il CSS, qualche altro la formattazione HTML, mentre qualcuno potrebbe fare di testa sua.

Poi nel CSS usi dei selettori inesistenti: i selettori CSS son case-sensitive, e i tag <A> non esistono, per cui non esistono i selettori A

[Cavallaudo]

Originariamente inviato da Mich_
Il trucco base per far funzionare i CSS e` usare una marcatura (codice HTML) corretto e senza formattazioni.

Tu usi una serie di formattazioni HTML, che potrebbero andare in conflitto con formattazione CSS.
In particolare gli attributi border="0" vanno in conflitto con i bordi usati nel CSS.alche brwoser seguira` il CSS, qualche altro la formattazione HTML, mentre qualcuno potrebbe fare di testa sua.

Poi nel CSS usi dei selettori inesistenti: i selettori CSS son case-sensitive, e i tag <A> non esistono, per cui non esistono i selettori A

Hai ragione, hocorretto:

http://www.cawal.com/prova_css/

ma niente, fa sempre uguale...