Layout a 3 colonne, come adattare l'altezza delle colonne esterne....(segue)

**dies** · 27-05-2004, 09:42

Ciao Ragà,

ho un layout a 3 colonne..

questa la pagina HTML:

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" lang="it">
<head>
<title>Tre colonne: Liquido</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!-- 
body { 
	font:80% verdana,helvetica,sans-serif; 
	margin:0; padding:0
}
code { font:80% verdana,helvetica,sans-serif; display:block; margin:0 1em .5em 1em; }
hr { display:none }

/* centrare la pagina web a larghezza fissa */
body { text-align:center }  
#testa { width:90%; margin:1em auto; text-align:left }
#corpo { width:90%; margin:1em auto; text-align:left }

/* corpo */
#corpo { 
	position:relative; 
	background:#f0f0f0; 
	border:1px solid #000; 
}
#corpo-colonna1 { 
	position:absolute; top:0; left:0; 
	background:url(bg.gif) repeat-x; 

	width:85px;
	padding:0 0; 
}
#corpo-colonna2 { 
	margin:0 85px 0 85px; 
	border-left:1px dashed #000; 
	border-right:1px dashed #000; 
	background:#fff; 
	padding:1em 0; 
}
#corpo-colonna3 { 
	position:absolute; top:0; right:0; 
	background:url(bg.gif) repeat-x;
	width:85px;
	padding:0 0; 
}

-->
</style>
</head>
<body>
<hr />

<div id="corpo">
	<div id="corpo-colonna1">
		COLONNA SINISTRA
	</div>
	<hr />
	<div id="corpo-colonna2">
		COLONNA CENTROCOLONNA CENTROCOLONNA CENTROCOLONNA CENTROCOLONNA CENTROCOLONNA CENTROCOLONNA CENTROCOLONNA CENTROCOLONNA CENTROCOLONNA CENTROCOLONNA CENTRO
	</div>
	<hr />
	<div id="corpo-colonna3">
		COLONNA DESTRA
	</div>
</div>

<hr />
</body>
</html>

dove bg.gif è di dimensioni 5px X 5000px;
io voglio riuscire, ad adattare lo sfondo delle due colonne esterne all'intera altezza della colonna centrale (in relazione al suo contenuto). Perché ora, lo sfondo delle due colonne esterne si adatta al contenuto dei singoli DIV che costituiscono le colonne esterne.

E' possibile?

Grazie per l'attenzione.

dies

**antos** · 27-05-2004, 09:51

problema discusso + volte (c'è anche la guida su html.it http://www.html.it/layout_css/layout_css_23.htm )

in pratica non puoi farlo, l'unica cosa che puoi fare è dare l'illusione che le colonne abbiano la stessa altezza.
dai a #corpo l'immagine di sfondo bg.gif e non impostare lo sfondo sulle due colonne laterali

**Jerry Masslo** · 27-05-2004, 12:32

la soluzione più corretta (a parte le tabelle che funzionano come tu vorresti) è un annidamento appropriato, in modo che la colonna che deve essere sempre più lunga si trascini le altre colonne, che a seguito dell'annidamento non saranno più indipendenti, personalmente ho trovato pure una soluzione eterodossa e limitata (non va con le percentuali) usando i bordi, qui trovi la discussione da cui è partito tutto

Mi sono accorto solo ora di aver accindentalmente cancellato quei file e uno era irrimediabilmente perduto e l'ho dovuto rifare.

**notoanto** · 27-05-2004, 13:59

In un layout a 3 colonne, sistemando nella colonna centrale una tabella, restringendo la pagina con il mouse, la tabella centrale viene buttata giu' mentre le due colonne laterali si avvicinano fra di loro. Le due colonne laterali hanno una larghezza di 130 mentre quella centrale ha una distanza dai margini di 130
Lo stesso problema si verifica con alcuni articoli con formattazione particolare (che sono buttati fuori) mentre gli articoli di solo testo si visualizzano regolarmente
Come si puo' risolvere?

**dies** · 02-06-2004, 08:57

Ciao ragà,

leggendo la guida http://www.html.it/layout_css/index.html gentilmente segnalata da antos,

sono arrivato a questo punto http://www.html.it/layout_css/layout_css_31.htm

ora non riesco a capire come adattare al div, un'immagine di sfondo con ripetizione lungo x:

questo è ii div

codice:

div#container{position: relative;width:760px; margin: 0 auto;
    border-left: 1px solid #ccc; border-right: 1px solid #ccc;
    background: url(3rightcol.jpg) repeat-y top right}

