Problema con menu CSS in "a: active"

[Anlu]

Buonasera, mi sono appena iscritta e spero possiate aiutarmi. È tutto il giorno che cerco di risolvere da me cercando in rete e leggendo dello stesso problema in post di altri in altri forum, ma invano; mi scuso dunque se dovesse esistere già un post con medesima domanda.

Mi occorreva creare un menu CSS orizzontale per i link del menu estremamente semplice e cioè:

- a: link = pagina1 pagina2 pagina3 - scritte grige e sfondo azzurro (senza bordi né altro)
- a: visited = tutto identico ad a: link.
- a: hover = colore delle scritta su cui passo il mouse diventa azzurro e sfondo sotto scritta diventa bianco
- a: active = identico ad a: visited e cioè, se mi trovo ad esempio sulla "pagina1", vorrei che la relativa scritta del menu restasse azzurra con sfondo bianco sotto quella scritta.

Ho trovato una pagina in rete che spiegava molto chiaramente come creare un menu così, dava anche il codice; ad esso ho eliminato il bordo, adattato le misure e cambiato i colori.

Funziona tutto tranne il comando "active" : clicco ad esempio su "pagina1", ma nel menu la scritta "pagina1" non mantiene il cambiamento, e torna come in a: link.

Il codice è questo (la prima voce e cioè ".menu" è un box che avevo creato a parte, ma anche in sua assenza l'effetto "active" non funziona, inoltre il menu deve appunto posizionarsi dentro quel box) :

.menu {
position: absolute;
left: 461px;
top: 232px;
width: 700px;
height: 24px;
background-color: #97d8f8;
text-align: left;
}




#menu01o {
width: 700;
height: 24;
font: 80% Arial; 
font-weight: bold;
}
#menu01o ul{
margin: 0;
padding-left: 0;
list-style: none;
}
#menu01o li{
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
#menu01o a:link, #menu01o a:visited {
float: left;
background: #97d8f8;
color: #707070;
margin: 0em;
padding: 0.3em 1.5em 0.3em 1.5em;
text-decoration: none;
}
#menu01o a:hover, #menu01o a:focus, #menu01o a:active {
color: #78cdf5;
background: #FFFFFF;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Questo è il modo in cui l'ho richiamato nella pagina html (noterete due div di chiusura: il primo chiude il primo div, il secondo chiude il secondo. Ho provato a mettere una sola chiusura, ma il problema persiste)

<div class=menu>
<div id="menu01o"> <ul><li><a href="index.html">HOME</a><li>
<li><a href="sede.html">SEDE</a><li>
<li><a href="corsi.html">CORSI</a><li>
<li><a href="iscrizioni.html">ISCRIZIONI</a><li>
<li><a href="faq.html">FAQ</a><li>
<li><a href="links.html">LINKS</a><li>
<li><a href="contatti.html">CONTATTI</a><li></ul>
</div>
</div>

Aggiungo che la pagina CSS possiede anche queste generiche diciture che ho pensato mi serviranno per eventuali link a parti di testo fuori dal box .menu; ho pensato potessero creare conflitto e ho fatto la prova sia di toglierle sia di mettere gli identici colori, ma lo stesso il famoso effetto "active" non funziona. Le diciture sono comunque queste:

a:link      { color: #313131; text-decoration: none }
a:visited   { color: #313131; text-decoration: none }
a:hover     { color: #797979; text-decoration: none }
a:active    { color: #797979; text-decoration: none }

[Mich_]

la pseudoclasse :active si riferisce alla condizione in cui il mouse e` sull'oggetto e il bottone e` premuto.

Quello che tu intendi con stato attivo, non si puo` realizzare solo con i CSS, ma occorre un minimo di programmazione lato server (statica o dinamica a seconda dei casi).

In pratica tu devi settare (ad esempio):

HTML:
<ul>
  <li> ... </li>
  <li class="attivo"> ... </li>
  <li> ... </li>
</ul>

oppure:
<ul>
  <li><a href="..." title="..."> ... </a></li>
  <li><a href="..." title="..." class="attivo"> ... </a></li>
  <li><a href="..." title="..."> ... </a></li>
</ul>

CSS:
li {
  ... formattazione a riposo ...
}
li:active {
  ... formattazione in caso attivo ...
}

oppure (nel caso della seconda opzione)
li a {
  ... formattazione a riposo ...
}
li a:active {
  ... formattazione in caso attivo ...
}

L'aggiunta class="attivo" puoi farla tramite programma lato server, oppure puoi settarla pagina per pagina tramite il normale editor delle pag Web.

[Anlu]

Ciao Mich, è col cuore in mano che ti ringrazio per l'interessamento.
Hai ragione: sono andata a vedere nella pagina da cui copiai quel codice, e gli effetti descritti pare non comprendano anche il far restare un link in evidenza (con colore e sfondo diversi) quando ci si trova nella relativa pagina :
http://www.imontanari.it/cssmenu/menu01o.html#

Perdonami, ma cosa intendi per lato server? Se vuol dire in linea, premetti che il sito ancora non lo è, devo finirlo. Preferirei comunque agire pagina per pagina, non è un problema.

Ho appreso le dinamiche dei CSS solo da poco...saresti così tanto gentile da scrivermi la dicitura esatta nel foglio CSS e quella relativa in html? Potrei inoltre mantenere in CSS il codice che copiai da quel sito? Mi è risultato ottimo perché crea pulsanti, le scritte dunque si distanziano in modo uguale e lo sfondo per ciascuna cambia al passaggio del mouse...
Credimi, non è per pigrizia che ti chiedo di scrivermi le esatte diciture: ho letto tante cose e provato tante soluzioni: da non grande esperta di CSS è stato tutto vano...

[Anlu]

ps. facciamo così: prima provo da sola a fare come mi hai spiegato. Se non ci riesco, te lo dirò e vedrai se puoi scrivermi il codice...
A presto

[Anlu]

Niente. Non ci riesco

[Mich_]

Nel messaggio precedente ti ho dato due indicazioni alternative. Ma evidentemente la cosa non e` sufficiente.

Credo che ti convenga mettere la pagina in rete, in un posto provvisorio (nel regolamento del forum ci sono alcune indicazioni), in modo da farci vedere la tua pagina (o le tue pagine, che evidentemente sono piu` di una). Non e` tempo perso, perche` capita piuttosto frequentemente che una pagina funziona in locale e poi in rete non va piu`.

[Anlu]

Se ti facessi vedere la home tramite una foto, andrebbe lo stesso bene? (immagino di no, domanda naif, scommetto )

[deleted_20210415]

Se ti facessi vedere la home tramite una foto, andrebbe lo stesso bene? (immagino di no, domanda naif, scommetto )

Ovviamente no, non sarebbe accessibile il codice HTML e CSS

[Anlu]

Ho un vecchio sito di tanti anni fa caricato su altervista...Potrei magari mettere la pagina dell'index e il file css in quello spazio ftp e darvi il link...che ne dite? La chiamerei "index2" e cambierei il collegamento alla parola "home" nel menu con "index2"...
Faccio in questo modo?

[deleted_20210415]

Ho un vecchio sito di tanti anni fa caricato su altervista...Potrei magari mettere la pagina dell'index e il file css in quello spazio ftp e darvi il link...che ne dite? La chiamerei "index2" e cambierei il collegamento alla parola "home" nel menu con "index2"...
Faccio in questo modo?

Si, se lo hai già e hai già le credenziali credo ti convenga, soprattutto se sei già pratica di quell'ambiente