Purtroppo il posizionamento assoluto che stai usando non è una buona idea per l'intero layout con riferimento al bordo dello schermo... dando una distanza fissa sarà difficile che tu riesca a centrare i box in tutti i monitor. Pensa ad un monitor 16:9, la distanza tra il lato sinistro ed il centro dello schermo è diversa che in un 4:3 . Quindi centrare così con layout assoluto non è possibile senza l'utilizzo dei Javascript.
E' per questi motivi che sarebbe buona norma lasciare al browser il compito di centrare i tuoi box, e ridurre l'assoluto a pochi elementi necessari.
Tuttavia nel tuo caso, se non vuoi dover rifare il sito da capo, quello che ti consiglio è di "forzare la dimensione dello schermo". Ovviamente non mi riferisco al monitor, ma al riferimento del posizionamento assoluto.
1. racchiudi l'intero body in un div
2. rendi il div il nuovo riferimento delle coordinate
3. centra dinamicamente il div nello schermo
4. adatta le coordinate assolute dei blocchi interni
in questo modo non usi più l'angolo del monitor come riferimento (che si sposta al cambiare della risoluzione) ma l'angolo del div che tu deciderai di larghezza fissa, così la posizione dei blocchi assoluti sarà sempre relativa al div che li contiene. Ora centrando il div, l'intero sito viene centrato.
Piccolo esempio pratico:
codice:
<html>
<head>
...
</head>
<body>
<div id="container">
</div>
</body>
</html>
e il css
codice:
body{
text-align: center; /* per centrare in IE7 */
}
#container{
width: 400px;
height: 500px; /* queste dimensioni le cambi in modo da contenere perfettamente i blocchi */
position: relative; /* usa il div come riferimento per i blocchi assoluti */
margin: auto; /* centraggio automatico del div (e quindi dei blocchi assoluti) */
}
/* tutti i left e top dei blocchi assoluti vanno modificati in modo da avere come riferimento l'angolo in alto a sinistra *del div* e non più dello schermo, puoi aiutarti con un border: 1px solid black; nel div per regolarti meglio */
HTH
ciauz
Rispondi quotando
).