Novizio: primo layout a 3 colonne! Alcune domande!

**spiadadda** · 31-01-2007, 12:54

Ciao a tutti,
è da un pò che smanetto con i css, ma solo adesso per motivi di tempo sono riuscito a fare un layout fisso a 3 colonne (di prova).
Con Internet explorer 6 e Firefox sembra che funzioni tutto bene, ma con Nescape 6 ho alcuni problemi.
Mi piacerebbe capire dove sbaglio e soprattutto avere dei consigli su come sto procedendo....mi raccomando siate severi in modo da poter imparare

Vi posto il codice

CODICE HTML

codice:

<body>

<div align="center">

<div id="container">
	<div id="header">Header del sito di prova</div>	
	<div id="menu_centrale">menu di navigazione centrale del sito di prova</div>

	<div id="container2">
		
		<div id="col_sin">		
		  

Colonna di sinistra del sito</p>		    
		</div>
	
		<div id="box_contenuti">     
		

BOX dei contenuti centrale del sito</p>
		</div>
		
		<div id="col_dx">
		    

Colonna di destra del sito</p>
		</div>	
		
	</div>	
	
	<div id="footer">
	Footer del sito
	</div>
</div>
</div>
</body>

CODICE CSS

codice:

html,body{margin: 0;padding:0}

body{
background-color: #99CC33;
font-family: arial,sans-serif; 
font-size: 76%;
text-align: center; /*centra in IE 5.x */
}
div#container {
background-color: #FFFFFF;
width : 760px;
}
div#header {
width: 760px;
height: 100px;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border: none;
}
div#menu_centrale {
width: 760px;
height: 25px;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border: none;
}
div#container2 {
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 5px 5px;
	border: none;
	width: 750px;		
}
div#col_sin {
        background-color: #5267FF;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: none;
	width: 135px;
	text-align: left;
	float: left;	
}
div#box_contenuti {
background-color: #FF99FF;
	margin: 0px 5px 0px 5px;
	padding: 0px 0px 0px 0px;
	border: none;
	width: 470px;
	float: left;
	text-align: left;
} 
div#col_dx{
background-color: #5267FF;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: none;
	width: 135px;
	text-align: left;
	float: right;
}
div#footer{
	background-color: #FFFFFF;
	margin: 5px 5px 5px 5px;
	padding: 0px 0px 0px 0px;
	border: none;
	width: 750px;
	clear: both;	
	text-align: center; 
}

Come vedete la struttura è molto semplice poichè essendo questo per me solo un hobby ho poco tempo per dedicarmici e quindi sto cercando di imparare un pò alla volta.

Allora il problema che ho riscontrato riguarda Nescape6, infatti se con Internet explore e firefor riesco a vedere tutto bene, ovvere le 3 colonne perfettamente allineate in verticale, con Nescape6 le tre colonne:
Colonna di sinistra
Colonna centrale
Colonna di destra
non sono allineate ma bensi vengono disposte in orizontale una sotto l'altra. Inoltre come vedete io ho impostato per ogni colonna un colore di sfondo che con nescape non vedo....e il colore di sfondo è quello bianco! Perchè accade ciò? Come posso rimediare?

Inoltre per allineare al centro tutto il layout io ho usato:

codice:

<div align="center"></div>

che ho inserito nella pagina web direttamente. Infatti se non utilizzavo questo DIV il sito risultava allineato centralmente sono con Explorer mentre con Nescape e Firefox risultava allineato a sinistra. E' corretto questo modo di procedere? Esiste un metodo per allineare centralmente tramite i css e non html?

Ciao Ciao e grazie a coloro che risponderanno

**OcchioCrepato** · 31-01-2007, 13:04

per allineare al centro inserisci

codice:

div#container {
background-color: #FFFFFF;
width : 760px;
margin:0 auto;
}

ed elimina il <div align="center"> e </div> di chiusura

Prova a ridurre la larghezza del corpo centrale

un po di pulizia del codice

modifica
margin: 0px 0px 0px 0px; in margin: 0;
padding: 0px 0px 0px 0px; in padding: 0;
padding: 5px 5px 5px 5px; in padding: 5px;
margin: 0px 5px 0px 5px; in margin: 0px 5px;

**spiadadda** · 31-01-2007, 13:11

Grazie!
Adesso il layout risuklta allineato centralmente anche con Firefox e Nescape.
Mi potresti spiegare perchè ora funziona e cosa serve praticamente il codice:

margin:0 auto;

disposto nel div del box container?

Cosa intendi con pulizia del codice?
Cosa dovrei fare?

Per quanto riguarda il problema dell'allineamento e dei colori di sfondo delle tre colonne, come posso risolvere?

Grazie 1000 per l'aiuto!

**OcchioCrepato** · 31-01-2007, 13:23

Originariamente inviato da spiadadda
Mi potresti spiegare perchè ora funziona e cosa serve praticamente il codice:
margin:0 auto;
disposto nel div del box container?

Due valori per il margin significano che il primo valore vale per il margine alto e quello basso (0 in questo caso) ed il secondo vale per il margine sinistro e quello destro – in questo caso abbiamo il valore ‘auto’, ch indica al browser di scegliere il valore automaticamente. Ciò ha l'effetto di piazzare l'elemento al centro dello schermo.

Originariamente inviato da spiadadda
Cosa intendi con pulizia del codice?
Cosa dovrei fare?

Quello che ti ho scritto sopra

modifica
margin: 0px 0px 0px 0px; in margin: 0;
padding: 0px 0px 0px 0px; in padding: 0;
padding: 5px 5px 5px 5px; in padding: 5px;
margin: 0px 5px 0px 5px; in margin: 0px 5px;

Originariamente inviato da spiadadda
Per quanto riguarda il problema dell'allineamento e dei colori di sfondo delle tre colonne, come posso risolvere?

il div#container2 è largo 750px
in più hai messo il padding a 5
padding: 5px 5px 5px 5px;

il div#col_sin è largo 135px;

il div#box_contenuti è largo 470px
con margine laterale di 5px a sx e a dx margin: 0px 5px 0px 5px;

il div#col_dx è largo width: 135px;

135+135+470+10+10=760 px > 750px
prova a mettere la larghezza del div#box_contenuti a 460px o 459px

**spiadadda** · 31-01-2007, 13:30

Grazie,
ho capito tutto...sei stato molto chiaro!

Ho fatto così come mi hai consigliato, ovvero ho ridotto la larghezza del box centrale ma non è cambiato nulla con Nescape. Sono arrivato ad una larghezza di 400px ma nulla da fare...le colonne non si allineano verticalmente. Comunque con Firefox e Explorer le colonne sono perfettamente allineate in verticale! La cosa strana è che nemmeno il colore di sfondo delle tre colonne è visualizzato con Nescape.

Per quanto riguarda il resto del layout e del css come ti sembra? Sono sulla buona strada?

**OcchioCrepato** · 31-01-2007, 13:39

Prova a vedere qua http://blog.html.it/layoutgala/indexIta.html in particolare i numeri 7 e 8.

Discussione: Novizio: primo layout a 3 colonne! Alcune domande!

Strumenti discussione

Ricerca discussione

Visualizza

Novizio: primo layout a 3 colonne! Alcune domande!

Permessi di invio