[HTML-CSS]posizionamento <area/>

[tex_willer87]

Ciao a tutti! volevo mostrarvi il mio problema.
Sto facendo un sito internet ed ho bisogno di questo effetto che ora vi spiego.
Ho un div centrale comune a tutte le pagine, all'interno di questo ho un div diverso per ogni pagina perchè deve contenere cose di dimensioni e caratteri differenti, all'interno di uno specifico(lo chiamo qui unità, quindi center_unita) ho una mappa in <img src=... /> e tanti piccoli div che stanno ad indicare dei piccoli sottomenù che compariranno con effetto javascript al click di una specifica area della mappa (per questo ho usato il comando <map name=="" ...></map>
Ora, per far comparire nella posizione esatta(quindi sotto il bottone esatto) i miei piccoli submenù ho modificato il css dei relativi submenù e dato position:absolute e top:xyz px e left:xyz px. Il mio problema sta nella diversa visualizzazione in stessi browser ma in so diversi. Praticamente su w7 tutti i browser mi visualizzano perfettamente il tutto, mentre su vista con gli stessi, aggiornati alla stessa versione, mi visualizzano i submenù fuori dalla pagina, o comunque non dove vorrei io.. Sto sbagliando qualcosa? E' sbagliato il comando position:absolute?
Grazie a tutti!
Ciao.

[MaxArt]

Devi capire che stai cercando di spiegare un problema grafico unicamente a parole... :nono:
Posta un paio di screenshot, i fogli di stile relativi (magari limitati alla parte che ci interessa) e lo "scheletro" della struttura HTML.

Per caso in Windows Vista sta usando IE8 in visualizzazione compatibilità mentre in Windows 7 usi la modalità IE8?

[tex_willer87]

hai ragione... ora posto il codice solamente per il primo piccolo submenù(gli altri sono uguale).

questo è l'html:

<div class="center">
<div class="center_unita">
<p>Scegli dove visitare cliccando sui nomi nell'immagine e scegli poi il piano</p>
<img src="admin/progetti/CorteBolla/it/immagine_copertura.jpg" border="0" usemap="#mappa" width="568px" height="380px" />
<map name="mappa" id="mappa">
<area id="villa" shape="rect" coords="64,40,117,65" href="#" alt="Villa" />
<div id="submenuvilla">
<ul>
<li><a href="villaterra.html"><b>Piano Terra</b></a></li>
<li><a href="villaprimo.html"><b>Piano Primo</b></a></li>
<li><a href="villasecondo.html"><b>Piano Secondo</b></a></li>
</ul>
</div><!-- chiuso subMenuvilla -->
<area id="uffici" shape="rect" coords="151,33,214,59" href="#" alt="Uffici" />
<div id="submenuuffici">
<ul>
<li><a href="ufficiterra.html"><b>Piano Terra</b></a></li>
</ul>
</div><!-- chiuso subMenuuffici -->
</map>
</div> <!-- chiuso center_unita -->
</div> <!-- chiuso center -->


questo è il css solamente della parte villa:

#submenuvilla{
text-decoration:none;
text-align:left;
width:100px;
margin-top:0;
padding:0;
}
#submenuvilla ul{
text-decoration:none;
list-style:none;
text-align:center;
background-color:#666666;
position:absolute;
left:360px;
top:260px;
}
#submenuvilla li a{
text-decoration:none;
color:#CCCCCC;
}
#submenuvilla li a:hover{
text-decoration:none;
color:#FF0033;
}

questo è lo screenshot di come lo visualizzo in windows7 con qualsiasi browser(in questo caso ho usato chrome):
http://img202.imageshack.us/img202/1076/menuwindows7.th.png (http://img202.imageshack.us/i/menuwindows7.png/)

Uploaded with ImageShack.us (http://imageshack.us)

e questo di come lo visualizzo in windows vista( in questo caso ho usato FF):
http://img229.imageshack.us/img229/2644/menuwindowsvista.th.png (http://img229.imageshack.us/i/menuwindowsvista.png/)

[MaxArt]

Allora, innanzitutto ti consiglio di muovere i div submenuvilla e submenuuffici fuori dall'elemento <map>, che dovrebbe contenere *solo* gli elementi <area> (e forse da questo dipende il differente comportamento dei browser, anche se mi sorprende che dipenda dal SO e non dal browser... hai provato anche con IE?).

In secondo luogo, l'attributo di stile position: absolute fa sì che l'elemento sia posizionato (con top, left, bottom o right) relativamente all'elemento "avo" che a sua volta ha un attributo di stile position DIVERSO da quello di default "static" (quindi, "relative", "absolute" o "fixed").
Insomma, se i div submenuville e submenuuffici non hanno definito un position, gli <ul> verranno posizionati relativamente al div con classe center_unita, oppure center, oppure al <body> stesso se nessuno ha un attributo position diverso da "static".
Il trucco è quello di usare "relative" se non si vuole modificare la posizione dell'elemento contenitore.

P.S.: per i pezzi di codice HTML usa il tag [HTML], che trovi con questo simbolo: http://www.hwupgrade.it/forum/images_hwu/editor/html.gif. Per i fogli di stile usa il tag [CODE] http://www.hwupgrade.it/forum/images_hwu/editor/code.gif, per il PHP/JavaScript/C/Java e tutti i linguaggi C-like usa [PHP] http://www.hwupgrade.it/forum/images_hwu/editor/php.gif, mentre per gli altri sempre [CODE].

[tex_willer87]

grazie mille!!! il tuo secondo consiglio ha risolto tutto... :)