menų in primo piano sulle slide

[roberto_]

buon giorno, č parecchio tempo che non facevo niente con joomla, ed ora ho dovuto inserire al volo degli articoli in un sito, solo che non mi ricordo (o non l'ho mai saputo) come si imposta sempre in primo piano un menų a tendina, mi spiego meglio, sul sito http://www.uniagrariacolleditora.it/azienda-faunistico-venatoria.html
ci sono delle slide a sx, se vado sul menų a tendina "azienda faunistico venatoria" le ultime voci mi vanno a finire sotto le slide e non si leggono, credo che dovrei o metter ein primo piano il menų o mettere in secondo piano le slide... come funziona?

grazie

[giovi]

ciao roberto, la direttiva css che imposta il piano su cui visualizzare un elemento č z-index. Uno s-index pių alto corrisponde ad un elemento pių in primo piano, viceversa uno z-index basso vuol dire che un elemento si trova in secondo piano rispetto ad un altro. Non tutti i browser considerano gli z-index negativi.

[roberto_]

ciao giovi, quindi dovrei trovare lo z-index del menų e provare ad alzarlo un po' ?
 

[giovi]

esatto. Se lo z-index non č stato ancora dichiarato tramite css puoi farlo tu creando una nuova dichiarazione nel file css/template.css del tuo template

[roberto_]

sai dirmi se č uno di questi due? non ne trovo altri nel template.css

Codice: [Seleziona]

#topnav{ height: 54px; width:980px; margin: 0px; padding:0px; font-weight: bold; }
#topnav ul { margin: 0px 0px 0px 11px; padding: 0; width: auto; float: left; list-style-type:none; }
#topnav ul li{ margin: 0; padding: 0; height: 54px; float: left; position: relative; }
#topnav ul li a{ color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 14px 10px 0px 10px; height:40px; display: block; float: left; }
#topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; }
#topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; }
#topnav ul li li { width:auto; height: 35px; }
#topnav ul li li a { color: #000000; text-transform: none; display: block; background: none; width: 277px; border-top: 1px solid #DDDDDD; border-left: 0px; padding: 9px 10px 6px 10px; height:20px; }
#topnav ul li li a:hover{ background: none; background-color: #333333; left: 0; width: 277px; padding: 9px 10px 6px 10px; height:20px; border-top: 1px solid #DDDDDD; }
#topnav ul li ul { left: -999em; top: 54px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; }
#topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; }
#topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; }e se si di quanto lo devo aumentare?
 

[giovi]

prova a portare lo z-index di #topnav a 99999 (devi scrivere tra le graffe del primo #topnav questo codice: z-index:99999; )

[roberto_]

ho fatto questa modifica

Codice: [Seleziona]

div#top_menu{
 height:54px;
 margin:0px auto;
 width: 980px;
}
#topnav{ height: 54px; width:980px; margin: 0px; padding:0px; font-weight: bold; z-index:99999; }
ma non č cambiato nulla, se puō esserti utile il template č Nome: themza_j15_59                   Descrizione: Eco Farming       

[giovi]

sembra che prima che l'animazione cominci il menu funzioni, ma dopo che jquery (o quello che č) comincia a far cambiare il livello delle foto tutte le altre regole vengono ignorate. Puoi provare ad aggiungere qualche altro 9 allo z-index (puoi aggiungerne all'infinito) ma forse l'ideale - nel tuo caso - sarebbe ridurre un po il menu: pensa anche a chi sta visitando il sito da una risoluzione inferiore o anche da un tablet!

[roberto_]

ok grazie