Evitare sovrapposizione di 2 div, uno centrato l'altro in alto

[AltF4]

Ciao a tutti, sto provando a realizzare una pagina che abbia al centro assoluto un div (contenente una tabella) di dimensioni 700x500 px ed ho impostato in questo modo lo stile CSS:

	width:700px; 
	height:500px; 
	position:absolute;
	top:50%;
	left:50%;  
	margin:-250px 0 0 -350px;

Inoltre ho inserito un div che dovrà contenere il menu e che è posizionato sempre in alto alla pagina e l'ho impostato così:

	width: 100%; 
	height: 100px; 
	position: absolute;
	top: 0;
	left: 0;  
	margin: 0 0 0 0px;

Sembrerebbe funzionare il tutto, ma se cambio risoluzione al monitor, oppure rimpicciolisco la finestra, i 2 div si sovrappongono.

Come posso risolvere?

Grazie mille!

[MrMarco]

innanzitutto, il posizionamento assoluto di un elemnto di blocco provoca uno spostamento di quello stesso elemento, come ben sai, spostamento che è relativo al primo elemento progenitore posizionato a sua volta in modo assoluto. nel tuo caso il div è figlio del body ma il body non è posizionato in modo asoluto. in questo caso quindi il posizionamento/spostamento assoluto sarà in riferimento alla pagina HTML.
io quindi ti consiglio innanzitutto di stabilire larghezza e altezza per il body e margin (0 auto). quindi inserisci il primo div, altezza 100px, larghezza 100% (quindi occuperà la stessa larghezza del body), quindi questo div starà in alto e nessuno lo disturberà. il secondo div lo posizionerai in relative: potrai usare valori in pixel, quindi ti regolerai tu a seconda della grandezza che attribuirai al body e al div superiore per far si che non si accavallino, oppure in percentuali (valori in percentuali calcolati rispetto all'elemento apdre che è il body)

ciao!

[ifts2004]

ciao, scusa una domanda

perchè hai messo??

margin:-250px 0 0 -350px; 

[AltF4]

ciao, scusa una domanda
perchè hai messo??

margin:-250px 0 0 -350px;

Avevo letto da qualche parte che in questo modo quel div potesse risultare sempre centrato all'interno della pagina, ti risulta un errore? E' grave? Come fare in alternativa?

[AltF4]

Originariamente inviato da MrMarco
ti consiglio innanzitutto di stabilire larghezza e altezza per il body e margin (0 auto). quindi inserisci il primo div, altezza 100px, larghezza 100% (quindi occuperà la stessa larghezza del body), quindi questo div starà in alto e nessuno lo disturberà.

Fatto in questo modo e funziona senza problemi!

Originariamente inviato da MrMarco
il secondo div lo posizionerai in relative: potrai usare valori in pixel, quindi ti regolerai tu a seconda della grandezza che attribuirai al body e al div superiore per far si che non si accavallino, oppure in percentuali (valori in percentuali calcolati rispetto all'elemento apdre che è il body)

Ho fatto così:

	width:700px; 
	height:500px; 
	position:relative;

ma non riesco a capire come centrare il secondo DIV.

Dovrei inserirlo al centro della pagina e dovrebbe rimanere lì su tutti i monitor, a qualsiasi risoluzione e non accavallarsi con il DIV superiore.