Div che si sovrappongono

Printable View

03-02-2007, 19.44.21

Div che si sovrappongono

http://andrealex.altervista.org/prova/Prova.html

Ho preferito costruire un esempio così mi spiego subito.
Devo fare in modo che le due parti della pagina (quella blu e quella rossa) non si accavallino se lo schermo è troppo piccolo. Da una risoluzione 1024x768 in su va tutto bene, il problema arriva con schermi piccoli. Un'altra cosa: sempre quando ci sono piccole risoluzioni (da 800x600 in giù) la parte blu della pagina esce fuori dallo schermo. Non riesco a capire il motivo dato che ho creato le grandezze con le percentuali e il problema non dovrebbe esserci.
Grazie per l'aiuto. :roll:

Questo è l'HTML del link sopra:

Codice HTML:

<html> <head> <meta http-equiv="Content-Language" content="it"> <title>Prova</title> </head> <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="black"> <div style="position:absolute; top:13%; left:30%;" width="70%" height="148"> <img src="Punto.bmp" width="19" height="19"><img src="Punto.bmp" width="70%" height="19"><img src="Punto.bmp" width="19" height="19"><br> <img src="Punto.bmp" width="19" height="100"><img src="Punto.bmp" width="70%" height="100"><img src="Punto.bmp" width="19" height="100"><br> <img src="Punto.bmp" width="19" height="19"><img src="Punto.bmp" width="70%" height="19"><img src="Punto.bmp" width="19" height="19"> </div> <div style="position:absolute; top:30%; left:30%;" width="70%" height="148"> <img src="Centro.bmp" width="19" height="19"><img src="Centro.bmp" width="70%" height="19"><img src="Centro.bmp" width="19" height="19"><br> <img src="Centro.bmp" width="19" height="400"><img src="Centro.bmp" width="70%" height="400"><img src="Centro.bmp" width="19" height="400"><br> <img src="Centro.bmp" width="19" height="19"><img src="Centro.bmp" width="70%" height="19"><img src="Centro.bmp" width="19" height="19"> </div> </body> </html>
03-02-2007, 20.32.44
silverseraph

prova ad aggiungere clear: both; al div blu
03-02-2007, 21.33.23

Citazione:

Originalmente inviato da silverseraph

prova ad aggiungere clear: both; al div blu

Scusa ma non ho capito dove devo aggiungerlo. Nello style?? Se è lì che deve andare sembra non funzioni.

Codice HTML:

<html> <head> <meta http-equiv="Content-Language" content="it"> <title>Prova</title> </head> <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="black"> <div style="position:absolute; top:13%; left:30%;" width="70%" height="148"> <img src="Punto.bmp" width="19" height="19"><img src="Punto.bmp" width="70%" height="19"><img src="Punto.bmp" width="19" height="19"><br> <img src="Punto.bmp" width="19" height="100"><img src="Punto.bmp" width="70%" height="100"><img src="Punto.bmp" width="19" height="100"><br> <img src="Punto.bmp" width="19" height="19"><img src="Punto.bmp" width="70%" height="19"><img src="Punto.bmp" width="19" height="19"> </div> <div style="position:absolute; top:30%; left:30%; clear:both;" width="70%" height="148"> <img src="Centro.bmp" width="19" height="19"><img src="Centro.bmp" width="70%" height="19"><img src="Centro.bmp" width="19" height="19"><br> <img src="Centro.bmp" width="19" height="400"><img src="Centro.bmp" width="70%" height="400"><img src="Centro.bmp" width="19" height="400"><br> <img src="Centro.bmp" width="19" height="19"><img src="Centro.bmp" width="70%" height="19"><img src="Centro.bmp" width="19" height="19"> </div> </body> </html>
03-02-2007, 23.11.04
heracleum

Dunque il "clear" si usa quando ci sono elementi fluttuanti (float) e qui non ce ne sono quindi, lasciamolo da parte per ora perché non è il tuo caso.

Per il resto, ti stupisci del fatto che non si adattino «dato che ho creato le grandezze con le percentuali e il problema non dovrebbe esserci»... ma io tutte queste dimensioni percentuali non le vedo. Anzi, la maggior parte delle dimensioni è in pixel, soprattutto le height quindi è normale che rimangano "rigide".
04-02-2007, 23.07.42

Ok, ti spiego. La modifica dell'altezza l'ho fatta di sera e subito dopo ho spento. Quindi mi ero dimenticato di averla fatta. Errore mio :roll: . Ma c'era un motivo per cui l'avevo modificato.
Ora ho messo le percentuali ma la parte blu diventa piccola. Sembra quasi che la sua altezza dipenda dal rettangolo rosso, cioè l'altezza del rettangolo rosso sia il 40% (messo come percentuale casuale solo per testare), anche se guardando la parte blu si vede subito che non è il 40% in altezza ma di meno. :|
Ti dico subito che il rettangolo rosso non deve cambiare l'altezza.
Le altezze che vedi di 19 pixel devono restare così perchè sono i bordi dei due rettangoli.
Spero riescirete a risolvere.

Codice HTML:

<html> <head> <meta http-equiv="Content-Language" content="it"> <title>Prova</title> </head> <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="black"> <div style="position:absolute; top:13%; left:30%;" width="70%" height="100"> <img src="Punto.bmp" width="19" height="19"><img src="Punto.bmp" width="70%" height="19"><img src="Punto.bmp" width="19" height="19"><br> <img src="Punto.bmp" width="19" height="100"><img src="Punto.bmp" width="70%" height="100"><img src="Punto.bmp" width="19" height="100"><br> <img src="Punto.bmp" width="19" height="19"><img src="Punto.bmp" width="70%" height="19"><img src="Punto.bmp" width="19" height="19"> </div> <div style="position:absolute; top:30%; left:30%;" width="70%"> <img src="Centro.bmp" width="19" height="19"><img src="Centro.bmp" width="70%" height="19"><img src="Centro.bmp" width="19" height="19"><br> <img src="Centro.bmp" width="19" height="40%"><img src="Centro.bmp" width="70%" height="40%"><img src="Centro.bmp" width="19" height="40%"><br> <img src="Centro.bmp" width="19" height="19"><img src="Centro.bmp" width="70%" height="19"><img src="Centro.bmp" width="19" height="19"> </div> </body> </html>

Grazie :=):
05-02-2007, 15.21.00
silverseraph

Il fatto che si sovrappongono secondo me è dovuto dalla posizione assoluta. Vedo ad esempio che nel primo div imposti top:13%; e al secondo top:30%; ora è ovvio che se vai a diminuire la grandezza della finestra il blu si sovrapponerà al rosso: sarà nella posizione in cui è distante del 30% dal top. E' tutta una questione di proporzione. Secondo me dovresti dargli delle misure fisse, in pixel.