se scrivo

div#container{position: relative;width:760px; margin: 0 auto;
border-left: 1px solid #ccc; border-right: 1px solid #ccc;
background: url(mia_immagine.gif) repeat-x top right}

capita un casino....

continuo a sbatterci sopra...

vi faccio sapere.

Ciao e grazie a tutti per la partecipazione

dies

**deleted_id_48586** · 02-06-2004, 11:28

Originariamente inviato da antos
problema discusso + volte (c'è anche la guida su html.it http://www.html.it/layout_css/layout_css_23.htm )

in pratica non puoi farlo, l'unica cosa che puoi fare è dare l'illusione che le colonne abbiano la stessa altezza.
dai a #corpo l'immagine di sfondo bg.gif e non impostare lo sfondo sulle due colonne laterali

Esatto !

Questa cosa è stata discussa e ridiscussa, il fatto è che i DIV non possono essere considerati coem le celle di tabella che sono interdipendenti mentre i div così gestiti hanno una relazione di "fratellanza".

La cosa più semplice è appunto utilizzare un background-image da gestire con la larghezza totale del sito.

**dies** · 02-06-2004, 11:44

Originariamente inviato da Sgurbat
...

La cosa più semplice è appunto utilizzare un background-image da gestire con la larghezza totale del sito.

Ciao,

cosa vuoi dire? che non è possibile gestire le immagini di sfondo in altezza, cioè con l'attributo repeat-x?

grazie per l'attenzione

dies

**Jerry Masslo** · 02-06-2004, 12:53

Originariamente inviato da Sgurbat
Esatto !

Questa cosa è stata discussa e ridiscussa, il fatto è che i DIV non possono essere considerati coem le celle di tabella che sono interdipendenti mentre i div così gestiti hanno una relazione di "fratellanza".

La cosa più semplice è appunto utilizzare un background-image da gestire con la larghezza totale del sito.

Non so se avevo con te una discussione su questo argomento, si era arrivati alla conclusione che senza l'uso di immagini si potevano avere massimo due colori per le colonne simulate con quel sistema, giusto? è quello che stai affermando ora no?

Be' ci sono novità, la prima è che a causa di ciò mi sono messo a smanettare e ho trovato una soluzione piuttosto strampalata che consente di colorare colonne in numero molto maggiore di 2, cosa che sicuramente non avrei fatto se nel forum non fosse circolata questa leggenda, la seconda è che a causa della mia strampalata soluzine shores ha finalmente edotto il forum su come fare colonne coi div, con l'unica limitazione, comune a tutte queste soluzioni, che ci sia sempre un div che determina l'altezza di tutto l'incolonnamento. Riassumendo, si annidano i div, tutti quelli che si vuole e il div più interno trascina gli altri, trovi tutto nel link sopra.

Se guardi invece la pagina che ho fatto io capirai che mi spetterebbe un risarcimento

E chè mi sarei messo a fare quella cosa là se avessi saputo come stavano veramente le cose?

**Jerry Masslo** · 02-06-2004, 12:56

Originariamente inviato da dies
Ciao,

cosa vuoi dire? che non è possibile gestire le immagini di sfondo in altezza, cioè con l'attributo repeat-x?
grazie per l'attenzione
dies

no è tutta un'altra cosa, le immagini di sfondo si possono gestire in moltissimi modi, però repeat-x non ripete in altezza se intendi in verticale, ma in orizzontale.

é questo l'inghippo? credevi che con y ripetevi in orizzontale?

**dies** · 02-06-2004, 16:43

Originariamente inviato da Jerry Masslo
no è tutta un'altra cosa, le immagini di sfondo si possono gestire in moltissimi modi, però repeat-x non ripete in altezza se intendi in verticale, ma in orizzontale.

é questo l'inghippo? credevi che con y ripetevi in orizzontale?

no, la mia immagine è di 5x5000 px. Ecco perché mi serviva il repeat-x... ma non andava. Poi, sono arrivato alla conclusione di Jerry Masslo e grazie a questo link http://www.html.it/layout_css/layout_css_23.htm ho capito come stanno effettivamente le cose.

Finalmente ho capito come implementare un layout a 3 colonne.

Un grazie a tutti i partecipanti di questa discussione.

dies

Discussione: Layout a 3 colonne, come adattare l'altezza delle colonne esterne....(segue)

Strumenti discussione

Ricerca discussione

Visualizza

Layout a 3 colonne, come adattare l'altezza delle colonne esterne....(segue)

Scusate il ritardo....

Permessi di invio