mercoledì, agosto 08, 2007

Esempio di come centrare un DIV nella pagina

* Testato su IE6, Firefox 2.0.0.6 e Opera 9.2.
Mettiamo che dobbiate centrare un contenitore nella vostra pagina, anche questo richiede un hack, che vado a illustrarvi. In pratica per IE si posiziona il DIV a metà pagina e poi gli si danno dei margini negativi pari alla metà della dimensione. Notare che le proprietà per IE sono aggiunte a quelle "generali" non le sovrascrivono in toto (vedi position e border).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#centeredbox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 320px;
height: 240px;
margin: auto;
border: 1px solid red;
}
-->
</style>

<!--[if IE]>
<style type="text/css">
#centeredbox {
top: 50%;
left: 50%;
margin-left: -160px;
margin-top: -120px;
}
</style>
<![endif]-->

</head>

<body>

<div id="centeredbox">Ciao</div>

</body>
</html>

6 commenti:

  1. se la risoluzione dello schermo è più bassa di quella specificata nei margin, il div e tutto il relativo contenuto va fuori dallo schermo, risultato: sito illeggibile

    RispondiElimina
  2. Scusa ma dove viene specificata la risoluzione dello schermo nell'esempio sopra?

    RispondiElimina
  3. Ah, adesso ho capito, te sei uno di quei cretinetti che si infila la forchetta nell'occhio quando mangia quindi il problema è che cerchi di centrare un DIV più grande della risoluzione del monitor. E grazie tante che non funziona.
    Probabilmente se esistesse ancora la naja alla visita ti facessero fare il gioco "infila i solidi nel buco giusto" saresti riformato.

    RispondiElimina
  4. Avevo appena trovato una soluzione a questo problema su un altro sito ma questa mi sembra molto più semplice ed efficace.
    Ti ringrazio!

    RispondiElimina