layout con tre colonne alte quanto la pagina!!

**CeMax-2000** · 17-12-2004, 14:19

non riesco proprio a fare in modo di inserire sotto la testata di un sito tre colonne che siano alte il 100% della pagina seppure esse siano vuote.

quindi ho una testata alta 120 pixel che ho fatto e va bene.

poi sotto devo inserire queste benedette tre colonne larghe rispettivamente (da sinistra a destra) 160px - 500px - 100px.
Il totale è ovviamente di 760 px.

ne ho provate di tutti i colori ma proprio non riesco a venirne a capo (sono due giorni che ci sbatto la testa!!)

Oltretutto sotto le tre colonne devo inserire un footer alto 40 pixel e largo quanto le tre colonne insieme e la testata.

C'è qualche anima pià che mi aiuta???

Grazie infinite e visto l'orario buon pranzo!!

Hola.

**pierofix** · 17-12-2004, 14:34

Una cosa del genere può interessarti?

- http://www.itgmarinoni.it

Le colonne sono fittizie, in quanto si opera con un'immagine di sfondo. Qui è spiegato come fare:

- http://www.alistapart.com/articles/fauxcolumns/

**CeMax-2000** · 17-12-2004, 16:00

no pierofix (cmq grazie per aver risposto

)

Vedi io vorrei riuscire a fare quello che viene fuori con questa tabella:

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="it" xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>title</title>

</head>
<body>
<div align="center">
<table border="1" cellspacing="0" cellpadding="0" width="760" summary="tabella contenitrice">
	<tr>
		<td width="100%" height="120">TESTATA</td>
	</tr>
	<tr>
		<td width="100%" height="100%">
<table border="1" width="100%" cellspacing="0" cellpadding="0" summary="CORPO">
	<tr>
		<td width="160" height="100%">colonna sinistra</td>
		<td width="500" height="100%">
<table border="0" width="99%" cellspacing="0" cellpadding="0" summary="CONTENITORE DATI">
	<tr>
		<td width="100%" height="100%"></td>
	</tr>
	<tr>
		<td width="100%" height="100%">
<table border="0" width="468" cellspacing="0" cellpadding="10" summary="TESTO">
	<tr>
		<td width="468" height="400">CORPO CENTRALE</td>
	</tr>
</table>
		</td>
	</tr>
</table>
		</td>
		<td width="110" height="100%">colonna destra</td>
	</tr>
</table>
		</td>
	</tr>
	<tr>
		<td width="100%" height="30">FOOTER</td>
	</tr>
</table>
</div>
</body>
</html>

Come già fdetto l'header l'ho fatto e funziona ma ora con il corpo mi sono arenato di brutto e non so più come muovermi!!

Mi dai un'aiutino?? help.......

**BananaBoat** · 17-12-2004, 16:35

dai a tutti i div margin:0;
crei un div contenitore con padding:0; alto 100% e largo 760px
crea un div largo 100% e alto 120px, questa e' la testata
crea tre div alti 100% e larghi rispettivamente 160px, 500px e 100px e da a tutti ( :master: forse basta darlo ai primi due, ma penso sia uguale, vedi tu) float:left;
infine crei un div largo 100% e alto 40 px, questo e' il footer
fammi sapere

**CeMax-2000** · 17-12-2004, 16:42

ci provo subito

**CeMax-2000** · 17-12-2004, 17:13

ciao allora sono riuscito a fare questo:

codice:

<!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">
<html>
<head>
	<title>Untitled</title>
<style type="text/css">
body{background:url(mages/sfondo_sito.gif) fixed;font:75% Verdana,Arial,sans-serif;text-align:center;margin:0;margin-top:3px;padding:0;height:100%;}
html {height:100%;}

#PrimaryContent{
text-align:left;
margin:auto;
width:760px; height:100%;
background:#669999;
}

#Testata{
margin:0;
width:100%; height:120px;
background:#CC3300;
}

#ColSX{
margin:0;
width:160px; height:100%;float:left;
background:#99CCFF;
}
#ColCE{
margin:0;
width:500px; height:100%;float:left;
background:#006699;
}
#ColDX{
margin:0;
width:100px; height:100%;float:left;
background:#FFFFCC;
}

#Footer{
margin:0;
width:100%; height:30px;
background:#339900;
}
</style>
</head>
<body>
<div id="PrimaryContent">
<div id="Testata">testata</div>
<div id="ColSX">col sx</div>
<div id="ColCE">col center</div>
<div id="ColDX">col dx</div>
<div id="Footer">footer</div>
</div>
</body>
</html>

