Menu css

[pastoweb]

Ciao, sto realizzando un sito per un amico e ho qualche problema a controllare l'effetto rollover sul menu... mi ci date un'occhiata?

E' un semplice menu di links, in cui quello selezionato ha un'immagine di sfondo e font bianco non sottolineato, mentre gli altri dovrebbero avere font nero con sottolineatura solo sull'hover, e mantenere lo stesso comportamento anche quando sono visited.

Il problema è appunto che dopo che un link è stato visitato il comportamento su hover sballa completamente... :master:

Ecco il link
e questo è il codice:

#menu ul {
margin:0;
margin-bottom:10px;
padding:0;
font-size:14px;
line-height:19px;
}

#menu li {
margin:0;
padding:0;
padding-left:19px;
list-style:none;
}

#menu a:link, a:visited {color:#000000; text-decoration:none;}
#menu a:hover {text-decoration:underline; color:#000000; font-weight:normal;}

#selected {color:#FFFFFF; background-image:url(../files/menu_selected.gif);}
#selected a:link, a:hover, a:visited {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}

[andrea.paiola]

1. a:link - Definisce un link non ancora visitato.
2. a:visited - Definisce un link visitato, ovvero presente nella memoria del browser.
3. a:hover - Definisce lo stato del link quando l'utente sposta il cursore su di esso.
4. a:active - Definisce lo stato del link mentre il tasto del mouse è premuto e non rilasciato.

devono essere usate in quest'ordine preciso... forse è questo il tuo errore...

[pastoweb]

No, modificando l'ordine l'effetto è cambiato ma ancora non funziona correttamente.

Ho modificato il css così:

#menu a:link, a:visited {color:#000000; text-decoration:none;}
#menu a:hover {text-decoration:underline; color:#000000; font-weight:normal;}

#selected {color:#FFFFFF; background-image:url(../files/menu_selected.gif);}
#selected a:link, a:visited, a:hover {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}

Per caso incide anche il modo in cui raggruppo gli attributi?

[andrea.paiola]

quello era sicuramente un errore... adesso vediamo di raggiungere il tuo obiettivo...

#menu a:link, a:visited {color:#000000; text-decoration:none;}
#menu a:hover {text-decoration:underline; color:#000000; font-weight:normal;}

#selected {color:#FFFFFF; background-image:url(../files/menu_selected.gif);}
#selected a:link, a:visited{
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
} 
#selected a:hover {
text-decoration:underline; color:#000000; font-weight:normal;
}

prova un po'...
ps: per il codice usa il tasto CODE sennò è un casino...

[pastoweb]

Hai messo gli attributi che dovrebbero andare sul testo non selected, a parte questo la tua soluzione funziona. Oltre all'hover, però, ho scritto separatamente il codice per tutti gli stati del link, anche se è uguale, e così funziona:

#selected a:link {color:#FFFFFF; text-decoration:none;font-weight:bold;}
#selected a:visited {text-decoration:none; color:#fff; font-weight:bold;}
#selected a:hover {text-decoration:none; color:#fff; font-weight:bold;}

Quindi il problema stava nel raggruppamento, ma non capisco perchè... c'è una regola generale o bisogna provare ogni volta empiricamente? :master:

[andrea.paiola]

che pirla che sono ho di nuovo fatto questo errore per raggrupparli devi scrivere così:

#selected a:link {color:#FFFFFF; text-decoration:none;font-weight:bold;}
#selected a:visited, #selected a:hover{text-decoration:none; color:#fff; font-weight:bold;}

non c'è niente di empirico è che mi sono dimenticato che devi riscrivere anche il nome dell'id se vuoi selezionare i links corretti...

[pastoweb]

OK, grazie mille!

[borgio3]

Io credo che il problema stia qui :

#menu ul {   margin:0;   
margin-bottom:10px;   
padding:0;   
font-size:14px;   
line-height:19px;   
}     

#menu li {   margin:0;   
padding:0;   
padding-left:19px;   
list-style:none;   
}     

#menu li a:link, #menu li a:visited {color:#000000; 
text-decoration:none;
}   

#menu li a:hover {text-decoration:underline; 
color:#000000; 
font-weight:normal;
}     

#selected {color:#FFFFFF; 
background-image:url(../files/menu_selected.gif);
}   

#selected a:link, 
#selected a:visited,
#selected a:hover{   color:#FFFFFF;   
text-decoration:none;   
font-weight:bold;   
}

Prova e facci sapere.

Ciao Ciao

[pastoweb]

Mah, con il consiglio di Andrea già mi sembrava risolto, tu vedi ancora qualche errore di visualizzazione? Su mac non ho fatto test...

[andrea.paiola]

io l'ho testato con le ultime versioni di IE, FF e Opera su win...
e comunque questo è il comportamento corretto standard