Div: px o % ?

Ceck2

Nuovo Utente
8 Ott 2012
6
0
0
Ciao a tutti, attualmente sto costruendo (se questo è il termine giusto) una pagina web, sono ancora all'inizio ed il codice che vi riporto è semplificato al massimo togliendo le cose che non interessano al momento.
Per stabilire la posizione dei DIV ho scelto di utilizzare top e left e di esprimere le "misure" in px.
All'inizio ero molto contento del risultato poichè nel mio pc, riempiva tutto lo schermo e i DIV si trovavano nelle posizioni che mi aspettavo, ma poi, trasferendo i file nel computer della scuola e riaprendo le pagine mi sono accorto che le "misure" in px non andavano bene perchè su uno schermo con risoluzione maggiore le "misure" top e left non andavano bene perchè non avevo i div centrati ma spostati a sinistra :incazz:
A quel punto ho pensato bene di sostituire le "misure" in px con dati in %, risultato eccellente, la pagina si apriva correttamente su ogni risoluzione, MA quando ho provato a ridimensionare la finestra è sorto un altro problema, ovvero, più rimpicciolivo la finestra e più un div mi andava sopra l'altro, come avvine su questo sito http://www.dalcero.it/

Come posso fare per risolvere questo problema? :cool:
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Sito</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #container {
                position: absolute;
                width: 1400px;
                height: 1200px;
            }
            #header {
                position:absolute;
                left: 250px;
                top: 30px;
                width: 800px;
                height: 80px;
                border: 2px solid black;
            }
            #menu {
                position: absolute;
                left: 250px;
                top: 130px;              
                width: 800px;
                height: 100px;
                background-color:#631723;
                border: 2px solid black;
            }
            #content {
                position: absolute;
                left: 250px;
                top: 250px;
                width: 620px;
                height: 800px;
                background-color:#890054;
                border: 2px solid black;
            }
            #pubblicita {
                position:absolute;
                left: 900px;
                top: 250px;
                width: 150px;
                height: 800px;
                background-color:springgreen;
                border: 2px solid black;                
            }
	    #footer {
		position:absolute;
		left:250px;
		top:1080px;
		width:800px;
		height:100px;
		background-color:#332907;
		border: 2px solid black;
	    }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
            </div>
            <div id="menu">
                <ul>
                    <li>Pagina 1</li>
                    <li>Pagina 2</li>
                    <li>Pagina 3</li>
                </ul>
            </div>            
            <div id="content">
                Contenuto della Home
            </div>
            <div id="pubblicita">
                Ipotetico spazio per pubblicità
            </div>
	    <div id="footer">
		<font color="white"> Footer </font>
	    </div>
        </div>
    </body>
</html>
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
ti do l'indicazione per il div header

HTML:
            #header {
                margin-left: 250px;
                margin-top: 30px;
                width: 800px;
                height: 80px;
                border: 2px solid black;
            }
dovrebbe rimanere centrato sul container indipendentemente dalla risuluzione. poi eventualmente al contauner dagli
margin-left: auto;
margin-right: auto;