colore testo voce di menu

[mariarosaria]

Ciao a tutti...
Perdonate la mia ignoranza, ma il mio webmaster ultimamente è parecchio impegnato e non so come fare.

Non ne so niente di css, ma con un pò di pazienza ho provato a decifrare qualcosa e ci sto riuscendo.
Per adesso ho voci di menu bianche che diventano blu al passaggio del mouse.
Quello che vorrei fare e che non riesco a fare e che il colore del testo della voce di menu rimanga blu sulla voce che seleziono. Non so se mi sono spiegata. Per adesso cambia solo lo sfondo della voce di menu selezionata, ma il testo mi rimane bianco. Vorrei che anche il testo cambiasse. Questo è il mio css:

#menu h3 { color:#fff; font-size:18px; } .menu, .menu ul, #mainlevel { margin:0; list-style:none; } .menu li, #mainlevel li { background:url(../images/backgrounds/black10pct.png); margin-bottom:1px; border-bottom:0px solid #888;/*border menù*/ width:200px; } .menu li:hover, li#current, #mainlevel, li:hover { background:url(../images/backgrounds/black20pct.png); } li#current { } .menu a, #mainlevel a { color:#ffffff; /*menu test*/ text-decoration:none; display:block; padding:5px; padding-left:10px; } .menu a:hover { color:#000066; /*menu test*/ }

A questo, ho aggiunto anche quest'altro pezzo trovato sul forum, ma non ho nemmeno risolto.


<style type="text/css"> </style>
Devo forse cambiare qualcos'altro in qualche altro punto del css?
Grazie a tutti.

P.S. Comunque è divertente provare a decifrare il codice!

[Mich_]

Non e` banale quanto credi.
E non si puo` fare cono solo HTML+CSS.

L'ideale e` avere il supporto di un programma lato server, anceh se ci sono esempi fatti lato client con JS.

Comunque nel forum ci sono molti interventi simili: ti consiglio una ricerca

[cerba]

Io ci provo.
Che ne dici di postare il link così vediamo di persona il lavoro?

[mariarosaria]

Grazie cerba.
Allora, il link del sito è questo: www.fraternitamariaimmacolata.it

Come già detto, vorrei che la voce di menu evidenziata, oltre ad avere lo sfondo più scuro, avesse il colore del testo diverso. Pensavo fosse più semplice, perchè non mi spiego come mai l'immagine di sfondo della voce si cambi dal css e il colore del testo no.

Vuoi che ti invii il css completo o basta quel pezzo che avevo postato?

Grazie

[MaxSimon]

Nel file template.css devi aggiungere alla riga 381 (#mainlevel-nav a:hover, a#active_menu-nav )
la seguente regola a quelle già in elenco:
color: blue;

Se poi il colore lo vuoi di un blu diverso (ad esempio come nel menu verticale a destra) invece di blue metti
color:#000066;

Spero di aver capito cosa intendevi.
Ciao.

[mariarosaria]

Grazie MaxSimon.

Allora, adesso nel menu in alto succede quello che avevo chiesto (ovvero, la voce evidenziata ha il testo blu).
Ma se io volessi farlo anche per il menu laterale?
Ho provato da sola, ma non sono riuscita.

Inoltre (visto che ci siamo...), se nel menu superiore volessi fare (per esempio) il testo verde solo quando il mouse è sopra e il colore blu quando la voce è evidenziata?

Grazie a tutti

[MaxSimon]

Devi aggiungere sempre nel file template.css questa nuova regola:

ul.menu li#current.active {
color: #000066;
}

in questo modo il colore verrà applicato solo agli elementi selezionati.

Per quanto riguarda il secondo punto nopn è consigliabile a livello estetico mettere colori diversi, comunque se proprio vuoi devi mettere la regola:
#mainlevel-nav a:hover {
color: green;
}

C i a o o o

[cerba]

beh, sono arrivato un pò tardi..il buon MaxSimon ti ha già dato degli ottimi consigli..

[mariarosaria]

Allora, ho provato, ma le due regole non funzionano.

Questa: ul.menu li#current.active { color: #000066; }
non ha funzionato.

Mentre su questa : #mainlevel-nav a:hover { color: green; }
prevale quella precedentemente suggerita da MaxSimon (#mainlevel-nav a:hover, a#active_menu-nav )


Ho provato tutte le combinazioni, ma niente. Anche perchè io non so la differenza tra "ul", "li" e "a".

Altre idee?
Grazie


(P.S. Per MaxSimon: Ti ho mandato un messaggio privato)

[MaxSimon]

Scusa, ho commesso un errore.
In generale, la regola
ul.menu li#current.active a
si legge così:
seleziona tutti gli elementi a (link) contenuti in li (voci dell'elenco ul) che hanno id="current" e class="active" a loro volta contenuti nell'elenco non ordinato ul con class="menu".

Quindi selezioni le voci del menu a destra (class="menu") selezionate (class="current"): se vuoi dare il colore blu (#000066) la regola è questa:

ul.menu li#current.active a {
color: #000066;
}

Se vuoi impostare un colore diverso nel momento in cui il mouse passa sopra una voce devi aggiungere la pseudoclasse :hover all'elemento non selezionato quindi:

ul.menu li a:hover {
color: green;
}

che si legge così:
seleziona tutti gli elementi a (link) con pseudoclasse :hover (con il mouse sopra) contenuti in li (voci dell'elenco ul) a loro volta contenuti nell'elenco non ordinato ul con class="menu".
Questa funziona nel menu laterale (class="menu").

Per il menù orizzontale invece (class="mainlevel-nav") devi indicare il colore con questa regola:

ul#mainlevel-nav li a:hover {
color: green;
}
che si legge così:
seleziona tutti gli elementi a (link) con pseudoclasse :hover (con il mouse sopra) contenuti in li (voci dell'elenco ul) a loro volta contenuti nell'elenco non ordinato ul con class="mainlevel-nav".

Prova in questo modo e poi fammi sapere.

Ciao.