problemi con a:visited

[carstefani]

Ho bisogno di aiuto, ho fatto sicuramente degli errori nel CSS perché ottengo degli effetti indesiderati nel link visited in un menu orizzontale. Probabilmente eredita qualcosa e in IE e FireFox vedo il link spostato a destra.

<div id="globalNav">
<ul id="navlist">
<li id="active">Home[*]link2 [*]link3[*]link4[*]link5[/list]
</div>


#globalNav{color: #cccccc; padding: 0px 0px 0px 10px; background: url(img/sfondo.gif) repeat #E7E7E7; font-weight:800;}

ul#navlist {margin-left: 0; padding-left: 0;}
#navlist li {display: inline; list-style-type: none; font-size: 80%;}

#navlist a {padding: 0px 5px;}
#navlist a:link, #navlist a:visited {color: #5C5C5C; background-color: rgb(242, 242,242); border: 1px solid #999999;
text-decoration: none; }

#navlist a:hover {color: #5C5C5C; background-color: #e7e7e7; text-decoration: none; }
#active a:link, #active a:visited, #active a:hover
{color: #5C5C5C; background-color: rgb(228,205,208); border: 1px solid #999999; text-decoration: none; }

[Mich_]

Occhio all'ordine delle pseudoclassi: le successive sovrascrivono le precedenti.
Dato che un link :hover e` anche un :link, l'ultima definizione soprascrive l'altra.

L'ordine corretto e`:
:link :visted :hover :active

[carstefani]

Grazie dell'informazione.

[fcw5]

Ciao e scusate l'intromissione, ma riscontro un problema analogo, vorrei chiedere delle conferme:

- se scrivo la regola per a:link, e quella di a:visited è identica, non è necessario scriverla, giusto?
- perchè quando scrivo:

div#titolo a:link, a:visited {
color: #660033;
text-decoration: none;
padding: 3px 5px 3px 5px;
}

Mi si accavallano le regole anche in link che nulla hanno a che vedere con div#titolo?

Ultima conferma se scrivo:

div#titolo a:link {
color: #660033;
text-decoration: none;
padding: 3px 5px 3px 5px;
}

e hover cambia solo colore al testo, è giusto scrivere:

div#titolo a:hover {
color: #333333;
}

Grazie
Fcw

[Mich_]

Il primo selettore potrebbe essere sbagliato. Forse volevi scrivere:

div#titolo a:link, div#titolo a:visited {

Per la seconda domanda, come hai fatto potrebbe andare bene, ma la cosa piu` corretta e`:

div#titolo a: {
   color: #603;
   text-decoration: none;
   padding: 3px 5px;
}

div#titolo a:hover {
   color: #333;
}

Cioe` dai una formattazione al tag <a>, poi cambi un attributo solo nel caso :hover.

Al limite (ma questo e` solo per puristi) potresti scrivere:

div#titolo a: {
   text-decoration: none;
   padding: 3px 5px;
}
div#titolo a:link {
   color: #603;
}
div#titolo a:hover {
color: #333;
}

Nota che ho usato alcune scorciatoie nella definizione dei valori, che sono perfettamente equivalenti a quanto hai scritto tu.

[fcw5]

WOW!

Ho capito tutto adesso! prima non avevo sbagliato a scrivere, avevo sbagliato concetto.
Tutti consigli utili, mi hai affinato la tecnica, grazie.

Quindi scrivendo

div#titolo a: {
color: #603;
text-decoration: none;
padding: 3px 5px;
}

div#titolo a:hover {
color: #333;
}

di conseguenza anche visited è implementato nella prima regola, vero?

[Mich_]

di conseguenza anche visited è implementato nella prima regola, vero?

Non credo.
In effetti a:link e` sinonimo di a.
Nell'ultimo esempio avevo specificato che e` per i puristi del codice (intendendo che non ha effetti pratici).

[fcw5]

Allora, dovrei scrivere:

div#titolo a:, div#titolo a:visited {
color: #603;
text-decoration: none;
padding: 3px 5px;
}

div#titolo a:hover {
color: #333;
}

Oppure:

div#titolo a:link, div#titolo a:visited {
color: #603;
text-decoration: none;
padding: 3px 5px;
}

div#titolo a:hover {
color: #333;
}

In modo da coprire tutte e tre le pseudoclassi?

:active a che stato si riferisce?

Grazie ancora
Fcw

[Mich_]

Le due scritture sono equivalenti (a parte che nella prima c'e` un duepunti di troppo).

Lo stato :active corrisponde al momento in cui stai premendo il bottone del mouse sopra il link.
E` quindi un momento transitorio, che puoi anche omettere (i browser hanno un loro default, che non e` male).

Non possono ometterlo i programmatori di siti che io chiamo "ad alto impatto", cioe` quelli che devono fare bella figura in tutte le condizioni e browser; in pratica i siti di vendita e quelli di ditte importanti che puntano molto sul Web (in quei casi la presentazione e` forse piu` importante del contenuto stesso delle pagine).

Invece per una cosa familiare o distinta (dove il contenuto e` piu` importante della presentazione) non serve.

[fcw5]

Cioè quando il tasto del mouse è giù, premuto dal mio dito, ad esempio lo usano nei bottoni in cui, cambiando immagine, sembra che si schiacci il tasto?

Ho capito.

Grazie 1000 per tutto, vado subito a modificare tutti i css che ho fatto fin'ora sono pochi ma devono essere fatti bene!

Ciao Fcw