Ottenere coordinate di un elemento in una pagina per posizionamento assoluto

[Luca_pluatrco]

Ciao,

ho una struttura HTML di questo tipo per un drop down menu:

<ul>
   <li onMouseOver=javascript:myFunz()>
        [img]...[/img]
       <div>             
              .....        
         
        </div>
   [/list]

Vorrei che quando il mouse è sopra l'immagine del menu, il relativo sub-menu venisse posizionato in quel punto.

Ho già definito il file CSS, per cui quello che mi servirebbe è essere in grado di accedere al <div> interno e impostare per tale elemento una posizione (stesse coordinate X, Y) rilevate dall' OnMouseOver.

Sapreste postarmi due righe di codice per ottenere ciò?
Grazie

[fcaldera]

javascript non serve necessariamente, basta un po' di rudimenti di css

se imposti position: relative all'elemento[*] e position: absolute al <div>, automaticamente quest'ultimo prenderà come coordinate (0, 0) il punto (0, 0) dell'[*]
Quindi puoi distanziare il div con top e left

[Luca_pluatrco]

Ciao fcaldera,

grazie per il suggerimento ma con puro CSS non funziona (attualmente il mio codice è esattemente come dici tu e solo CSS). Il menu pero' si trova all'interno di un altro <div> che ha overflow-y:hidden. Per tale motivo puo' quindi capitare che il menu vanga utilizzato in fondo a tale div e quindi la porzione che si espande viene "nascosta" dal div padre (questo solo in FF, mentr ein IE è ok).

Dopo vari tentativi con solo CSS, per risolvere tale problema, questa mi sembra l'unica soluzione, anche se sarei stato molto più felice di usare solo CSS.

[fcaldera]

io mi riferivo all'uso di CSS solamente per determinare il posizionamento iniziale del div,
però passare ad un meccanismo css-pure potrebbe non essere immediato.

Dipende da come hai sviluppato il tuo codice (che non conosciamo) e dalle funzionalità che devi ottenere

[Luca_pluatrco]

Ecco il codice che uso:

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




/* remove all list stylings */
.menu ul, .menu ul ul {
	margin: 0;
	padding: 0 3px 0 0;
	border: 0;
	list-style-type: none;
	display: block;
}

/* move all list items into one row, by floating them */
.menu ul li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: right;
}
 

/* define new starting point for the nested UL, thus making positioning it a piece of cake */
.menu ul li:hover {
	position: relative;
}


.menu li li 
{
	width: 98%;  
	padding:1px 0;	
	margin:0;
	text-align:left;		
	display:block;
}


/*QUI DEVO SETTARE LE NUOVE COORDINATE*/
.menu ul li div{
	top: 0;
	right: 0;
}

/* initialy hide all sub menus */
.menu ul li div {
	visibility: hidden;
	position: absolute;
	z-index: 10;
}

/* display them on hover */
.menu li:hover>div {
	visibility: visible;
}

/* -- float.clear -- force containment of floated LIs inside of UL */
.menu ul:after, .menu ul ul:after, menu ul li:after, .menu li li:after {
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
	
.menu div {
	background-image: url(empty.gif);	
	padding: 10px 0px 10px 10px;		
	margin: 10px 0px 0 0;				
}

.menu ul ul 
{
	padding: 0; 
	border:1px solid Silver;
	background-color: #FFFFFF;
	overflow:hidden !important;  /*To hide the overflowing divisor line*/
	z-index: 20;
}



.menu ul li a, .menu ul li a:hover 
{ 
	margin-left:4px; 
	display:inline;
}


.menu ul ul a, .menu ul ul a:hover  {
	text-decoration: none;	
	margin:0;
	display:block;  	
}

Come ho già detto il menu drop down funziona bene e viene posizionato bene rispetto al[*] padre.
Il problema sorge in FF quando il menu si trova in prossimità del bordo inferiore del container, in quanto pur settanto z-index, il submenu non si sovrappone al container padre.

per tale motivo pensavo di ricorrere a JavaScript per posizinare in modo assoluto il submenu. Spero sia un pò più chiaro ora il quadro.

Grazie