Ciao a tutti..

come faccio a creare una pagina totalmente adattabile a qualsiasi tipo di risoluzione?
la pagina che ho creato di cui riporto il link e il suo relativo css è composta da questi pochi elementi..Naturalmente ho lavorato con risoluzione 1024x768 ma se visualizzo la stessa con risoluzioni maggiori per esempio su di un portatile il tutto appare spostato verso sinistra..come posso indicare una posizione centrata per tutti gli elementi?

grazie in anticipo

pagina http://hyperion.altervista.org/N.Ass...one/Index.html

codice css


Codice PHP:






#box

{


position : absolute;
z-index: 10;
left: 300px;
top: 100px;
width: 325px;
height: 325px;
border-bottom: 2px outset ;
border-color: #AECDFF;



background-image: url(Immagini/cupola.jpg) ;
background-repeat: no-repeat;

}


#box2

{


position : absolute;
z-index: 20;
left: 200px;
top: 100px;
width: 150px;
height: 50px;


border-style: none;




}



#box3

{


position : absolute;
z-index: 20;
left: 550px;
top: 120px;
width: 150px;
height: 50px;


font-family: arial;
font-color: gray;
font-size: 18;



}




.citazione

{


position : absolute;
z-index: 20;
left: 570px;
top: 350px;
width: 150px;
height: 50px;


filter:alpha(opacity=50); 
opacity: 0.5;
-moz-opacity:0.5;



font-family: cursive,serif;
color: silver;
font-size: 12px;
font-weight: bold;



}



.citazioneON

{


position : absolute;
z-index: 20;
left: 570px;
top: 350px;
width: 150px;
height: 50px;


filter:alpha(opacity=130); 
opacity: 1.3;
-moz-opacity:1.3;



font-family: cursive,serif;
color: silver;
font-size: 12px;
font-weight: bold;



}





.citazione2

{


position : absolute;
z-index: 20;
left: 570px;
top: 280px;
width: 150px;
height: 50px;



filter:alpha(opacity=50); 
opacity: 0.5;
-moz-opacity:0.5;



font-family: cursive,serif;
color: silver;
font-size: 12px;
font-weight: bold;



}


.citazione2ON

{


position : absolute;
z-index: 20;
left: 550px;
top: 280px;
width: 150px;
height: 50px;


filter:alpha(opacity=130); 
opacity: 1.3;
-moz-opacity:1.3;



font-family: cursive,serif;
color: silver;
font-size: 12px;
font-weight: bold;



}



.entra

{


position : absolute;
z-index: 20;
left: 400px;
top: 450px;
width: 150px;
height: 50px;


filter:alpha(opacity=130); 
opacity: 1.3;
-moz-opacity:1.3;



font-family: serif;
color: silver;
font-size: 18px;
font-weight: bold;



}