asegnare una classe ad ogni ul li a

[Innavoig]

http://www.farandagiovanni.net/farandagiovanni/

devo aggiungere il roll over ad ogni singolo elemento li .


in pratica sono riuscito a fare questa cosa perch è ho creato un menu
ul li a

poi dentro a , ho inserito un altro div , che poi ho formattato così potendo dare come sfondo ad ogni singola voce li a , uno sfodno diverso per ognuno.
M aè molto complicato ,ho provato a fare ul li a .

aiutooooo

[Mich_]

Ci sono errori logici nel codice CSS, che vanno corretti, altrimenti la visualizzazione in qualche browser serbera` sorprese.

Fondamentalmente non puoi inserire un elemento blocco dentro un elemento inline. Questo comporta modifiche sia nel codice HTML che nel CSS.
1. Dentro gli <a> non ci possono stare dei <div>. Trasformali in <span>, oppure usa direttamente il tag <a> per dare il colore.
2. I tuoi[*] non possono essere inline. Per affiancarli devi usare il float.

Poi hai dimenticato di dare dimensioni ad una serie di elementi:
- al <ul> (ti basta definire 100% sia a width che a height, dato che le dimensioni sono gia` nel #menu)
- ai[*] - e` opportuno nel tuo caso (non necessario, ma io non rischierei una brutta figura in qualche browser

Nel tuo CSS ci sono anche dei selettori inutili, che creano confusione: nel codice HTML non ci sono class="giallo" ne` altri colori, quindi i selettori che contengono .colore non servono (non vengono comunque utilizzati dal browser.

Una volta sistemate queste cose, verifica di avere nuovamente la visualizzazione corretta (nei vari passaggi puo` essere che qualcosa vada fuori squadra, ma se parti dal risultato il codice non verra` mai fatto bene, e le sorprese sono in agguato).

E quindi puoi implementare il rollover.

Supponendo una struttura html del tipo:

 <div id="menu">
  <ul>[*][*][*][*][/list]
</div>

Se vuoi un rollover dello stesso colore per tutti, ti basta aggiungere:
#menu a:hover {
background-image: url(../images/bianco.jpg);
}

Se invece ciascun colore deve avere un rollover diverso:
a#rosso:hover {
background-image: url(../images/rossohover.jpg);
}
ecc.

Nota che se usi background-image, non vedrai il background-color, in quanto l'immagine di sfondo "sta sopra" il colore di sfondo, e quindi il rollover andra` realizzato tramite una nuova immagine.

[Innavoig]

Originariamente inviato da Mich_
Ci sono errori logici nel codice CSS, che vanno corretti, altrimenti la visualizzazione in qualche browser serbera` sorprese.

Fondamentalmente non puoi inserire un elemento blocco dentro un elemento inline. Questo comporta modifiche sia nel codice HTML che nel CSS.
1. Dentro gli <a> non ci possono stare dei <div>. Trasformali in <span>, oppure usa direttamente il tag <a> per dare il colore.
2. I tuoi[*] non possono essere inline. Per affiancarli devi usare il float.

Poi hai dimenticato di dare dimensioni ad una serie di elementi:
- al <ul> (ti basta definire 100% sia a width che a height, dato che le dimensioni sono gia` nel #menu)
- ai[*] - e` opportuno nel tuo caso (non necessario, ma io non rischierei una brutta figura in qualche browser

Nel tuo CSS ci sono anche dei selettori inutili, che creano confusione: nel codice HTML non ci sono class="giallo" ne` altri colori, quindi i selettori che contengono .colore non servono (non vengono comunque utilizzati dal browser.

Una volta sistemate queste cose, verifica di avere nuovamente la visualizzazione corretta (nei vari passaggi puo` essere che qualcosa vada fuori squadra, ma se parti dal risultato il codice non verra` mai fatto bene, e le sorprese sono in agguato).

E quindi puoi implementare il rollover.

Supponendo una struttura html del tipo:

 <div id="menu">
  <ul>[*][*][*][*][/list]
</div>

Se vuoi un rollover dello stesso colore per tutti, ti basta aggiungere:
#menu a:hover {
background-image: url(../images/bianco.jpg);
}

Se invece ciascun colore deve avere un rollover diverso:
a#rosso:hover {
background-image: url(../images/rossohover.jpg);
}
ecc.

Nota che se usi background-image, non vedrai il background-color, in quanto l'immagine di sfondo "sta sopra" il colore di sfondo, e quindi il rollover andra` realizzato tramite una nuova immagine.

www.farandagiovanni.net

ho fatto diversamente
ho fatto 4 menu. non come volevo fare 1 menu con 4 sezione che si colorano come queste .
Cosa ne dici di questa struttura ?

