[xhtml] problema con i lv

**mageta** · 15-02-2004, 23:29

Questa è una pagina formata da una testa, un corpo centrale diviso in 3 colonne e una coda.
Se la colonna 2(quella che sta al centro) è + lunga delle altre 2 colonne, la 1 e la 3, quest'ultime si allungano quanto la colonna 2 e fino a qua tutto perfetto.
Se una delle 2 colonne (1 e 3) è piu' lunga della colonna 2, si allungano solo loro facendo andare tutto il layout a put..

come faccio a fare in modo che le colonne 1 e 3 si comportino come la colonna 2?

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 }
#piedipagina { width:90%; margin:1em auto; text-align:left }

/* testa */
#testa { 
	background:#ccc; 
	border:1px solid #000; 
	padding:1em 0; 
}

/* corpo */
#corpo { 
	position:relative; 
	background:#f0f0f0; 
	border:1px solid #000; 
}
#corpo-colonna1 {
	position:absolute; top:0; left:0; 
	width:20%; 
	padding:1em 0; 
}
#corpo-colonna2 { 
	margin:0 25% 0 20%; 
	border-left:1px solid #000; 
	border-right:1px solid #000; 
	background:#fff; 
	padding:1em 0; 
}
#corpo-colonna3 { 
	position:absolute; top:0; right:0; 
	width:25%; 
	padding:1em 0; 
}

/*pie' di pagina */
#piedipagina { 
	background:#eee; 
	border:1px solid #000; 
	padding:1em 0; 
}
-->
</style>
</head>
<body>

<div id="testa">testa</div>

<hr />

<div id="corpo">
	<div id="corpo-colonna1">menu1</div>

	<hr />
	<div id="corpo-colonna2">corpo centrale</div>
	<hr />

	<div id="corpo-colonna3">menu3</div>
</div>

<hr />

<div id="piedipagina">coda</div>

</body>
</html>

**Mich_** · 16-02-2004, 10:03

Hai gia` provato a definire height:100% in tutte le colonne? (o solo in quelle laterali)

Ciao
Michele

**mageta** · 16-02-2004, 11:51

la colonna 1 e 3(quelle laterali) si allungano, ma non allungano anche quella centrale. mentre la colonna 2 allunga in automatico quelle laterali se son + corte.

a me serve che pure quelle laterali allunghino quella centrale se + corta

**Jerry Masslo** · 18-02-2004, 03:14

è una questione trattata più volte in html, il problema sorge perché i div non funzionano come le tabelle dove le celle di una stessa riga sono dipendenti l'una dall'altra, il tuo layout al momento è organizzato con le colonne laterali che non hanno sfondo e prendono quello del div che li contiene simulando l'effetto che si allungano all'allungarsi della colonna centrale. Soluzioni? reali che rendano i div dipendenti, nessuna, workaround (come si traduce?) in pratica già quella che usi è una pezza che è limitata dal conoscere in anticipo la colonna più lunga, altre? usare un'immagine di sfondo che simula l'incollannamento ma tu stai usando la larghezza in percentuale e così non serve perchè alle immagini di sfondo non si può dare tale tipo di larghezza e non ne conosco altre.

Discussione: [xhtml] problema con i lv

Strumenti discussione

Ricerca discussione

Visualizza

[xhtml] problema con i lv

Permessi di invio