menu css

[s.ef]

ciao
dovrei modificare questo menu css...........ma non riesco:


Il menu è a sfondo giallo e quando l'utente passa sopra il collegamento quest'ultimo viene evidenziato con lo sfondo rosso.

Dovrei fare in modo di poter cambiare la calasse di un solo collegamento del menu per farla restare sempre attiva (quindi con il collegamento a sfondo rosso)


Codice menu:

	#hnav {margin: 0;padding: 0;}
#hnav {
	background: #750704;
}
.storytitle a { text-decoration: none; }
.storycontent{margin-bottom: 5px; border-bottom: 1px solid #750704;}

#commentform { margin-left: 20px; }
#commentform  #comment { width:450px; }
#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
 	background: #fff; padding: .2em; }
#commentform textarea { width:100%;}
#commentlist li {border: 2px solid #2050A0; margin-bottom: 20px; padding-left: 20px;}
#commentlist li ul { border-left: 1px solid #ddd; font-size: 110%; list-style-type: none;}




#hnav ul
{
text-align: center;
padding-bottom: 2px;
padding-top: 2px;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
white-space: nowrap;
font-weight: bold;
background-color: #E7C35A;
color: #730400;
width: 100%;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}
#hnav  li  a { padding: 3px 10px; }
#hnav ul li
{
display: inline;
padding-left:1;
padding-right: 1;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}

#hnav ul li a
{
padding-left: 3px;
padding-right: 3px;
padding-bottom: 5px;
padding-top: 5px;
color: #730400;
text-decoration: none;
border-right: 2px solid #F8C55A;
}

#hnav ul li a:hover
{
	background: #FF0000;
color: #E7C35A;
}

#hnav #active { border-left: 2px solid #F8C55A; }


#nav li
{
list-style:none;
}

codice pagina:

 <div id="hmenu">
<div id="hnav">

<ul id="navlist">
<li class="attivo">
        xxxxx
     

     <li class="page_item">
        xxxxx
     

     <li class="page_item">
 xxxxxA'
      

     <li class="page_item">
        Txxxxx
     

     <li class="page_item">
        OxxxxxA
     

     <li class="page_item">
        CxxxxxI
     

     <li class="page_item">
        xxxxxG
     

     <li class="page_item">
        xxxxx.
     

     <li class="page_item">
        xxxxx
     [/list]
</div>
</div>

vorrei che invece di
<li class="page_item">

su un collegamento poter scrivere
<li class="attivo">

e che solo questo collegamento restasse sembre a sfondo rosso.......



quancuno potrebbe aiutarmi perche non sono in grado di farlo da sola.....ho provato ma non sono riuscita ad associare una classe 'attivo' al collegamento.....alla fine mi prendeva sempre quella di default

[Mich_]

Se ho capito giusto ...
e` una cosa che si fa lato server: il CSS non ha la possibilita` di modificare la pagina.
In alternativa (se proprio non hai un linguaggio lato server) si puo` fare con JS (javascript).

Comuqneu e` un argomento gia` trattato, per cui trovi vari interventi tramite la riceca (bottone in alto).

[emu86]

modifica questa voce

#hnav ul li a:hover
{
	background: #FF0000;
color: #E7C35A;
}

con

#hnav ul li a:hover, #hnav ul li a:active
{
	background: #FF0000;
color: #E7C35A;
}

se non sbaglio è questa... ciao

[s.ef]

forse mi sono spiegata male




allora io prima di usare questo tipo di menu facevo così:

 <div id="hmenu">
<div id="hnav">

<ul id="navlist">
<li class="attivo">
        xxxxx
     

     <li class="pass>
        xxxxx
     

     <li class=attivo">
 xxxxxA'
      

     <li class="attivo">
        Txxxxx
     

     <li class="attivo">
        OxxxxxA
     

     <li class="attivo">
        CxxxxxI
     

     <li class="attivo">
        xxxxxG
     

     <li class="attivo">
        xxxxx.
     

     <li class="attivo">
        xxxxx
     [/list]
</div>
</div>

la calss attivo era il menu normale
mentre pass è il menu con sfondo rosso

avevo formatato il css in questa maniera:
.attivo
.pass

dandogli tutti i valori per fare in modo che funzionassero insieme...


non riesco a fare la stessa cosa con questo nuovo menu

[Mich_]

In quest'ultimo si nota che ci sono due classi: attivo (presente in quasi tutti) e pass (presente in un elemento della lista).
Questo presuppone che ci siano nel CSS gli stili per le due classi.

In quello di prima ci sono anche due classi: attivo (un solo elemento) e page_item (tutti gli altri).
Pero` non vedo nessuno stile definito per tali classi.
Esiste invero uno stile per la classe active (che non e` uguale ad attivo), che non corrisponde a nessun elemento dell'HTML, ma forse si riferisce ad altre zone della pagina Web.

In pratica, con quelle info non si riesce a capire cosa vuoi esattamente, ne` di conseguenza perche` non ti funzioni.

[s.ef]

lo so che sul mio codice non esistono le due classi.....

infatti il mio era un esempio di cosa volevo fare con il codice css postato........cercavo di farmi capire.

Vorrei creare due classi identiche ma che abbiano di diverso solo il collegamento attivo....

pero con quel codice non sono capace perche anche se creo una classe identica a quella dando un altro nome.....
comunque quando la uso nella pagina mi richiama sempre lo stesso stile......


penso di sbagliare qualche passaggio per questo vi chiedevo aiuto

[Mich_]

Non e` possibile in un forum di questo tipo fare un trattato su cosa sono e come si usano i CSS.
Per quello ci sono le guide ed i tutorial. Il tutorial CSS di HTML.it non e` male.
Per poter frequentare questo forum e capirsi e` necessario un linguaggio comune ed un minimo di conoscenza di base. Qui dentro presumiamo che tutti siano a conoscenza delle basi del CSS, all'incirca quelle fornite dai tutorial.
Invece mi pare che tu non abbia queste conoscenze.

E la pagina postata all'inizio e` complessa e non completa, e questo impedisce di poterci metter mano.
Inoltre se la dovessi fare io la imposterei in modo diverso, in modo da semplificarne il codice e quindi semplificarne gli interventi.

Mi trovo pertanto in difficolta` a proseguire la discussione, e lascio il campo a qualcuno che ha forse piu` pazienza.