[Mich_]

Dal punto di vista semantico era piu` corretto prima.

E anche dal punto di vista del codice: in questa versione hai aumentato molto la complessita` della marcatura ed anche del CSS.

Se poi il rollover e` quello che ho visto ora, partendo dalla versione precedente ti basta aggiungere:
#menu a:hover {
background-image: none;
}
in modo da togliere semplicemente l'immagine di sfondo in tutti i campi quando passi con il mouse.

E in quel caso l'immagine di sfondo puo` essere unica per tutte le barre: ti basta che dove vuoi il colore l'immagine sia trasparente, e vada via via scurendosi. Poi lo sfonod lo fai del colore che vuoi.

In pratica con il codice HTML che avevo proposto sopra il CSS potrebbe diventare del tipo:

#menu {
  width: ...;
  height: ...;
}
#menu ul {
  width: 100%;
  height: 100%;
}
#menu li {
  float: left;
  width: ...;
  margin: ...;
}
#menu a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(sfumatura.png) repeat-x
}
#menu a:hover {
  background-image: none;
}

#rosso {
  background-color: red;
}
#blu {
  background-color: blue;
}
#verde {
  background-color: green;
}
#giallo {
  background-color: yellow;
}

[Innavoig]

Originariamente inviato da Mich_
Dal punto di vista semantico era piu` corretto prima.

E anche dal punto di vista del codice: in questa versione hai aumentato molto la complessita` della marcatura ed anche del CSS.

Se poi il rollover e` quello che ho visto ora, partendo dalla versione precedente ti basta aggiungere:
#menu a:hover {
background-image: none;
}
in modo da togliere semplicemente l'immagine di sfondo in tutti i campi quando passi con il mouse.

E in quel caso l'immagine di sfondo puo` essere unica per tutte le barre: ti basta che dove vuoi il colore l'immagine sia trasparente, e vada via via scurendosi. Poi lo sfonod lo fai del colore che vuoi.

In pratica con il codice HTML che avevo proposto sopra il CSS potrebbe diventare del tipo:

#menu {
  width: ...;
  height: ...;
}
#menu ul {
  width: 100%;
  height: 100%;
}
#menu li {
  float: left;
  width: ...;
  margin: ...;
}
#menu a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(sfumatura.png) repeat-x
}
#menu a:hover {
  background-image: none;
}

#rosso {
  background-color: red;
}
#blu {
  background-color: blue;
}
#verde {
  background-color: green;
}
#giallo {
  background-color: yellow;
}

in pratca presenta 2 problemi ?
come si fa a fare trasparente che mano mano va scurendosi ?

[Mich_]

Originariamente inviato da Innavoig
in pratca presenta 2 problemi ?
come si fa a fare trasparente che mano mano va scurendosi ?

E il secondo problema?

Per come fare un'immagine trasparente, non devi chiedere qui, ma dove c'e` gente che usa la grafica. E poi dipende dal programma che usi tu: in linea di massima i programmi grafici sono in grado di fare immagini trasparenti. Ma i file generati devono essere di tipo png o gif: i primi hanno una buona resa, ma necessitano di un filtro particolare in IE; i secondi sono "universali" (ancorche` proprietari), ma rendono la semitrasparenza tramite retinatura.

Per come applicare i filtri per IE, devi fare una ricerca in questo forum (io no lo ricordo mai).

[Innavoig]

Originariamente inviato da Mich_
E il secondo problema?

Per come fare un'immagine trasparente, non devi chiedere qui, ma dove c'e` gente che usa la grafica. E poi dipende dal programma che usi tu: in linea di massima i programmi grafici sono in grado di fare immagini trasparenti. Ma i file generati devono essere di tipo png o gif: i primi hanno una buona resa, ma necessitano di un filtro particolare in IE; i secondi sono "universali" (ancorche` proprietari), ma rendono la semitrasparenza tramite retinatura.

Per come applicare i filtri per IE, devi fare una ricerca in questo forum (io no lo ricordo mai).

ok.Capito.

Ho dovuto impostare per forza così il codice , perchè , le immagini variano di lunghezza , quindi impostando come tu dicevi ci sarebbe stato un errore .
i 4 tag div hanno un immagine di sfondo ,che sarebbero i rispettivi giallo , verde , blu , rosso.
Queste hanno lunghezza diversa , quindi ho dovuto impostare come background eguale per tutti il colore nero , che sarebbe la sfumatura di colore che si conclude nel basso.
Così facendo i 4 div appaiono uguali di lunghezza, quindi è un problema che ho creato sin dall'inizio , dovevo fare 4 immagini di linghezza uguale.
Così ho rimediato poi in questo modo.
Credo che non sia un problema , o pare da non professionisti ?