Mettere position absolute a ajax-tooltip?

[guarnieri]

Ciao a tutti, come da titolo volevo chiedervi come si fa a mettere la posizione assoluta al div
che compare quando passo sopra con il mouse?
Questo perche' ho messo questa funzione in un elenco e quando si passa sopra ai record
in fondo si vede solo una piccola parte del div.

Premesso che ho provato a modificare il css e che ho capito che non so niente, posto il codice.

Ciao grazie

/* CSS only needed for the demo */



mainContainer{
	width:630px;
	border-left:1px solid #317082;	
	border-right:1px solid #317082;	
	margin:0 auto;	/* Center align content, equivalent to margin-left:auto;margin-right:auto; */
	text-align:left;	/* Override inherited text-align:center from the body tag */
	background-color:#FFF;
	height:100%;
}

#menuColumn{
	width:160px;
	float:left;
	padding:5px;
	font-size:0.9em;
}
#mainContent{
	width:440px;
	float:left;	
}

.oddRow{
	background-color:#FFF;
}
.evenRow{
	background-color:#EEE;
}

.productTable{
	border:3px double #000;
}
h3{
	margin-top:0px;
}


/* End css for the demo */

/* CSS needed for the script */

#ajax_tooltipObj{
	z-index:1000000;
	text-align:left;
}
#ajax_tooltipObj div{
	position:absolute;
	left:100px;
	top:100px;
}

/* If you don't want the arrow - Just set the width of this div to 1 or something like that and drop the background selectors from the CSS below */

#ajax_tooltipObj .ajax_tooltip_arrow{	/* Left div for the small arrow */
	background-image:url('../images/arrow.gif');
	width:520px;
	position:absolute;
	left:100px;
	top:100px;
	background-repeat:no-repeat;
	background-position:center left;
	z-index:1000005;
	height:160px;
}

#ajax_tooltipObj .ajax_tooltip_content{
	border:2px solid #317082;	/* Border width */
	left:18px;	/* Same as border thickness */
	top:100px;
	position:absolute;
	width:550px;	/* Width of tooltip content */
	height:400px;	/* Height of tooltip content */
	background-color:#FFF;	/* Background color */
	padding:5px;	/* Space between border and content */
	font-size:0.8em;	/* Font size of content */
	overflow:auto;	/* Hide overflow content */
	z-index:1000001;
}

[fcaldera]

1) lo z-index è un valore che varia da -32767 a 32768 ma di fatto i valori negativi non vengono interpretati correttamente da tutti i browser, quindi usa dei valori che vanno da 1 a 32768 ( e non 100000001...)

2) per gestire l'hover con il mouse devi gestire la pseudoclasse :hover (elemento:hover {... }) ma su IE6 "elemento" deve essere per forza un link

3) sul blocco #ajax_tooltipObj: z-index da solo non fa nulla se insieme non specifichi position:relative oppure absolute

4) dal codice che hai postato non è chiaro cosa deve succedere e soprattutto in quale dei blocchi. Un link alla pagina in questione sarebbe utile se non risolvi con queste indicazioni.

[guarnieri]

Allora ho provato a mettere le modifiche che mi hai postato, ma avro' fatto casino continua
a non aprirsi in modo absolute.

Il link lo posto, perfavore non effettuate opzioni tipo calcola costi ecc.., che questi sono dati veri.

Per tornare a noi per la funzione vai sulla i di info per capirci.
aLink

Ciao grazie.

Posto il css

/* CSS only needed for the demo */



mainContainer{
	width:630px;
	border-left:1px solid #317082;	
	border-right:1px solid #317082;	
	margin:0 auto;	/* Center align content, equivalent to margin-left:auto;margin-right:auto; */
	text-align:left;	/* Override inherited text-align:center from the body tag */
	background-color:#FFF;
	height:100%;
}

#menuColumn{
	width:160px;
	float:left;
	padding:5px;
	font-size:0.9em;
}
#mainContent{
	width:440px;
	float:left;	
}

.oddRow{
	background-color:#FFF;
}
.evenRow{
	background-color:#EEE;
}

.productTable{
	border:3px double #000;
}
h3{
	margin-top:0px;
}


/* End css for the demo */

/* CSS needed for the script */

#ajax_tooltipObj{
	z-index:32768;
	position:absolute;
	left:100px;
	top:100px;
	text-align:left;
}
#ajax_tooltipObj div{
	position:absolute;
	left:100px;
	top:100px;
}

/* If you don't want the arrow - Just set the width of this div to 1 or something like that and drop the background selectors from the CSS below */

#ajax_tooltipObj .ajax_tooltip_arrow{	/* Left div for the small arrow */
	background-image:url('../images/arrow.gif');
	width:520px;
	position:absolute;
	left:100px;
	top:100px;
	background-repeat:no-repeat;
	background-position:center left;
	z-index:1000005;
	height:160px;
}

#ajax_tooltipObj .ajax_tooltip_content{
	border:2px solid #317082;	/* Border width */
	left:18px;	/* Same as border thickness */
	top:100px;
	position:absolute;
	width:550px;	/* Width of tooltip content */
	height:400px;	/* Height of tooltip content */
	background-color:#FFF;	/* Background color */
	padding:5px;	/* Space between border and content */
	font-size:0.8em;	/* Font size of content */
	overflow:auto;	/* Hide overflow content */
	z-index:1000001;
}

[fcaldera]

ajax-tooltip.css (line 72)

.ajax_tooltip_content {
background-color:#FFFFFF;
border:2px solid #317082;
font-size:0.8em;
height:400px;
left:18px;
overflow:auto;
padding:5px;
position:absolute;
top: 100px;
width:550px;
z-index:1000001;
}


modifica queste due proprietà (metti top a 0 e lo z-index in base a ciò che ti ho detto nel primo post)

[guarnieri]

Scusa se ti rompo ancora, ma non riesco a fermare la posizione.
Posto il css, sinceramente e' arabo per me non so praticamente niente di CSS.
Ciao e grazie ancora.

#ajax_tooltipObj{
	z-index:100;
	position:absolute;
	left:100px;
	top:0px;
	text-align:left;
}
#ajax_tooltipObj div{
	position:absolute;
	left:100px;
	top:0px;
}

/* If you don't want the arrow - Just set the width of this div to 1 or something like that and drop the background selectors from the CSS below */

#ajax_tooltipObj .ajax_tooltip_arrow{	/* Left div for the small arrow */
	background-image:url('../images/arrow.gif');
	width:520px;
	position:absolute;
	left:100px;
	top:0px;
	background-repeat:no-repeat;
	background-position:center left;
	z-index:100;
	height:160px;
}

#ajax_tooltipObj .ajax_tooltip_content{
	border:2px solid #317082;	/* Border width */
	left:18px;	/* Same as border thickness */
	top:0px;
	position:absolute;
	width:550px;	/* Width of tooltip content */
	height:400px;	/* Height of tooltip content */
	background-color:#FFF;	/* Background color */
	padding:5px;	/* Space between border and content */
	font-size:0.8em;	/* Font size of content */
	overflow:auto;	/* Hide overflow content */
	z-index:100;
}

[guarnieri]

Ho visto che l'unica parte del css che mi interessa e' l'ultima quindi hi tolto le altre e lasciato questa

#ajax_tooltipObj .ajax_tooltip_content{
border:2px solid #317082; /* Border width */
left:18px; /* Same as border thickness */
position:absolute;
top:0px;
width:550px; /* Width of tooltip content */
height:400px; /* Height of tooltip content */
background-color:#FFF; /* Background color */
padding:5px; /* Space between border and content */
font-size:0.8em; /* Font size of content */
overflow:auto; /* Hide overflow content */
z-index:100;
}

che pero' non mi visualizza in posizione fissa il div
Ma non e' che e' impossibile dargli la posizione fissa, cioe' non e' che la posizione fissa che li
assegno e' in base a dove e' messo il link che richiama la funzione?
Perche' se e' cosi' non potro' mai utilizzarlo.

Ciao

[fcaldera]

Penso che quel blocco non rimanga fermo perchè uno dei suoi contenitori "antenati" è a sua volta posizionato (in relative o absolute) mentre in realtà dovrebbero essere in static (ovvero non poszionati)

Non posso esserne certo perchè c'è un notevole annidamento di elementi ed è difficile debuggare l'applicazione anche con firebug

L'unica cosa che posso consigliarti è di mettere il div tooltip direttamente nell'elemento body senza nessun'altro contenitore che lo racchiuda.

[guarnieri]

Se ti dico che non ho capito cosa vuol dire mettere il div tooltip dentro al body mi uccidi?
Scherzi a parte, non ho ben capito cosa intendi dire.

Comunque grazie per lo sbattimento.

[guarnieri]

Dove sono gli "antenati" nei file .js della funzione?

Cosa posso fare per evitare l'annidamento di elementi in modo da facilitarti il compito?
se vuoi lascio solo un po di codice e due righe di sql. Se e' questo che crea casino

[guarnieri]

Ho tolto quasi tutto il codice, prova (se hai ancora voglia) a vedere se adesso riesci a capirci meglio.

Il codice e' veramente scritto male, lo so ma vengo da rpg su as400 e cosi' per adesso non e' il mio obbiettivo primario scrivere bene il sorgente.

Altrimenti un chiudo e un martello e lo fermo io il div