problema div contenitore centrato e body overlow auto

**indacoravenna** · 14-06-2010, 09:59

Ho un problema di cui mi sono reso conto solo recentemente.

Da un po' di tempo centro i contenuti di un sito creando un div contenitore (posizionandolo in modo assoluto o relativo il problema lo riscontro in entrambi i casi) al centro della pagina in questo modo:

html, body{
overflow: auto;
margin:0;
padding:0;
background: #FFFFFF;
background: url("images/sfondo_layout.jpg")
repeat-x top;
font-family: Tahoma, Arial, Verdana;
text-decoration: none;
color: #7c7c7c;
font-size: 11px;
}
#contenitore{
position: relative;
z-index: 1;
left: 50%;
margin-left:-440px;
width: 880px;
}

quando però apro il sito con una risolutione inferiore alla larghezza del contenitore non mi compare la barra orizzontale. Mentre in alcuni casi mi compare ma mi fa scrollare i contenuti solo a destra tagliando una striscia a sinistra.

Il problema lo risolvo inserendo nel div contenitore una tabella e poi all'interno della stessa tutti i miei contenuti. Sapete dirmi il perchè? ..e dove sbaglio? ho provato a mettere nel body width e hight al 100% ma il problema persiste

**Mich_** · 14-06-2010, 10:18

Perche` centri in quel modo?

Perche` non usi invece i margini automatici? (chiaramente senza usare il position, che e` quello che ti da` gli effetti collaterali)

**indacoravenna** · 14-06-2010, 11:22

Originariamente inviato da Mich_
Perche` centri in quel modo?

Perche` non usi invece i margini automatici? (chiaramente senza usare il position, che e` quello che ti da` gli effetti collaterali)

avevo letto che questo era il metodo corretto...
potresti farmi un esempio di margini automatici?

in rete o trovato questo:
body {
width: 100%;
text-align: center; /* per IE */
}
#main {
margin: 0 auto;
text-align: left; /* o right o center */
}

..ma così non allinea anche i testi centrati?
e se io voglio che il mio div sia largo al max 800px devo impostare nel main width:800px oppure devo fare un alro div da includere in main?

**indacoravenna** · 14-06-2010, 11:35

Originariamente inviato da Mich_
Perche` centri in quel modo?

Perche` non usi invece i margini automatici? (chiaramente senza usare il position, che e` quello che ti da` gli effetti collaterali)

eppure anche qui usano il mio metodo:
http://css.flepstudio.org/css-tutori...zzontalmente-2

Il margin auto lo usano solo all'inizio, forse perchè se specifichi il "position" poi non funziona?
Ti chiedo scusa per la moltitudine di domande ma vorrei capire i pro e i contro di un metodo piuttosto di un altro e perchè si usano queste due soluzioni.

..ciò non toglie che anche usando il mio metodo quando apro un sito ad una risoluzione molto bassa dovrebbero comparire le barre verticali ed orizzontali.. cosa che però non accade per quella orizzontale :-(

**Mich_** · 14-06-2010, 12:08

I posizionamenti non si possono usare finche` non si sanno usare bene, e finche` non si e` acquisita una esperienza sufficiente.
In linea di massima creano effetti collaterali (in qualche browser e/o in qualche combinazione dimensione finestra - dimensione blocco) che non sono facili da gestire.

ma così non allinea anche i testi centrati?

No, perche` riporti il testo a sinistra (o dove vuoi) dentro il #main

e se io voglio che il mio div sia largo al max 800px devo impostare nel main width:800px oppure devo fare un alro div da includere in main?

Devi usare
max-width
(che pero` non funziona in IE quirks mode)

Il margin auto lo usano solo all'inizio, forse perchè se specifichi il "position" poi non funziona?

In linea di massima un oggetto con position:absolute deve stare dentro un position:relative (o position:absolute) oppure direttamente nel <body>

Centrare con il posizionamento assoluto funziona bene solo se il contenitore e` maggiore del blocco contenuto: in caso contrario si hanno gli effetti di cui ti lamenti

..ciò non toglie che anche usando il mio metodo quando apro un sito ad una risoluzione molto bassa dovrebbero comparire le barre verticali ed orizzontali.. cosa che però non accade per quella orizzontale :-(

non necessariamente: i margini negativi non danno origine a scrollbar (ma dipende dai browser)

Discussione: problema div contenitore centrato e body overlow auto

Strumenti discussione

Ricerca discussione

Visualizza

problema div contenitore centrato e body overlow auto

Permessi di invio