Css - A: active non funzionante

sambo

Utente Attivo
3 Apr 2012
72
0
0
Sto cercando creare una semplicissima barra di navigazione per il mio menu, tramite html/css.

Ho creato il file html con css interno (solo per rendere piu veloce il test).

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#tab ul {
	list-style-type: none;
}
#tab ul li {
	float: left;
	padding-right: 20px;
}
#tab ul li a {
	text-decoration: none;
}
#tab ul li a:hover {
	color: #F00;
	text-decoration: none;
}
#tab ul li a: active {
	color: #0F0;
	text-decoration: underline;
}
</style>
</head>

<body>
<div id="tab">
  <ul>
    <li><a href="contatti.html">Home</a></li>
    <li><a href="prova.html">Chi siamo</a></li>
    <li><a href="contatti.html">Contatti</a></li>
  </ul>
</div>
</body>
</html>
#tab ul {
list-style-type: none;
}

Questo istruzione mi ha permesso di togliere il punto nella lista non ordinata.

#tab ul li a {
text-decoration: none;
}

Qui ho eliminato la sottolienatura del collegamento ipertestuale.

#tab ul li a:hover {
color: #F00;
text-decoration: none;
}

Qui ho creato l'effetto rollover e ogni volta che passo con il mouse sopra il collegamento, questo cambia di colore.

#tab ul li a: active {
color: #0F0;
text-decoration: underline;
}

Qui il probelma..
Questa istruzione, almeno nelle mie intenzioni, avrebbe dovuto fare in modo che il collegamento selezionato/cliccato, rimanesse evidenziato del colore da me scelto e da una sottolineatura, al caricamento della nuova pagina. Questa parte non funziona, o forse serve un comando diverso.

Mi potete aiutare a capire?

Possibilmente in modo molto pratico, sono un po lento a realizzare, come avrete capito :eek:

Aiutino .. :byebye:
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,

puoi fare così:
crei nel css una class per l'elemento che deve essere evidenziato :

Codice:
#tab ul li a.evidenziato {
	color: #0F0;
	text-decoration: underline;
}
e nelle pagine la richiamerai in questo modo
Esempio nella pagina contatti.html
HTML:
<div id="tab">
  <ul>
    <li><a class='evidenziato' href="contatti.html">Home</a></li>
    <li><a href="prova.html">Chi siamo</a></li>
    <li><a href="contatti.html">Contatti</a></li>
  </ul>
</div>
 

sambo

Utente Attivo
3 Apr 2012
72
0
0
Grazie Criric, finalmente sono riuscito a risolvere un problema che mi tormentava da un pò di tempo :fonzie:

Ciao, alla prossima :byebye: