Centrare una pagina

[neo-one]

Sto abbandonando FrontPage per scrivere direttamente in css.
Ho scritto questo codice ma visualizzo l'intero documento a sinistra se adopero una risoluzione maggiore all'800 per 600.
Come faccio a centrarlo? Il problema sta in body o nel box principale #divpagina? Ho fatto un pò di prove, senza successo

Grazie


BODY { position: absolute; padding:0px; border: 0px; margin: 0px;

}
#divpagina {

BACKGROUND: url(SfondoHome23.jpg); background-repeat: no-repeat; background-position: top center;
padding:0px; border: 0px; margin: 0px;
width: 750; height: 550;
font-family: verdana, arial, sans-serif;
}


#divtitolo {
position: relative;
Background: url(titolo.jpg); background-repeat: no-repeat; background-position: top center; height: 109px;
}
#div Etc....

[var]

prova ad aggiungere, per il body, questa regola:

text-align:center;

e per il div contenitore:

margin-left:auto;
margin-right:auto;

ciao

[awd]

è un po' inbordellato sto codice, cerca di essere più ordinato:
- scrivi tutto minuscolo
- usa background-image per l'immagine di sfondo, se no usa background come proprietà singola per tutto
- indica tutte le unità di misura (sullo 0 è facoltativo ma io lo metto)

e cmq a parte questo, cosa servirebbe un position: absolute; nel body?

per centrare (orizzontalmente) usa i codici di var. inoltre ricorda di ripristinare l'allineamento nel contenitore (text-align:left; o right)

[neo-one]

Ok
Grazie per i consigli
Compatitemi, è la prima volta che scrivo di prima mano in css :rollo:

Ho risolto in questo modo, ma mentre visualizzo centrato per IE, visualizzo tutto a sinistra con Firefox che in più mi fa comparire la barra di scorrimento orizzontale con un mucchio di spazio a destra

body { padding:0px; border: 0px; margin: 0px; text-align:center;

}
#divpagina {

background-image: url(SfondoHome23.jpg); background-repeat: no-repeat; background-position: top center;
padding:0px; border: 0px;
margin-left:auto;
margin-right:auto;
text-align: left;
width: 750; height: 550;


}
#divtitolo {
position: relative;
background-image: url(titolo.jpg); background-repeat: no-repeat; background-position: top center; height: 109px; width: 750;
z-index: 1;

}
#div0 { position: relative;
background-image: url(fogliarossa.gif); background-repeat: no-repeat; background-position: center left;
padding-left: 70px;height : 25px;
top: 20px;
left: 475px;
font size:18;
z-index: 30;
}

Etc

[neo-one]

FireFox e IE leggano diversamente la mia pagina... è un problema cui cui posso o non posso far fronte? Dipende da come ho scritto il codice, oppure il codice è scritto bene ed è questione di browser?

[awd]

comincia con l'impostare una larghezza per #div0 e poi correggi quel font size:18; e metti l'unità di misura

e poi sei sicuro che il posizionamento relativo sia ciò che ti occorre?

[neo-one]

Hai ragione riguardo l'uso dell'absolute, mi sono riletto meglio la guida qui su html.it
absolute posiziona rispetto all'elemento ancestor diverso da static, relative invece solo rispetto all'elemento contenitore

Per quello che devo fare io è meglio l'uso di absolute (un elemento contenitore posizionato al centro, il corpo della pagina, e tutti gli altri elementi posizionati rispetto all'elemento contenitore).
Seguendo questo ragionamento ho cercato di posizionare l'elemento contenitore (divpagina) centralmente rispetto a body.
Quindi avrei dovuto usare body static e divpagina absolute. Tutti gli altri elementi avrebbero fatto riferimento a divpagina, in quanto primo elemento ancestor diverso da static.
Tuttavia se uso absolute e non relative (che poi sono stato costretto ad utilizzare), vedo il corpo della pagina a destra dello schermo , e compare addirittura la barra di scorrimento orizzontale.
Prova ad utilizzare questo codice sostituendo la position relative di divpagina con absolute... perché accade tutto questo? Non ha senso rispetto a quello che ho letto... e che penso mi volevi suggerire e far capire!
Grazie

body {
position: static;

background: silver; padding:0px; border: 0px; margin: 0px;text-align: center;

}
#divpagina {
position:relative;
top: auto; left: auto;
width: 680px; height: 550px;
background-image: url(SfondoHome23.jpg); background-repeat: no-repeat; background-position: top center;
padding-left:0px; padding-right: 0px;
border-left: 0px; border-right:0px;
margin-left: auto; margin-right: auto;



}
#divtitolo {
position: relative;
background-image: url(titolo.jpg); background-repeat: no-repeat; height: 108px; width: 680;
z-index: 1;

}
#div0 { position: absolute;
background: url(fogliarossa.gif); background-repeat: no-repeat; background-position: center left;
padding-left: 70px; whith: 200px; height : 25px;
top: 130px;
left: 475px;
font size:18px;
z-index: 30;
}