Problema css over su menu principale 
Autore: Gianfranco G.Ciao a tutti,
ho inserito questo codice in "oggetto codice html" "esperto"
a:hover span, div.foglioitalia{
display:block;
width:520px;
height:373px;
position:absolute;
left:380px;
top:10px;
border:0px solid #CCCCCC;
background-color:#fff;
padding:0px;
color:#333333;
font-size:16px;
line-height:18px;
letter-spacing:1px;
text-align:justify;
overflow:hidden;
z-index:20;
}
nella home page su menu principale di wx5 quando mi posiziono su una voce del menu quindi su passaggio del mouse la voce del menu mi si sposta sulla pagina
Ho notato che da fastidio hover su a:hover
se tolgo over tutto è ok ma a me serve. In pratica la uso per una mappa interattiva che quando mi posiziono su una regione mi fa vedere una figura.
E' possibile non dover rinunciare a hover?
Grazie molte.
Un saluto.
...metti un link del sito per vedere ...
Autore
http://www.arsenalschool.it/cancella/
L' ho pubblicato qui sotto. In pratica se ti posizioni su HOME (menu) il tasto si sposta penso di 380px. Se tolgo hover tutto ok.
Hover mi serve per far funzionare quanto segue in pratica se ti posizioni sopra una delle immagini nella home page (non vedi le immagini ma posizionatici lo stesso) vedi che cambia la finestra a destra. Hover mi serve per posizionarmi sopra le immagini che non vedi e far cambiare la finestra di destra a secondo dove ti posizioni.
Qui di seguito anche il codice
HTML:
html>
<head>
<title></title>
</head>
<div class="contenitoreitalia">
<div class="mappaitalia">
<div class="foglioitalia">
<center><b>ITALIA</b></center>
<span>
<em>DESCRIZIONE</em>
</span>
</div>
<div class="coordinate"><img src="italia_22.gif" usemap="#italia_22" alt="" /></div>
<a href="#nogo">
<map name="italia_22">
<area shape="poly" coords="27,113,23,119,27,120,34,119,41,110,51,103,61,99,74,106,82,112,92,116,83,106,78,103,75,100,70,96,63,93,60,97,55,98,47,99,45,98,42,98,41,99,39,106,35,112,28,114,27,113" href="www.xxx.com" target="_SELF">
</map>
<p class="liguria"><img src="liguria_arancione_22.gif" alt="" onmouseout="[removed]this.src='liguria_arancione_22.gif';" onmouseover="[removed]this.src='liguria_rosso_22.gif';" /></p>
<span>
<center><b>LIGURIA</b></center>
<img src="liguria.jpg" alt="" width=auto height=auto>
</span>
</a>
<a href="#nogo">
<map name="italia_22">
<area shape="poly" coords="170,124,165,128,157,124,150,124,150,127,156,127,158,129,157,134,155,134,164,142,169,142,170,149,175,163,183,167,183,171,189,168,198,163,199,161,191,141,188,138,184,133,172,124,170,122" href="www.xxx.com" target="_SELF">
</map>
<p class="marche"><img src="marche_arancione_22.gif" alt="" onmouseout="[removed]this.src='marche_arancione_22.gif';" onmouseover="[removed]this.src='marche_rosso_22.gif';" /></p>
<span>
<center><b>MARCHE</b></center>
<img src="marche.jpg" alt="" width=auto height=auto>
</span>
</a>
</div>
</div>
</body>
</html>
CSS (sotto esperto)
body{
color:white;
}
div.contenitoreitalia{
width:850px;
height:420px;
margin:auto;
}
div.mappaitalia{
width:345px;
height:415px;
position: absolute;
left:50px;
top:10px;
background-color:transparent;
border:0px solid #ffffff;
}
a{
text-decoration:none;
color:#fff;
outline:none;
}
a span{
display:none;
}
a:hover span, div.foglioitalia{
display:block;
width:520px;
height:373px;
position:absolute;
left:380px;
top:10px;
border:0px solid #CCCCCC;
background-color:#fff;
padding:0px;
color:#333333;
font-size:16px;
line-height:18px;
letter-spacing:1px;
text-align:justify;
overflow:hidden;
z-index:20;
}
b{
display:block;
height:30px;
line-height:30px;
margin-bottom:10px;
border-bottom:1px solid #CCCCCC;
}
.aosta{
position: absolute;
left:8px;
top:43px;
}
.piemonte{
position: absolute;
left:0px;
top:21px;
}
.coordinate{
position: absolute;
left:0px;
top:0px;
}
Grazie molte
...intanto correggi il codice ...
ci sono degli head e dei body in esubero e un div che si chiude di troppo ...
...poi a codice corretto vediamo cosa fa ...
...!... è stato incollato il codice di una pagina HTML...!...
... ad occhio e croce, nella parte HTML eliminare i seguenti TAG:
<html>
<head>
<title></title>
***LASCIARE QUI il CODICE TEORICAMENTE VALIDO - ELIMINARE I TAG SEGNALATI SOPRA e SOTTO***
</head>
</body>
</html>
... nella parte CSS eliminare quello del BODY
... vedi il sorgente in Firefox, e vedrai evidenziati gli errori...
.
non ho visto il codice del tuo sito come kolasim e claudio, ma lo spostamento sull'hover ce l'hai nel codice che hai postato sopra:
left:380px;
prova a togliere solo quella riga e forse anche quella sotto...
top:10px;
oltre a correggere quello che ti hanno segnalato...
se non è questo, ignora il mio post...
Autore
Grazie a tutti
ho cercato di fare quanto mi avete detto :
CLAUDIO
ho ricontrollato i <div> mi sembrano giusti
ho tolto head e body
KOLASIM
ho tolto html , head , title body
sotto css ho tolto body
SKEGGIA
se tolgo left6 380 mi si sposta l'immagine che non vedi verso sinistra quelle coordinate mi servono
Ho ripubblicato tutto ma nulla è cambiato!
Oltre a correggere quanto ti hanno già detto gli altri devi modificare, nelle regole CSS, il selettore del tag a, anteponendo la classe del div genitore, altrimenti è troppo generico ed agisce, se altre regole non lo sovrascrivono, su tutti i tag a presenti nella pagina (menu compreso).
Esempio:
... diventerà
.contenitoreitalia a:hover span, div.foglioitalia
Farei la stessa cosa per tutti i selettori generici inseriti nei CSS da te utilizzati.
Autore
Male che va potrei creare un nuovo livello, entrare in proprietà e non fare evidenziare il sottomenu e mettere il link alla pagina che mi interessa all'interno del sito. In effetti se ci fate caso l'unico che non ha problemi nel menu e "istruttori" che non è una "pagina" ma un "livello" nel menu.
Autore
Grazie a tutti davvero soprattutto per le risposte tempestive
il suggerimento di lemonsong ha funzionato! evidentemente il tag a viene utilizzato anche dal menu anteponendo la classe del div genitore è andato tutto a posto.
Grazie LEMONSONG, CLAUDIO D., KOLASIM, SKEGGIA12
div.contenitoreitalia{
width:850px;
height:420px;
margin:auto;
}
div.mappaitalia{
width:345px;
height:415px;
position: absolute;
left:50px;
top:10px;
background-color:transparent;
border:0px solid #ffffff;
}
.contenitoreitalia a{
text-decoration:none;
color:#fff;
outline:none;
}
.contenitoreitalia a span{
display:none;
}
.contenitoreitalia a:hover span, div.foglioitalia{
display:block;
width:520px;
height:373px;
position:absolute;
left:380px;
top:10px;
border:0px solid #CCCCCC;
background-color:#fff;
padding:0px;
color:#333333;
font-size:16px;
line-height:18px;
letter-spacing:1px;
text-align:justify;
overflow:hidden;
z-index:20;
}
b{
display:block;
height:30px;
line-height:30px;
margin-bottom:10px;
border-bottom:1px solid #CCCCCC;
}
.aosta{
position: absolute;
left:8px;
top:43px;
}
.coordinate{
position: absolute;
left:0px;
top:0px;
}
/*fine stile mappa*/