[CSS] Menu con funzionalità "selezionato"

[fabbio86]

Ciao a tutti!

Ho realizzato un menu tramite liste.
Vorrei ora realizzare su uno dei pulsanti la funzionalità "pagina corrente" o "selezionato". Cioè se il link punta alla pagina che è visualizzata, il link non è più attivo e questo fatto viene indicato da una decorazione diversa. Ho provato ma non sono riuscito a ottenere il risultato voluto.

Qualcuno può aiutami?

Grazie!

Ecco il codice che ho utilizzato (il pulsante di contenuto prova dovrebbe essere visualizzato diversamente dagli altri).

XHTML

<div id="navigation">
<ul>
    <li class='selected'>Prova
    [*][url="#"]ciao[/url]
    [*][url="#"]pippo[/url][/list]

CSS

div#navigation {
    font: 80% Arial, Helvetica, sans-serif;
    position: absolute;    
    left: 10px;
    top: 60px;
    width: 280px;
    border: 0px;
}

.selected {
    border: 1px solid #000000;
    display: block;
    background-color: #b0dce8;
    color: #000000;
    margin: 0;
    padding: 0.3em 0.6em 0.3em 1em;
    text-decoration: none;
    border-bottom: 1px solid #000000;
    border-left: 6px solid #EAD100;
}
    
div#navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #000000;
}
    
div#navigation li, .selected {
    font-size: 1.1em;
    display: inline;
    margin: 0;
    padding: 0;
}
    
div#navigation a:link, div#navigation a:visited {
    display: block;
    background-color: #b0dce8;
    color: #000000;
    margin: 0;
    padding: 0.3em 0.6em 0.3em 1em;
    text-decoration: none;
    border-bottom: 1px solid #000000;
    border-left: 6px solid #0066ff;
}

div#navigation a:hover, div#navigation a:focus, div#navigation a:active{
    background-color: #0066ff;
    color: #FFFFFF;
    border-left: 6px solid #EAD100;
} 

[fabbio86]

Hai ragione: qui l'esempio

Il primo pulsante (nominato "prova") dovrebbe presentare l'effetto selected. Purtroppo il risultato non è esattamente quello voluto. Dovrebbe essere identico agli altri pulsanti e presentare il bordino giallo anzichè azzurro.

[KillerWorm]

Ciao

Fai attenzione.. stai applicando la classe selected direttamente al tag li mantre nelle altre voci, la formattazione analoga, viene applicata al tag a..
Secondo me dovresti utilizzare un tag contenitore.. in questo caso sarebbe l'ideale usare uno span ed applicare a questo la classe selected.

Fai la prova.. io non lo ho testato:

<ul>[*]<span class='selected'>Prova</span>[*]ciao[*]pippo[/list]

[KillerWorm]

..un'altra cosa
nel css

div#navigation li, .selected {
    font-size: 1.1em;
    display: inline;
    margin: 0;
    padding: 0;
}

..questo selected non ci sta a fare niente, dato che lo hai già dichiarato dall'altra parte.. credo dovresti toglierlo :master:

[fabbio86]

Secondo me dovresti utilizzare un tag contenitore..

Hai perfettamente ragione. Ora funziona

..questo selected non ci sta a fare niente, dato che lo hai già dichiarato dall'altra parte..

Ora 'ho tolto perchè era davvero inutile. Però ho una domanda: se due selettori hanno alcuni parametri in comune posso farglieli condividere? Questa era l'idea originaria. Ad esempio, se so che i contenitori pippo e pluto hanno il testo verde e lo sfondo relativamente bianco e nero posso scrivere una cosa del tipo:

.pippo, .pluto{
color: #FF0000;
}

.pippo{
background-color: #FFFFFF;
}

.pluto {
background-color: #000000;
}

Grazie ancora per l'aiuto!

[KillerWorm]

se due selettori hanno alcuni parametri in comune posso farglieli condividere? Questa era l'idea originaria.

Certamente.. in quel caso sì..

Se però ci sono delle proprietà uguali, tra le due dichiarazioni, queste saranno sovrascritte per cui avranno valore le regola dell'ultima dichiarazione..

Il markup in alto infatti era praticamente ridondante, o meglio alcune regole sovrascritte nell'ultimo selected non erano coerenti con quello che dovevi ottenere.