Menu tabs: link attivo con diverso colore

[sustia]

Ciao, sto perdendo la testa a cercare di capire come fare.
In questa pagina ho un menu tabs che viene originato automaticamente, e quello che vorrei fare è avere, per la pagina attiva, il tab di un colore differente.
In pratica quando è attiva, ad es., la pagina Azienda, vorrei che il tab fosse di un colore più scuro e con il carattere bianco (uguale all'effetto che si vede con hover per intenderci).
Siccome sto impazzendo vorrei sapere se qualcuno mi da indicazioni su come fare.
Il css è il seguente:

    .navigation  {
      float:left;
      width:100%;
      background-color: #EDF7E7;
      font-size:80%;
      line-height:normal;
        font-weight: bold;
        }
    .navigation ul {
    margin:0;
    padding:0px 0px 0 0px;
    list-style:none;
    font-weight: bold;
      }
    .navigation li {
      display:inline;
      margin:0;
      padding:0;
        font-weight: bold;
      }
    .navigation a {
      float:left;
      background:url("http://noria.ba.cnr.it/img/menu/tableftC.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
        font-weight: bold;
      }
    .navigation a span {
      float:left;
      display:block;
     background:url("http://noria.ba.cnr.it/img/menu/tabrightC.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#464E42;
        font-weight: bold;
        text-decoration:none;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .navigation a span {float:none; text-decoration:none;}
    /* End IE5-Mac hack */
    .navigation a:hover span {
      color:#FFF;
        text-decoration:none;
      }
    .navigation a:hover {
      background-position:0% -42px;
        text-decoration:none;
      }
    .navigation a:hover span {
      background-position:100% -42px;
        text-decoration:none;
      } 

[pierofix]

(Se ho compreso il problema...) Hai provato a dare un'occhiata a questo?

- www.alistapart.com/articles/keepingcurrent/

[marruz]

Originariamente inviato da pierofix
(Se ho compreso il problema...) Hai provato a dare un'occhiata a questo?

- www.alistapart.com/articles/keepingcurrent/

carino.

in ogni caso, sustia, il concetto è quello di affibbiare una classe specifica al tabs relativo alla pagina (nell'esempio di alistapart è idcurrent)

[sustia]

Avete già risposto? VVoVe:

Grazie a tutti e due, provo a dare un'occhiata e vi faccio sapere

[sustia]

Allora, ho dei problemi.
Il css che suggeriscono lì sembra non funzionare sul mio, mi dà un po' di casini, e quindi l'ho modificato così

.navigation a {
      float:left;
      background:url("http://noria.ba.cnr.it/img/menu/tableftC.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
        font-weight: bold;
      }
.navigation a span {
      float:left;
      display:block;
     background:url("http://noria.ba.cnr.it/img/menu/tabrightC.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#464E42;
        font-weight: bold;
        text-decoration:none;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .navigation a span {float:none; text-decoration:none;}
    /* End IE5-Mac hack */
    .navigation a:hover span {
      color:#FFF;
        text-decoration:none;
      }
    .navigation a:hover {
      background-position:0% -42px;
        text-decoration:none;
      }
    .navigation a:hover span {
      background-position:100% -42px;
        text-decoration:none;
      }
         .navigation #currentpage a {
      float:left;
      background:url("http://noria.ba.cnr.it/img/menu/tableftC.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
        font-weight: bold;
          background-position:0% -42px;
        text-decoration:none;
        color: #cccc00;
      }
.navigation #currentpage a span {
      float:left;
      display:block;
     background:url("http://noria.ba.cnr.it/img/menu/tabrightC.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      font-weight: bold;
        text-decoration:none;
        background-position:100% -42px;
        text-decoration:none;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .navigation #currentpage a span {float:none; text-decoration:none;}
    /* End IE5-Mac hack */
     .navigation #currentpage a:hover {
      background-position:0% -42px;
        text-decoration:none;
      }
    .navigation #currentpage a:hover span {
      background-position:100% -42px;
        text-decoration:none;
      } 

ed il codice che mi restituisce è il seguente

<div class="navigation">
<ul>
[url="index.php?id=3,0,0,1,0,0"]<span id="currentpage">Azienda</span>[/url]
[url="index.php?id=9,0,0,1,0,0"]<span>Gruppo di ricerca</span>[/url]
[url="index.php?id=20,0,0,1,0,0"]<span>Attività di ricerca</span>[/url]
<a href="index.php?id=10,0,0,1,0,0"><span>Progetti</span>
</a>
<a href="index.php?id=13,0,0,1,0,0"><span>Servizi/Utilità</span>
</a>
<a href="index.php?id=18,0,0,1,0,0"><span>Contatti</span>
</a>
<a href="index.php?id=19,0,0,1,0,0"><span>Newsletter</span>
</a>[/list]
</div> 

anche se vedo la classe sembra non funzionare, e mi sposta tutto il menu al centro.

[pierofix]

Stai facendo un macello tra markup e CSS.

Innanzitutto dovresti scrivere in maniera corretta la lista di link, ovvero usando anche gli elementi [*] come figli di <ul>.

Poi, dovresti scrivere in maniera corretta i selettori di discendenza nel CSS: hai usato dei percorsi sballati.

[sustia]

Ci rinuncio, troppo incasinato per le mie conoscenze, perdo solo tempo per quello che sarebbe qualcosa legato all'aspetto ma non fondamentale

Grazie per l'aiuto comunque

[marruz]

Originariamente inviato da sustia

Ci rinuncio, troppo incasinato per le mie conoscenze, perdo solo tempo per quello che sarebbe qualcosa legato all'aspetto ma non fondamentale

Grazie per l'aiuto comunque

al tuo posto farei così (per non dover ripensare il tutto sulla base dell'esempio di alistapart):

- una nuova classe (ad esempio .tabevidenziato) con dichiarazioni tali da far apparire il tab come lo desideri
(farei una prova in (x)html per verificare che tutto funzioni prima di procedere al successivo)

- in php farei un controllo (simile a quello dell'esempio indicato da pierofix) che "sposti" la class="tabevidenziato" dove necessario.


In alternativa (lo suggeriva anni addietro zeldman, personalmente l'ho sempre trovato troppo laborioso) potresti creare n piccoli fogli di stile (uno per ogni tab) e dare ad ogni tab un id (o una classe). In questi "foglietti" di stile sarà sufficiente specificare le regole per le tabs. infine occorre "indicare" alla pagina di importare il "foglietto" adeguato.

[pierofix]

Ti consiglio di stare parecchio attento. (Non è una minaccia, eh! ) Guarda, ad esempio, la tua struttura di markup: hai fatto degli errori sintattici. Una lista deve avere questa conformazione:

<ul>[*]...
   ...[/list]

Tu hai inserito i link ma non li hai racchiusi negli elementi di lista ([*]). Gli errori nella gerarchia dei selettori CSS, oltretutto, mi fanno pensare che tu abbia delle lievi lacune sparse e latenti: forse ti farebbe bene leggere qualche guida, magari acquistare un testo specifico.

Insomma, credo ti basti prendere solo un po' più di padronanza negli strumenti: le cose, mi pare, in generale le sai.

conoscenze, perdo solo tempo per quello che sarebbe qualcosa legato all'aspetto ma non fondamentale

Non ne sarei così convinto. Trovo invece fondmentale rendere chiaro all'utente in quale sezione del sito si trova: ecco che evidenziare il pulsante corrispondente nel menù diventa una soluzione efficace.

[sustia]

Maledetti, mi avete fatto quasi ripensare a questo e ora mi devo fare le correzioni

Ho corretto gli errori nella lista (le impostazioni si trovano in un file php e quindi avevo dimenticato di farle) e quindi ora mi visulizza questo

<div class="navigation">
<ul>[*][url="index.php?id=3,0,0,1,0,0"]<span>Azienda</span>[/url][*][url="index.php?id=9,0,0,1,0,0"]<span>Gruppo di ricerca</span>[/url][*][url="index.php?id=20,0,0,1,0,0"]<span>Attività di ricerca</span>[/url][*][url="index.php?id=10,0,0,1,0,0"]<span>Progetti</span>[/url][*][url="index.php?id=13,0,0,1,0,0"]<span>Servizi/Utilità</span>[/url][*][url="index.php?id=18,0,0,1,0,0"]<span>Contatti</span>[/url][*][url="index.php?id=19,0,0,1,0,0"]<span>Newsletter</span>[/url][/list]
</div> 

Il problema è che, non avendo confidenza con i css, e avendo ancora meno tempo per studiarli (non è il mio lavoro, in teoria dovrei lavorare con le piante all'università ) mi incasino, quindi impazzisco a trovare la soluzione.

Mo faccio qualche altra prova, siete responsabili della mia salute mentale