realizzare collona centrale

**Cho Hakkai** · 12-07-2009, 05:16

come realizzo in un div una colonna centrale, sottoposta a tutti gli altri div, e che si estenda dalla cima al fondo della pagina?
nel css per ora ho scritto ciò

#colonna {
width:800px; height: auto;
margin: 0 auto;
background: #ECECEC;
}

solo che solamente in IE me la visualizza QUASI come voglio (in quanto si estende si dalla cima, ma termina non in fondo alla pagina ma all'altezza del div in posizione inferiore). Con gli altri browser nemmeno la visualizza.

in pratica vorrei realizzare una collonna centrale, "struttura" portante della pagina, come quella bianca in questo sito http://www.csszengarden.com/?cssfile=197/197.css

Grazie!!

**kontrasto** · 12-07-2009, 09:54

Ciao,

nel link che hai postato la colonna è ottenuta assegnando il bianco come colore di sfondo del div #container, cioè un div che contiene tutti gli elementi della pagina (e che perciò si estende fino alla fine).

Io non conosco tutto il tuo codice, ma ti basta mettere tutti gli elementi che hai in un div padre, centrare questo div con margin: 0 auto e dare a questo il bianco come sfondo.

**danlupo** · 12-07-2009, 10:05

Ciao ma se progetti un div con queste proprietà:

Codice PHP:


div#contenitore



top:0;

left:30%;

height:100%;

width:40%;

margin:0 auto;

**Cho Hakkai** · 12-07-2009, 13:32

Originariamente inviato da kontrasto

Io non conosco tutto il tuo codice, ma ti basta mettere tutti gli elementi che hai in un div padre, centrare questo div con margin: 0 auto e dare a questo il bianco come sfondo.

così ho fatto

**Cho Hakkai** · 12-07-2009, 13:34

Originariamente inviato da danlupo
Ciao ma se progetti un div con queste proprietà:

Codice PHP:


div#contenitore



top:0;

left:30%;

height:100%;

width:40%;

margin:0 auto;

grazie
ho messo width a 74% perchè sennò non mi c'entravano gli alti elementi
qual'era la differenza dal mio codice?
però c'è ancora il grossa problema che me lo visualizza correttamente solo con Internet Explorer...

**LùcazStrict** · 12-07-2009, 13:41

io per estendere il container per tutta la lunghezza della pagina utilizzo:

html,body{height:100%;margin:auto;text-align:center}

div#container{width:800px;height:100%}

body>div#container{height:auto;min-height:100%}

dove il codice html è con il div container figlio direttamente di body

mi pare ci sia tutto, dimentico puntualmente qualche pezzo :master:

PS
era una sintassi che trovai in rete qualche anno fà per raggirare il problema, dopo numerevoli tentativi

**Cho Hakkai** · 12-07-2009, 14:01

Originariamente inviato da LùcazStrict
io per estendere il container per tutta la lunghezza della pagina utilizzo:

html,body{height:100%;margin:auto;text-align:center}

div#container{width:800px;height:100%}

body>div#container{height:auto;min-height:100%}

dove il codice html è con il div container figlio direttamente di body

mi pare ci sia tutto, dimentico puntualmente qualche pezzo :master:

PS
era una sintassi che trovai in rete qualche anno fà per raggirare il problema, dopo numerevoli tentativi

grazie
funziona anche in questo modo
ma anche in questo modo solo IE me lo visualizza come desidero

**LùcazStrict** · 12-07-2009, 14:04

strano, firefox cosa ti visualizza??

PS
che doctype utilizzi??

**Cho Hakkai** · 12-07-2009, 14:22

Originariamente inviato da LùcazStrict
strano, firefox cosa ti visualizza??

PS
che doctype utilizzi??

firefox mi visualizza la colonna solamente sotto il contenitore header che ho posto in alto centralmente (e fra l'altro con firefox non si visualizza nemmeno centralmente..)

Ecco la doctype

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />

</head>

fra l'altro è validata

**LùcazStrict** · 12-07-2009, 14:33

per centrare con firefox devi impostare margin:auto al container.

ma il container è l'unico figlio di body?? (fatta eccezioni per eventuali div position:absolute)

Discussione: realizzare collona centrale

Strumenti discussione

Ricerca discussione

Visualizza

realizzare collona centrale

Permessi di invio