Problemi con i div

**ancio** · 28-02-2005, 22:50

Salve a tutti, sto facendo un menù a comparsa e scomparsa classico (quando vado col mouse sopra ogni tasto sotto compaiono le scelte per capirci).Per fare questo mi sono servito di div con position absolute.Finchè il corpo centrale del sito (nel mio caso una tabella) stava allineato a sinistra nessun problema.Poi ho allineato la tabella al centro (la tabella misura width 760) e se cambio risoluzione i div dei menù a comparsa sfasano la posizione a causa probabilmente della position absolute.
Come posso risolvere??

**Mich_** · 01-03-2005, 11:01

Perche` non fai un menu con solo CSS? Ce ne sono diversi nel thread (inrilevo) "link utili" del forum CSS e HTML (sotto HTML).
Comunque anche se risolvi con JS, il problema tuo sono i CSS. Ti sposto.

**ancio** · 02-03-2005, 14:59

Ho provato a guardare dove mi hai detto ma non ho trovato una soluzione.A me interessa soltanto che a qualsiasi risoluzione il div mi spunti sempre nello stesso posto.Mi potresti suggerire il codice (css o anche javascript)?

**Mich_** · 02-03-2005, 15:46

Occorre conoscere qualcosa di piu` della tua pagina.

Ad esempio:
- il div che compare: quando compare? con che evento? chi lo fa comparire?
- la posizione della tabella: come e` fatto il posizionamento?
- la struttura dei vari oggetti che compongono la pagina.

**ancio** · 02-03-2005, 22:00

Ok questo è lo schema tipo se provi a cambiare la risoluzione sfasa tutto.

codice:

<html>

<head>
<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Link1</title>
<script language="javascript">
function apertura(){
livello1.style.visibility = "hidden"
livello2.style.visibility = "hidden"
livello3.style.visibility = "hidden"
}
</script>
</head>

<body onload="apertura()">

<div align="center">
	<table border="1" width="650" cellspacing="1" style="border-collapse: collapse" bordercolor="#0000FF" id="table1">
		<tr>
			<td>
			<p onmouseover="livello1.style.visibility = 'visible'; livello2.style.visibility = 'hidden'; livello3.style.visibility = 'hidden'" align="center"><font face="Verdana" size="2">Link1</font></td>
			<td>
			<p onmouseover="livello1.style.visibility = 'hidden'; livello2.style.visibility = 'visible'; livello3.style.visibility = 'hidden'" align="center"><font face="Verdana" size="2">Link2</font></td>
			<td>
			<p onmouseover="livello1.style.visibility = 'hidden'; livello2.style.visibility = 'hidden'; livello3.style.visibility = 'visible'" align="center"><font face="Verdana" size="2">Link3</font></td>
		</tr>
	</table>
	<div onmouseover="livello1.style.visibility = 'hidden'; livello2.style.visibility = 'hidden'; livello3.style.visibility = 'hidden'" align="center" id="corpo">
	<table border="1" width="650" height="400" cellspacing="1" style="border-collapse: collapse" bordercolor="#0000FF">
		<tr>
			<td></td>
		</tr>
	</table>
	</div>
	<div style="position: absolute; width: 214px; height: 100px; z-index: 1; left: 741px; top: 36px; background-color:#0000FF" id="livello3">
<p align="left" style="margin-top: 0; margin-bottom: 0"><font color="#FFFFFF">7</font></p>
<p align="left" style="margin-top: 0; margin-bottom: 0"><font color="#FFFFFF">8</font></p>
<p align="left" style="margin-top: 0; margin-bottom: 0"><font color="#FFFFFF">9</font></div>
	<div style="position: absolute; width: 216px; height: 100px; z-index: 1; left: 523px; top: 36px; background-color:#0000FF" id="livello2">
<p align="left" style="margin-top: 0; margin-bottom: 0"><font color="#FFFFFF">4</font></p>
<p align="left" style="margin-top: 0; margin-bottom: 0"><font color="#FFFFFF">5</font></p>
<p align="left" style="margin-top: 0; margin-bottom: 0"><font color="#FFFFFF">6</font></div>
</div>

<div style="position: absolute; width: 216px; height: 100px; z-index: 1; left: 306px; top: 36px; background-color:#0000FF" id="livello1">
<p style="margin-top: 0; margin-bottom: 0"><font color="#FFFFFF">1</font></p>
<p style="margin-top: 0; margin-bottom: 0"><font color="#FFFFFF">2</font></p>
<p style="margin-top: 0; margin-bottom: 0"><font color="#FFFFFF">3</font></div>

</body>

</html>

puoi aiutarmi?

**Mich_** · 03-03-2005, 09:36

Usi un linguaggio troppo vecchio, che ho dimenticato (e non mi va di riesumare dalla mente).
Torno a spostarti in Scripting, forse li` c'e` quache "vecchio" che ti puo` dare una mano.

Pero` dovresti passare a una presentazione piu` moderna con CSS (e possibilmente XHTML).

**ancio** · 05-03-2005, 14:19

Mi sta bene anche se mi dici come cambiare il mio codice in modo da utilizzare css e xhtml come mi dici tu.
Puoi farlo?

**Mich_** · 07-03-2005, 11:04

Non e` compito del forum fare delle lezioni: ci sono gia` i tutorial in linea: quelli di HTML.it non sono fatti male.

Discussione: Problemi con i div

Strumenti discussione

Ricerca discussione

Visualizza

Problemi con i div

Permessi di invio