e su ie va bene ma su firefox (che è quello che più mi interessa non va perchè non mi da il footer o meglio il footer me lo da ma non mi da il colore e l'altezza di 30 pixel che gli ho dato non sono 30!!!

Non è che per caso mi puoi correggere dove ho sbagliato!!???

**BananaBoat** · 17-12-2004, 18:45

in effetti con firefox serve un clear:left; nel footer, anche se mi sembra piu' corretto il comportamento di ie :master:
prova questo:

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<title>Layout a 3 colonne</title>
<style type="text/css">
html,body{margin:0;padding:0;height:100%;width:100%;}
body{background:black;text-align:center;}
div.layout{margin:0;text-align:left;}
.col{float:left;height:100%;}
#container{padding:0;height:100%;width:760px;margin:0 auto;}
#header{background:blue;height:120px;width:100%;}
#sx{background:green;width:160px;}
#main{background:white;width:500px;}
#dx{background:red;width:100px;}
#footer{clear:left;background:yellow;height:40px;width:100%;}
</style>
</head>
<body>
<div class="layout" id="container">
<div class="layout" id="header">
Se mi vedi vuol dire che funziona! :-O
</div>
<div class="layout col" id="sx">
Se mi vedi vuol dire che funziona! :-O
</div>
<div class="layout col" id="main">
Se mi vedi vuol dire che funziona! :-O
</div>
<div class="layout col" id="dx">
Se mi vedi vuol dire che funziona! :-O
</div>
<div class="layout" id="footer">
Se mi vedi vuol dire che funziona! :-O
</div>
</div>
</body>
</html>

**Igor70** · 17-12-2004, 23:55

Attento perche haight:100% non' e crosbrowser per niente.
Tanti browser calcolano il 100% come il 100% della window visibile ma se poi carichi dentro dei contenuti che superano la lungezza non tutti i browser ti allungano il contenitore dinamicamente e di conseguenza il tuo footer rimane appoggiato in fondo e i contenuti gli sbordano sopra.

Usa height:auto;

**CeMax-2000** · 18-12-2004, 08:28

Allora come potete vedere da questi due link ho due situazioni/soluzioni che ho trovato in rete e che ho fatto tramite le vostre dritte.

Allora diciamo subito che quello che più soddisfa le mie esigenze è il numero 5 visto con IE ....se non fosse per il fatto che il bordino nero della colonna destra è rientrato di due pixel rispetto a quello della testata.

Mi soddisfa anche il numero 4 però visto con FIREFOX ma.... (c'è sempre un ma purtroppo), se si potesse fare in modo che anche le colonne sinistra e destra seguissero l'altezza di quella centrale.

Le stesse versioni ma viste reciprocamente con il browser opposto non mi soddisfano perchè il 4 con IE si alza troppo lasciando un enorme spazio alla fine.

E la versione 5 vista con FIREFOX, assolutamente no perchè offre l'aspetto più brutto e cioè il testo ed o il contenuto sia grafico che altro forano la colonna stessa ed anche il footer oltrepassandolo o meglio passandoci sotto!!!

Vi ripeto che il browser che io prendo come primario è FIREFOX ma ovviamente si deve vedere con tutti bene!!

Un'altra cosa ma come funziona il box-model?? ho trovato ora un articolo che mi accingo a leggere che mi sembra molto interessante.

In ogni caso serve per risolvere la differenza fra IE e la maggior parte degli altri browser quando vengono letti i bordi di un div ?? se è così è quello che mi serve per eliminare quei due pixel del cavolo!!!

Ha dimenticavo di dire che se aumento la colonna centrale dagli attuali 498PX a 500PX mi va tutto p*****e portando la colonna destra sotto alla sinistra!!!

Eccovi i link:

num. 4) www.lacoccinellaterralba.it/header_nuovo4.html
num. 5) www.lacoccinellaterralba.it/header_nuovo5.html

Grazie ancora per il vostro aiuto

Colgo l'occasione per ringraziare anche igor per il suo intervento.
Ho provato ma non mi ha soddisfatto molto e comunque appena avrà risolto questi problemini cercherò di applicare quanto da te consigliato.

Hola a tutti...... e speriamo che oggi qualcuno ci sia!!

**CeMax-2000** · 20-12-2004, 12:29

Beh! che dire cvi sono stato due giorni sopra (tanto pioveva

) ma ce l'ho fatta!! che ne dite??

Ho un solo problemino e che spero possiate aiutarmi a risolvere:

Con la storia della tecnica di tantek per i box-model il foglio di stile non mi viene più validato riscontrando errori del tipo:

# Line: 21 Context : #BodyContentMaster

Parse Error - /width:760px;
# Line: 21 Context : w

Parse Error - w/idth:758px;

Avrà sicuramente ragione il validatore ma.......

Cosa devo modificare per far si che ciò non avvenga??

Grazie ancora !!

p.s. il nuovo link è ora:
www.lacoccinellaterralba.it

Hola...

Discussione: layout con tre colonne alte quanto la pagina!!

Strumenti discussione

Ricerca discussione

Visualizza

layout con tre colonne alte quanto la pagina!!

Permessi di invio