Problemi Vari con Link CSS

[capsula]

Ciao a tutti, ho un problema coi link e con le loro pseudoclassi:

Nel mio CSS ho questo:

a, a:link, a:visited, a:hover, a:active {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	color: #000;
	text-decoration: underline;
  }


a:visited { color: #06F; }

a:hover {
		 background: #FFF;
		 color: #F00;
		 /*text-decoration: underline overline;*/
		 text-decoration: none;
		 border-top: 1px dashed #F00;
		 border-bottom: 1px dashed #F00;
		}

Vi chiedo tre cose:
Praticamente con Firefox non mi funziona lo stato visited... cioè io premo su un link, torno indietro di una pagina e il link che avevo premuto non ha il colore blu ma è ancora nero.
Perchè?

Poi, ho fatto i bordi superiori e inferiori di un link tratteggiati allo stato hover. Volevo sapere se questo "effetto" è supportato da tutti i browser o no. In alternativo potrei usare il "text-decoration: underline overline;" che non mi fa i bordi tratteggiati però. Quale delle due possibilità ha una maggior compatibilità coi browser?

Ho questo codice HTML:

<a href="index.php" >[img]images/logo.gif[/img]

Quando vado sopra a questa immagine (e a tutte le altre del sito) lo sfono diventa bianco e i coi bordi sopra e sotto.... come si può evitare sta cosa?
Io vorrei che quando si passa sopra ad un'immagine link (chiamiamola così) le regole css applicate siano:

border: 2px dashed #0F0;

Come si fa questo?
E se per una certa immagine volessi cambiare regola potrei usare una classe ma non so come fare... ho provato ma non mi viene!

Grazie mille, ciao!

PS: Ah, tramite CSS si possono impostare le proprietà tipo target="_blank" dei tag A o alt="testo" dei tag IMG? Validi per tutti i tag A o IMG ovvio...

[Mich_]

Sono tante domande (troppe per un solo thread).
Provo a rispondere.

1. Con il tato back del browser, non viene ricaricata la pagina (per fortuna). Ma dipende anche da come sono impostati i <meta>.

2. I bordi trattegiati li puoi fare, ma il tratteggio dipende anche dalla dimensione e dal borwser (non in tutti i browser l'apparenza e` uguale)

3. Forse hai sbagliato a settare qualche selettore o qualche proprieta`. Prova a postare il codice HTML e CSS relativo all'<a>e all'<img>.

[francecco]

Sei sicuro che il codice esadecimale del colore che vorresti fosse richiamato quando fai a:hover esista ?

[capsula]

@ francecco:
Sì, color: #F00 è come scrivere color: #FF0000, è solo un modo più "compatto"... il colore è il Rosso in questo caso...


@ Mich_
1- Ma è strano, perchè mi sono sempre funzionati tutti e 4 gli stai dei link sempre....Per questo non capisco.

2- Capito... quindi è meglio il trtteggio o la linea continua? Come compatibilità con i vari browser dico...

3- Nel CSS ho

img{
margin: 0px;
border: 0px;
padding: 0px;
}

e basta, per il tag A ha vedi il primo messaggio.
Non capisco come applicare diverse proprietà CSS per le immagini dentro i tag link....

Grazie delle risposte, ciao

[Mich_]

Originariamente inviato da capsula
1- Ma è strano, perchè mi sono sempre funzionati tutti e 4 gli stai dei link sempre....Per questo non capisco.

Ripeto: dipende anche dai <meta> e dal browser.

2- Capito... quindi è meglio il trtteggio o la linea continua? Come compatibilità con i vari browser dico...

Non lo vedo come un problema di compatibilita`, ma semplicemente di estetica. Il dashed e il dotted mi risulta esistano in tutti i browser, anche se so (dal forum) e mi aspetto che il tratteggio sia diverso a seconda del browser.

3- Nel CSS ho

img{
margin: 0px;
border: 0px;
padding: 0px;
}

e basta, per il tag A ha vedi il primo messaggio.
Non capisco come applicare diverse proprietà CSS per le immagini dentro i tag link....

Grazie delle risposte, ciao

Se metti a zero tutti i margini e bordi all'immagine, devi chiaramente lavorare con i bordi del link, cosa che non e` facile.

Per questioni di estetica e di evitare movimenti alla pagina, io metterei un bordo sempre, e poi cambierei colore allo stato :hover:

a {                                         /* qui le proprieta` che non cambiano */
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 12px; 
  text-decoration: underline;
  border: 1px 0 dashed;
  background: #???;
  border-color: #???;   /* uguale a background-color */
}
a:link {                                 /* qui le proprieta` dello stato :link */
  color: #000;
  border-color: #???;
}
a:visited {
  color: #06F; 
  border-color: #???;
}
a:hover {
  background: #FFF;
  color: #F00;
  text-decoration: none;   /* questa ci vuole perche` sovrascrive il default dei browser */
  border-color: #F00;
}

[capsula]

Ok, provo e ti dico! Ma per i bordi alle immagini come si fa? Io il borno alle immagini non lo voglio... è brutto... non si può applicare un bordo ad un'immagine contenuta in un link solo per lo stato hover?

[Mich_]

Si`, certo che si puo`.
Avevo capito che volevi il bordo al link, e non all'immagine.

Pero` ti conviene definire SEMPRE un bordo, e cambiare colore, altrimenti all':hover ti trovi che il blocco diventa piu` grande e sposta tutti gli elementi che seguono.

I selettori per dare bordi diversi ad un'immagine contenuta in un <a> sono:
a:link img { ... }
a:hover img { ... }

[capsula]

Cerco di spiegarti la situazione:
Vorrei che:
1- Le immagini normalmente NON avessero bordi. Vorrei che le immagini contenute nei tag A abbiano un bordo. ==> ho risolto in questo modo: Ho creato la classe img.link con bordo 1 px nero, tale classe la applico solo alle immagini contenute dentro un tag A, così che le altre immagini (che nn servano da link diciamo) non abbiano bordo.

2- Vorrei che per le img.link allo stato a:hover sia applicato un bordo di 2px arancio, e TUTTE le altre proprietà del normale a:hover spariscano.
Questo non sono in grando... non mi viene... il codice CSS è questo:

img { /* Immagini normali */
		margin: 0px;
		border: 0px;
		padding: 0px;
	  }

img.link { /* Immagini che fanno da link */
	 margin: 0px;
	 border: 1px solid #000;
	 padding: 0px;
	}
img#logo { /* Vedi codice html più sotto */
  		  max-width: 700px; 
		  max-height: 100px;
		  clear: both; 
		  }
/*Link */
a { /* Proprietà comuni */
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	color: #000;
	text-decoration: underline;
  }

a:visited { color: #06F; }

a:hover { /* Hover sui link di testo */
		 background: #FFF;
		 color: #F00;
		 text-decoration: none;
		 border-top: 1px dashed #F00;
		 border-bottom: 1px dashed #F00;
		}
		
a:hover img.link { /* Hover su immagini di classe link */
/* Eliminazione delle proprietà di a:hover */
		 border-top: 0px dashed #F00;
		 border-bottom: 0px dashed #F00;
		 background: none;
		 color: #000;
		 text-decoration: none;
/* Proprietà che deve essere applicata */
                 border: 2px solid #FF9900;
}

E questo va in questo codice HTML

  [img]themes/DIV2/images/logo.gif[/img]

Allora: normalmente l'immagine logo.gif è ok, col suo bordo nero da 1px come stabilito.
Quando ci passo sopra col mouse, compare il bordo arancio di 2px, ma compaiono anche i due bordi tratteggiati e lo sfondo bianco...e l'immagine è cme se si ingrandisse e muovesse la pagina... l'effetto che dicevi tu Mitch_

Non capisco cosa sbaglio e perchè non debba andare....
Fammi sapere, ciao

[Mich_]

Mi sa che stai facendo un po' di confusione, inserendo un po` troppe cose.

Anzitutto occorre mettere ordine nel codice HTML, ed usare correttamente id e class:
gli id devono essere unici nella pagina, mentre le classi possono essere ripetute.

Hai una pagina, con una serie di immagini, alcune delle quali sono incluse in un link.
Suppongo anche che tutte le immagini incluse nel link devono comportarsi in un dato modo, mentre quelle non incluse in un altro.

Quindi occorre lavorare sui selettori:
img { ... } tutte le immagini
a { ... } tutti i link (tag <a>)
a img { ... } le immagini incluse nei link
a:hover img { ... } le immagini incluse nei link (situazione :hover)
Nota che l'ordine e` importante, dato che definizioni successive sovrascrivono quelle precedenti: quindi si devono definire prima le cose generali, poi le particolari.

PS: non conviene usare per le classi e gli id nomi gia` usati dal DOM, tipo link: in qualche browser potrebbe creare dei conflitti.


Come ho gia` detto, non conviene cambiare le dimensioni dei bordi all'effetto :hover: il blocco si ingrandisce e tutta la pagina ne risente: se usi un bordo nel caso :hover, devi definire lo stesso bordo nel caso :link, eventualmente con un colore uguale allo sfondo (oppure trasparente), in modo che non si veda.

Non ti conviene lavorare sui bordi del link e sui bordi dell'immagine: questo raddoppia i bordi e crea effetti sgradevoli. Decidi quali bordi vuoi usare, e annulla gli altri.

Il mio consiglio e` quindi di provare a reimpostare il tutto partendo da zero, e inserendo via via le proprieta` che ti servono: il tuo codice e` troppo sporco per poterci lavorare.

[capsula]

Ok, grazie. Mi potresti scrivere una cosa che non so come farla?

a:hover {
		 background: #F00;
		 color: #F00;
		 text-decoration: none;
		 border-top: 1px dashed #F00;
		 border-bottom: 1px dashed #F00;
		}

Tutta sta roba va annullata in a:hover img { ... } ma non so come fare. Non voglio colore di sfondo, del testo e nessun bordo tratteggiato, deve esserci solo il bordo alla foto che cambia colore.

Io ho provato scrivendo questo:

a img {	 
		margin: 0px;
	 	border: 2px solid #090;
	 	padding: 0px;
	  }

a:hover img {
background: none;
text-decoration: none;
border-top: 0px dashed #F00;
border-bottom: 0px dashed #F00;
border: 2px solid #FF9900;
}

Ma con questo mio codice non funziona, il bordi tratteggiati e il colore di background rimangono e non si eliminano....