centrare sito verticalmente

[Bregovic]

Ciao a tutti,
purtroppo non mi funziona la ricerca, quindi spero non sia un argomento affrontato mille volte.

Devo centrare il mio sito orizzontalmente e verticalmente all'interno della pagina.
Ho sempre usato un codice che dopo vi posto..
utilizza i margini negativi.. il problema è che riducendo la finestra il contenuto viene tagliato invece che bloccarsi in alto e far apparire le scrollbar.

come posso risolvere??
grazie


body{
font-family: verdana, Arial, helvetica, sans-serif;
font-size: 10px;
height: 100%;
margin:0px;
width: 100%;
overflow: auto;
background-color:#CCCCCC;
text-align:left;
}

#contenitore{
display: block;
position:absolute;
width:962px;
height:638px;
top:50%;
left:50%;
margin: -319px 0 0 -481px;
background-color:#2D2D2D;
}

[ricman]

Originariamente inviato da Bregovic
il problema è che riducendo la finestra il contenuto viene tagliato invece che bloccarsi in alto e far apparire le scrollbar.

E' il corretto funzionamento di tale tecnica...
Purtroppo non si può avere tutto...
Fai il sito di una larghezza tale da star bene un po' ovunque con gli oggetti disposti bene...

[Bregovic]

Ma come larghezza sono a posto.
Non è proprio possibile impostare il tutto in modo che non sparisca il contenuto in alto se la finestra è piccola?
mi sembra strano che tutti usino questa tecnica non è bello che tagli le pagine

[UmaThurman]

Anch'io ho notato la stessa cosa e poco fa mi sono imbattuta in questo tutorial
che sembra risolvere il problema. (è usato per www.hicksdesign.co.uk ).
Non ho ancora avuto tempo di testarlo ma penso che lo farò a breve, la centratura verticale è sempre una croce!

[Myaku]

Originariamente inviato da Bregovic
Ma come larghezza sono a posto.
Non è proprio possibile impostare il tutto in modo che non sparisca il contenuto in alto se la finestra è piccola?
mi sembra strano che tutti usino questa tecnica non è bello che tagli le pagine

quando mi è capitata una situazione del genere, ho optato per un compromesso:

. tramite js rilevo la risoluzione del browser, se è tale da non "tagliare" i contenuti, applico lo stile che prevede il posizionamento assoluto e margini negativi
. se minore, semplicemente centro il sito in orizzontale, così da avere le scrollbar verticali della pagina (se la risoluzione è tanto bassa da non contenere tutto il layout, non ha senso centrarlo in verticale)
. per chi non ha javascript abilitato, li tratto come se avessero risoluzioni basse (quindi senza centratura verticale). Logico, poi dovrai valutare anche in base al tuo target di utenza, nel mio caso la possibilità di utenti con js disabilitato o non supportato era molto bassa.

[Bregovic]

Originariamente inviato da UmaThurman
Anch'io ho notato la stessa cosa e poco fa mi sono imbattuta in questo tutorial
che sembra risolvere il problema. (è usato per www.hicksdesign.co.uk ).
Non ho ancora avuto tempo di testarlo ma penso che lo farò a breve, la centratura verticale è sempre una croce!

grande!!
ho risolto!!
Vi posto il codice, se può servirvi, per quanto ci sia la spiegazione nei tutorial:

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -319px;
float: left;
}
#wrapper {
background-color: #2D2D2D;
position: relative;
text-align: left;
width: 962px;
height: 638px;
clear: both;
margin: 0px auto;
}

e dunque nell'html:

<div id="shim"></div>
<div id="wrapper">
contenuti centrati
</div>

[ricman]

Originariamente inviato da Bregovic
ho risolto!!
Vi posto il codice, se può servirvi, per quanto ci sia la spiegazione nei tutorial:

...mah... in effetti sembra funzionare... Anche se un div buttato "lì a caso" non mi piace nel codice... il risultato sembra buono..

Qualcuno sa se ci sono controindicazioni?

[UmaThurman]

Boh, sto iniziando a usarlo ora x un nuovo sito, se ci sono faccio sapere...

[Bregovic]

Originariamente inviato da ricman
...mah... in effetti sembra funzionare... Anche se un div buttato "lì a caso" non mi piace nel codice... il risultato sembra buono..

Qualcuno sa se ci sono controindicazioni?

si in effetti è un div senza contenuto.. però blocca dallo scomparire..
io l'ho provato per ora su:

mac safari 3.1
mac firefox 1.5
explorer 6
explorer 7
windows firefox 1.0

per il momento non ho trovato particolari controindicazioni, ma l'ho appena adottato.. in caso farò sapere..

l'unica altra soluzione che avevo pensato (solo pensato) era appunto tramite javascript..

ciao!

[Mich_]

Mah,
Inserire della marcatura aggiuntiva per sistemare la formattazione non e` mai una bella cosa. Dal punto di vista semantico e` sbagliato.

Piuttosto sarebbe piu` corretto aggiungere uno pseudo-blocco, tipo un :before (o un :after), che viene realizzato tutto tramite CSS.
Un esempio si trova nel thread
[Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

Pero` non so se nel vostro caso si puo` fare con un :before.

Certo che in giro si vedono vari hack e trucchi vari. Se non e` possibile fare altrimenti, non ci sono controindicazioni dal punto di vista del codice. In tal caso andrebbe marcato tramite commento che quell'elemento e` li` solo per la formattazione (a beneficio dei posteri).