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:
 
Discussioni simili
Autore Titolo Forum Risposte Data
N [css] :active HTML e CSS 1
G Input checkbox in CSS HTML e CSS 0
G classe CSS sovrascritta HTML e CSS 2
G file CSS contenente variabili HTML e CSS 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
L problema collegamento file css con html HTML e CSS 1
M CSS "puro" HTML e CSS 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1
Z Slide show CSS HTML e CSS 1
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
V Galleria con CSS e Javascript Javascript 2
C CSS pagina a schermo intero HTML e CSS 3
V Menù CSS da file in cartella esterna HTML e CSS 4

Discussioni simili