[magis]

Ciao!
Ho creato un semplicissimo menu con rollover come da immagine allegata...

Sintassi: html [ Scarica ] [ Nascondi ]

Sintassi: html [ Scarica ] [ Mostra ]

1. <ul class="menuita" style="margin:50px 0px 0px 0px; padding:0px 0px 0px 0px">
2. <li id="attivo"><a href="chi-siamo.asp">chi siamo</a></li>
3. <li><a href="filosofia.asp">filosofia</a></li>
4. <li><a href="menu.asp">menu</a></li>
5. <li><a href="carta-dei-vini.asp">carta dei vini</a></li>
6. <li><a href="dove-siamo.asp">dove siamo</a></li>
7. <li><a href="prenota.asp">prenota</a></li>
8. </ul>
9.  

Sintassi: css [ Scarica ] [ Nascondi ]

Sintassi: css [ Scarica ] [ Mostra ]

1. .menuita li {
2. list-style-type: none;
3. padding:0px 0px 0px 0px;
4. margin:0px 0px 0px 0px;
5. font-family: 'HelveticaNeueLTStdMedBold', sans-serif;
6. text-align:left;
7. font-size: 50px;
8. font-weight:bold;
9. line-height: 20px;
10. color:#c0c0c0;
11. }
12.  
13. .menuita li a, .menuita li a:visited {
14. padding:0px 0px 0px 20px;
15. margin:0px 0px 0px 0px;
16. text-decoration:none;
17. color:#c0c0c0;
18. }
19.  
20. .menuita li a:hover {
21. text-decoration:none;
22. color:#c0c0c0;
23. background:url(quadratino-marrone-menu.gif) 0px 28px no-repeat;
24. }
25.  
26. .menuita #attivo a {
27. text-decoration:none;
28. color:#9a6148;
29. background:url(quadratino-marrone-menu.gif) 0px 28px no-repeat;
30. }
31.  

funziona perfettamente tranne un piccolo particolare: come potete notare ovviamente la scritta marrone "chi siamo" si trova sotto quella in grigio "filosofia"... come posso fare in modo che sia posizionato al di sopra?

pensavo che si potrebbe risolvere inserendo nell'html le voci del menu al contrario (ex: da prenota a chi siamo) e fare in modo che il css lo legga nel modo corretto... ma non so bene come fare... ho pensavo una ca***ta? voi come la risolvereste?

grazie
francesco

[Alexain]

aggiungi all'id "attivo" per chi-siamo.asp l'attributo z-index:1 nel css e dovresti risolvere.

[magis]

aggiungi all'id "attivo" per chi-siamo.asp l'attributo z-index:1 nel css e dovresti risolvere.

l'avevo già provato ma non funziona...

[Alexain]

Prova a rifarlo senza utilizzare le liste, ed inserendo sempre lo z-index.

[nando]

lo z-index utilizzato in questo modo non è corretto, per avere effetto, l'elemento a cui si applica deve essere posizionato con posizionamento diverso da quello standard che per impsotazione predefinita è static.

Ma piuttosto non sarebbe meglio spaziare un po' di più le voci del menù che in questo modo (tutte appiccicate l'una all'altra) affaticano la lettura oltre che non essere il massimo dal punto di vista estetico?

[magis]

la grafica non è fatta da me... e il cliente l'ha approvato prima che potessi fare anche io quell'osservazione...
il fatto è che sto sclerando anche cercando di farla con gli sprite...

[magis]

Prova a rifarlo senza utilizzare le liste, ed inserendo sempre lo z-index.

e come lo rifaccio senza liste?

[magis]

sono riuscito a farlo senza liste... ma non cambia anche inserendo z-index...
devo riuscire almeno a farlo con gli sprite... è possibile secondo voi o sto impazzendo per niente?

[nando]

il problema non è nell'utilizzo della lista che invece trovo corretta, ma nell'uso scorretto dello z-index. Ti rimando alla lettura di questo articolo per approfondire l'utilizzo di questa proprietà.

[magis]

grazie nando... è stato più semplice del previsto... la frenesia di ieri mi impediva di pensare...

ciao ciao
francesco