in un menu, colore di sfondo uguale per tutti i link ma immagine che cambia...

[darkiko]

cià, vediamo di spiegare al meglio...

ho una serie di pulsanti resi "block" che devono avere tutti lo stesso colore di sfondo, devono diventare dello stesso colore :hover, ma devono avere tutti oltre al colore (ripeto uguale per tutti) anche un'immagine di sfondo (un rettangolino colorato) diverso per ogni pulsante...

la struttura html dei pulsanti è:

<div id="nav">
<ul>
<li class="titolo"><a id="titolo_uno">PRIMO PULSANTE</a>
<li class="titolo"><a id="titolo_due">SECONDO PULSANTE</a>
...[/list]

mentre nel css

div#nav a{
display:block;
}
div#nav .titolo a{
color: #fff;
background-color:#f00;
}
div#nav .titolo a:hover{
background-color:#0f0;
}
div#nav a#titolo_uno{
background:url(img/rettangolo1.gif) top left no-repeat;
}
div#nav a#titolo_due{
background:url(img/rettangolo2.gif) top left no-repeat;
}

vedo bene l'immagine di sfondo, ma i colori non vanno...
devo specificare i colori per ogni #titolo_n? no vero?

[darkiko]

aggiungo un'altra richiesta:

se ai miei tag "a" non metto un href (usano un js) oltre a non vedersi la manina (che si può risolvere) è possibile che IE non consideri l':hover?

[zoom]

mmm, la prima mi sembra giusta...
dovrebbe già prendere il colore di sfondo :master:


la seconda invece sì. da quanto ricordo senza href IE non capisce che è un link e non sfrutta l'hover
metti un href fittizio tipo void(0)

[darkiko]

Originariamente inviato da zoom
mmm, la prima mi sembra giusta...
dovrebbe già prendere il colore di sfondo :master:


la seconda invece sì. da quanto ricordo senza href IE non capisce che è un link e non sfrutta l'hover
metti un href fittizio tipo void(0)

la prima ti garantisco che non mi funziona...
vede l'immagine (quel rettangolo1.gif, rettangolo2.gif etc...) ma non i colori...

per la seconda cosa, scusa la mia ignoranza, come si scrive un href fittizio con void(0)?

[zoom]

sulla prima boh, ero sorpreso anch'io perchè mi sembra giusto come codice... :master:

sulla seconda...

mmmm
href="javascript:void(0)"

:master:
boh, è un po' che non ne scrivo ma dovrebbe essere giusto

[darkiko]

Originariamente inviato da zoom
sulla seconda...

mmmm
href="javascript:void(0)"

:master:

oki, questo funziona

per l'altro problema credo proprio che dare quell'immagine al background di un "a" specifico preceda il comando di colore del background... e quindi dovrei o assegnarlo a mano a tutti i "#titolo_n" o non usare direttamente immagini colorate, ma se poi voglio cambiare un colore devo rimettere mano a tutte...

naaaaaa, non ci credo che non esista un altro modo

[Mich_]

L'href generico e` di solito
<a href="#" onclick="return false;">

Per lo sfondo, dato che vuoi colori diversi devi specificarli per ogni oggetto; non ci scappi.

Di solito si preferisce dare sfondi al contenitore dell'<a>, dato che lo spazio occupato dall'<a> e` molto piccolo.

Se hai una serie di oggetti in cui devi dare una serie di caratteristiche comuni ed una caratteristica specifica, conviene fare una cosa del tipo:
<ogg class="cls" id="nome1">
<ogg class="cls" id="nome2">
<ogg class="cls" id="nome3">
...

e poi il CSS:
.cls {
caratteristiche comuni
}
#nome1 { caratteristica specifica }
#nome2 { caratteristica specifica }
#nome3 { caratteristica specifica }
...

Attenzione all'ordine. L'ultima caratteristica definita sovrascrive le altre, se gli identificatori si sovrappongono.

[darkiko]

Originariamente inviato da Mich_
Per lo sfondo, dato che vuoi colori diversi devi specificarli per ogni oggetto; non ci scappi.

Di solito si preferisce dare sfondi al contenitore dell'<a>, dato che lo spazio occupato dall'<a> e` molto piccolo.

Se hai una serie di oggetti in cui devi dare una serie di caratteristiche comuni ed una caratteristica specifica, conviene fare una cosa del tipo:
<ogg class="cls" id="nome1">
<ogg class="cls" id="nome2">
<ogg class="cls" id="nome3">
...

e poi il CSS:
.cls {
caratteristiche comuni
}
#nome1 { caratteristica specifica }
#nome2 { caratteristica specifica }
#nome3 { caratteristica specifica }
...

Attenzione all'ordine. L'ultima caratteristica definita sovrascrive le altre, se gli identificatori si sovrappongono.

i colori sono gli stessi, diversi sono dei rettangoli che devono essere specifici della sezione; io per quello volevo applicare il colore a tutti, e solo il rettangolo specifico ad ogni pulsante...

seguendo il tuo consiglio (ma mi sa che non ho capito proprio tuttttttto ) ho provato a cambiare così

HTML:

<div id="nav">
<ul>[*]<a class="titolo" id="titolo_uno">PULSANTE UNO</a>[*]<a class="titolo" id="titolo_due">PULSANTE DUE</a>
...[/list]
</div>

e nel CSS

div#nav a{
display:block;
}
div#nav a.titolo{
color: #fff;
background-color:#f00;
}
div#nav a.titolo:hover{
background-color:#0f0;
}
div#nav #titolo_uno{
background:url(img/rettangolo1.gif) top left no-repeat;
}
div#nav #titolo_due{
background:url(img/rettangolo2.gif) top left no-repeat;
}

ma specificando un'immagine di background per l'a specifico, non prende i colori dell'a generico

[Mich_]

Originariamente inviato da darkiko
ma specificando un'immagine di background per l'a specifico, non prende i colori dell'a generico

Infatti. Per questo ti consigliavo di applicare le caratteristiche diverse al blocco che contiene il tag <a> (nel tuo caso il[*]) e non al tag <a>.

E devi anche fare in modo che il[*] sia un po' piu` grande dell'<a> (ad esempio con delle dimensioni ragionevoli al[*], tipo height:2em;)

In alternativa devi definire un border o dei margin all'<a> (ma non so se sono applicabili all'<a>, dato che <a> e` elemento di tipo inline).

[darkiko]

Originariamente inviato da Mich_
Infatti. Per questo ti consigliavo di applicare le caratteristiche diverse al blocco che contiene il tag <a> (nel tuo caso il[*]) e non al tag <a>.

E devi anche fare in modo che il[*] sia un po' piu` grande dell'<a> (ad esempio con delle dimensioni ragionevoli al[*], tipo height:2em;)

In alternativa devi definire un border o dei margin all'<a> (ma non so se sono applicabili all'<a>, dato che <a> e` elemento di tipo inline).

ma IE non capirebbe il cambio di background allo stato :hover del li perché li "legge" solo applicati agli a, o dico una vaccata?

sono di coccio, lo so