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?
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?
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>
