Topic: help!!: DIV centrati a prescindere dalla risoluzione.

[Tanathos]

Ho la necessità di centrare un layer contenente una immagine (o una tabella) sempre al centro della pagina, a prescindere dalla risoluzione che viene utilizzata dall'utente. Quindi, che sia 800x600, 1024x768 o superiori, la mia immagine risulta essere sempre perfettamente al centro della pagina. Questo mi viene senza problemi utilizzando Internet Explorer, tuttavia, testando la stessa pagina con Mozilla, succede che l'immagine venga posizionata in basso a destra della pagina, con creazione di scroll bar alquanto fastidiose.

Aggiungo un esempio a quanto sto dicendo. Provate ad aprire il seguente link con internet explorer e successivamente con Mozilla. Vi renderete conto della differenza.


http://www.rebirthonline.com/test.html


Il codice da me inserito nel foglio di stile (css) è il seguente.

Codice: [Seleziona]

<style type="text/css">
body {
margin: 0px;
height: 100%;
}
div.LayerCentrato {
text-align: Center;
color: #192939;
position: absolute;
top: 50%;
font-size: 12px;
font-family: Verdana;
font-weight: normal;
width: 650px;
height: 490px;
border: Solid 1px #CCCCCC;
margin: -240px, -320px;
overflow: auto;
z-index: auto;
left: 50%;




}
</style>


Cosa posso fare per far centrare il layer anche con Mozilla?

Grazie mille.

Fabio
EDIT lucasali: spostato in evangelizzazione. Quando posti del codiceutilizza l'apposito tag CODE.

[lucasali]

non conosco così bene HTML e CSS ma credo che se imposti ad un elemento top: 50%; e left: 50%; credo che la posizione corretta dell'immagine (non ho nemmeno guardato come viene in IE) è quella che appare in FF
il primo pixel dell'elemento div è esattamente al centro della finestra.

ciao. Luca

[flod]

L'impostazione dei margini è sbagliata; esempio

Codice: [Seleziona]

body {
margin: 0px;
height: 100%;
}
div.LayerCentrato {
position: absolute;
top: 50%;
width: 650px;
height: 490px;
border: Solid 1px #CCCCCC;
margin-top: -240px;
margin-left: -320px;
right: 192px;
left: 50%;
}