css menu

**giuseppe500** · 13-09-2005, 14:55

ho il seguente frammento di codice:

<div class="menu" id="editMenu">
<div id="menunodo">
<a href=pippo.php>colorare</a>
</div>
</div>

come faccio a realizzare una regola css che mi setta lo sfondo di colorare a rosso nell'hover e a nero nel normale?
grazie.

**pierofix** · 13-09-2005, 14:59

Ma cos'è, italiano?

Vebbè.

Per impostare lo sfondo di un link che cambi al passaggio del mouse, il concetto è il seguente:

codice:

a { background-color:black }
a:hover { background-color:red }

Ora, quel che non capisco è l'uso così pesante dei div: non la trovi sovraccarica come struttura di markup?

**giuseppe500** · 13-09-2005, 15:24

avevi ragione, ho semplificato:
<div id="menunodo">
<a href=pippo.php>colorare</a>
</div>
in questo caso la regola come è?voglio dire ho visto che la segunte regola non funzia:
div.menunodo a:hover {
background-color: #ff0000;
color: #ffffff;
}
non riesco a capire perchè (è poco che usoi css prima usavo solo tabelle).
Graziwe pierofix.

**pierofix** · 13-09-2005, 15:43

Rimaniamo ancora un attimo sulla struttura di markup. Stai forse facendo un menù? Nel qual caso è uso comune utilizzare (ed ha senso anche dal punto di vista logico) le liste non ordinate. Ecco un esempio:

codice:

<ul id="menu">[*]Blog[*]About me[*]Photos[/list]

Comunque, tornando al tuo ultimo foglio di stile postato, il tuo ragionamento è più che corretto, solo che hai fatto un errore di distrazione: le classi si puntano con "." ma gli id si puntano con "#". Ecco che il tuo codice corretto diventa:

codice:

div#menunodo a:hover { 
   background-color: #f00; 
   color: #fff; 
}

Puoi comunque tralasciare il "div" davanti a "#" e ricorda che i valori esadecimali dei colori possono essere abbreviati quando le tre coppie RGB sono composte da due valori uguali. Ecco che "#ff00aa" diventa "#f0a" e "#ffffff" diventa "#fff".

**giuseppe500** · 13-09-2005, 15:47

grande pierofix , se non rompo , le ultime 2 domande:
1)Quando gli id sono nidificati come ci si comporta con la sintassi?
2)è concettualmente sbagliato usare id nidificati?

**pierofix** · 13-09-2005, 15:55

Bè, tecnicamente non è per niente un errore ed è anzi piuttosto ricorrente annidare più id. Ovviamente, però, la struttura deve essere snella e ben studiata. Ecco un esempio di buon annidamento:

codice:

<body id="blog">
   <div id="testata">
      ...
   </div>
   <div id="navigazione">
      <ul id="menu">
         ...
      <ul>
      <ul id="ultimiEventi">
         ...
      <ul>
   </div>
   <div id="contenuto">
      ...
   </div>
   <div id="footer">
      <div id="creativeCommons">
         ...
      </div>
      <div id="standard">
         ...
      </div>
   </div>
</body>

Per puntare ad esempio al div con id="standard" puoi o richiamarlo singolarmente (soluzione più sensata)

codice:

#standard { /* ... */ }

oppure in base ai genitori

codice:

#blog #footer #standard { /* ... */ }

Discussione: css menu

Strumenti discussione

Ricerca discussione

Visualizza

css menu

Permessi di invio