Posizionamento verticale.

**Indalo** · 22-12-2009, 19:20

Salve. Volevo far vedere uno scorcio dello sfondo del body anche al di sopra della testata mantenendo il container centrato (con ie6, ie8 e altri) .

Oltretutto non mi convince il codice del container coi margininegativi.

Il mio codice è :

html
{
margin: 0px;
padding: 0px;
width: 100%;
text-align: center;
}

body
{
margin: 0px;
padding: 0px;
width: 100%;
text-align: center;
background-image: url(../image/sfondo200px.jpg);
background-color: #DDDDDD; /* grigio = sfondo */
}

div#container
{
margin: -512px 0 0 -512px;
width: 1024px;
height: 768px;
position: absolute;
top: 50%;
left: 50%;
text-align:left;
background-color: #000000; /* nero */
display: block;
}

**miki003** · 22-12-2009, 19:35

Il container con margini negativi funziona egregiamente non vedo perchè non ti deve convincere, nel tuo codice hai fatto un errore, il codice deve essere così:

codice:

div#container 
{
margin: -384px 0 0 -512px;
width: 1024px;
height: 768px;
position: absolute;
top: 50%;
left: 50%;
text-align:left;
background-color: #000000; /* nero */
}

**Indalo** · 22-12-2009, 23:43

Grazie del suggerimento. Mi ero confuso. Ma comunque nn ho la spazio sopra.
Forse posso creare, all'interno del container, una falsa tastata; tutti e due trasparenti.

**miki003** · 23-12-2009, 00:29

Originariamente inviato da Indalo
Grazie del suggerimento. Mi ero confuso. Ma comunque nn ho la spazio sopra.
Forse posso creare, all'interno del container, una falsa tastata; tutti e due trasparenti.

Non puoi se lo guardi con risoluzione 1024x768 visto che il container l'hai fatto di quelle dimensioni, per vedere dello sfondo devi perlomeno guardarlo con una risoluzione 1280x960 o maggiore, in alternativa devi fare un container più piccolo

**Mich_** · 23-12-2009, 09:38

Il tuo
top: 50%;
non vuole dire niente (hai presente la pubblicta` del prosciutto?

), dato che si riferisce ad un'altezza non definita.

Prova a mettere anche
height: 100%;
nel CSS sia del body che dell'html

**Indalo** · 23-12-2009, 18:56

Ho fatto come hai detto tu ed è vero. Non cambia niente. Però la testata si abbassa, rispetto al container, di un pò (5px ?).

div#header
{
width: auto;
height: 2px;
margin: 0px auto;
/* position: relative; */
background-color: #006699; /* blu */
text-align: left; /*ripristina l' allineamento*/
display: block;
}

Oltretutto tra ie, opera e netscape lo spazio di body che vedo cambia.
Ho notato che variando il margin -384 0 0 -512 cambia ma nn c'è una soluzione migliore ?
Devo perdere comunque dello spazio su qualche browser ?

**miki003** · 23-12-2009, 20:48

Io non capisco perchè si continua a dubitare del metodo, se si ha un contenitore con misure fisse height e width, non si può sbagliare è una vita che uso quel metodo e mi ha sempre messo i contenitori al centro perfetto

Quando ci sono tutte e due le misure più top 50% e left 50% più la metà delle misure in negativo nel margin, si ottiene un risultato perfetto senza ombra di dubbio su tutti i browser, poi se si sbaglia qualche cosa ecco che il risultato cambia.

Attenzione al padding che cambia i valori.

Non capsco cosa ti serve un display block nel contenitore

**Indalo** · 23-12-2009, 23:42

Io non capisco perchè si continua a dubitare del metodo, se si ha un contenitore con misure fisse height e width, non si può sbagliare è una vita che uso quel metodo e mi ha sempre messo i contenitori al centro perfetto

Quando ci sono tutte e due le misure più top 50% e left 50% più la metà delle misure in negativo nel margin, si ottiene un risultato perfetto senza ombra di dubbio su tutti i browser, poi se si sbaglia qualche cosa ecco che il risultato cambia.

Attenzione al padding che cambia i valori.

Non capsco cosa ti serve un display block nel contenitore

--

Scusa ma ti sbagli, a meno che io non stia sbagliando qualcosa.
A me succede che il container, facendo come dici tu, in alto scompare dallo schermo.

Il mio codice è :

<body>
<div id="container">
<div id="header">
<div id="navhead"></div>
</div>
<div id="navigation"></div>
<div id="extra"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body
></html>

E il foglio di css è :

html { margin: 0px; padding: 0px; width: 100%; height: 100%; text-align: center; }

body { margin: 0px; padding: 0px; position: fixed; width: 100%; height: 100%;
text-align: center; background-image: url(../image/sfondo250px.jpg);
background-color: #DDDDDD; /* grigio = sfondo */ }

div#container { margin: -300px 0 0 -512px; width: 1024px; height: 800px;
position: absolute; top: 50%; left: 50%; text-align:left;
background-color: #666666; display: block; }

div#header { margin: 0px auto; width: auto; height: 120px; border: 2px solid #00FF00;
background-color: #006699; text-align: left; display: block; }

div#navhead { position: relative; bottom: 0px; width: 30px; height: 30px;
background-color: #000000; text-align: left; display: block; }

Se notate con margin -300px arrivo al limite con ie8 e netscape (ma dovrei diminuire ancora); con opera vedo pochi pixel (5/6) ad di sopra.

Nella navhead ho un quadrato di prova che vorrei posizionare in basso a destra ma non c'è verso di farlo.

Aiuto !!!!!!!!!!!!!!!!!!!!!!!!!!!!

**miki003** · 24-12-2009, 02:33

Poniamo che lo sfondo della pagina sia grigio e il container rosso, tanto per evidenziare la posizione del container. Stabilito questo GUARDA QUI per tagliare la testa al toro

**Indalo** · 24-12-2009, 16:04

Prova ad aprire la tua pagina con ie8 o opera. La posizione del contenitore è differente. Come si può ovviare a questo ?

Discussione: Posizionamento verticale.

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento verticale.

OK ma il problema rimane.

Re: OK ma il problema rimane.

Non cambia niente.

Risposta a Miki

Permessi di invio