Colonna laterale ad altezza variabile

**elisacarli** · 24-11-2006, 13:47

Ho un layout a larghezza fissa con un top, una colonna laterale ed una zona centrale per il contenuto ed un footer
Il contenuto della parte centrale é variabile e pertanto può essere più o meno alta. Vorrei che la colonna laterale fosse alta come la parte centrale( ovvero se aggiungo contenuto al centro vorrei che aumentasse anche l'altezza nela colonna laterale)

Come posso fare?
################CODICE ###############

body {
margin: 0px;
font-family: Arial, "Lucida Sans Unicode", Tahoma, Helvetica, sans-serif;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1024px; \width: 1044px; w\idth: 1024px;
}

#top {
background-color: White;
padding-left: 25px;
padding-top: 25px;
padding-right: 25px;
}

#contenuto {
float: left;
padding-top: 20px;
}

#laterale {
float: left;
width: 240px;
background-color: White;
padding-left: 20px;
padding-top: 20px;
}

#footer {
margin-left: auto;
margin-right: auto;
clear:both;
width:987px;
padding-top: 20px;
padding-left: 37px;
}

**pezzo** · 24-11-2006, 14:03

La cosa più semplice che mi viene in mente è la seguente. Fai disegnare la colonna ad un contenitore che contiene le due...

<div id="contenitore">
<div id="colonna1">
</div>
<div id="colonna2">
</div>
</div>

e stabilisci che lo sfondo di contenitore (che disegna le due colonne) sia replicato in verticale...

**elisacarli** · 24-11-2006, 15:19

Ho provato ma non funziona.

Per semplicità inserisco tutto il codice di una pagina di prova.
La colonna laterale non si allunga in proporzione al div "contenuto"

<head>
<STYLE type=text/css>
body {
margin: 0px;
font-family: Arial, "Lucida Sans Unicode", Tahoma, Helvetica, sans-serif;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1024px; \width: 1044px; w\idth: 1024px;
}

#top {
background-color: #000099;
padding-left: 25px;
padding-top: 25px;
padding-right: 25px;
}

#contenuto {
float: left;
padding-top: 20px;
height: 100%;
background-color:#FFCC99;
}

#laterale {
float: left;
width: 240px;
background-color: #99FFCC;
padding-left: 20px;
padding-top: 20px;
height: 100%;
}

#footer {
background-color: #CC99FF;
margin-left: auto;
margin-right: auto;
clear:both;
width:987px;
padding-top: 20px;
padding-left: 37px;
}

#cnt{
border: none;
}
</STYLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>

<div id="container">
<div id="top">
alto
</div>

<div id="cnt">
<div id="laterale">
laterale
</div>
<div id="contenuto">

aaaaaa </p>

vvvvvvv </p>
</div>
</div>

<div id="footer">FOOTER<br class="pulisci"/>
</div>
</div>

</body>
</html>

**pezzo** · 24-11-2006, 16:10

prova così

<!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" xml:lang="it" lang="it" dir="ltr">
<head>
<title>Figura 4.22</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<style type="text/css">

body {
margin: 0;
padding: 0 10%;
background:#EEE;
color: #000;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#corpo {
width:100%;
float:left;
background: #FFF url(sfondo.2col.fisso.gif) 0 0 repeat-y;
}
#colonna-1 {
float:left;
width:200px;
background: transparent;
color: #000;

}
#colonna-2 {
margin-left:200px;
background: transparent;
color: #000;
}
#intestazione {
background: #666;
color: #FFF;
width:100%;
}
#pie-di-pagina {
background: #666;
color: #fff;
width:100%;
clear: left;
}
#intestazione, #colonna-1, #colonna-2, #pie-di-pagina {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
div p {
margin: 0;
padding: 0.5em 1em;
}
</style>

</head>
<body>

<div id="intestazione">

Lorem ipsum mea sale iisque laoreet ei. Decore aperiam blandit quo ei. Fastidii patrioque constituto sea ea, qui ad sumo erant veritus, debet everti est ad. Pri simul fastidii fabellas an. An option incorrupte mea, omnium numquam petentium ei pro. Per ex nostro audire percipitur, eos latine pericula intellegat ad.</p>
</div>
<div id="corpo">
<div id="colonna-1">

Atqui numquam singulis his ne, an eius fugit velit vel. Ut vix nisl philosophia, his ex reque petentium interpretaris. Autem zzril invidunt eam ex. Eu malis error sed, erat omnesque an has. Vix et primis omnium, qui vidit debitis ea.</p>
</div>
<div id="colonna-2">

Stet invenire nam no. Quando nostro eligendi has an, labores vulputate id nam, sonet impedit platonem id sit. In his democritum eloquentiam, an sed everti voluptaria. Doctus persecuti vituperata cu mea.</p>

Sint oblique maluisset duo ut. Ut eam ignota persius perpetua, quo id possim accusata oportere, timeam laboramus ius et. Habeo nostro electram ut sit, eum nisl reque te. Legimus tibique contentiones pri et, an ius facete tibique principes, dico dolorem contentiones pro ex.</p>

Idque virtute periculis mea et, mea id atqui perfecto senserit, semper conceptam et sed. Sit malorum phaedrum disputationi an. No bonorum insolens sit, periculis consequat voluptatibus sit in. Per no affert nostrud ceteros, has id nonumy iracundia, erant disputando ne sea. Dictas antiopam reprimique at sit, velit doctus an quo, illud quidam in vel.</p>
</div>
</div>
<div id="pie-di-pagina">

Kasd omnium nec te. At rebum iracundia sea, ne soleat insolens tincidunt eum, virtute accumsan ius ne. Postea reformidans ut vis, qui elit singulis philosophia no, sed id malis veniam convenire. Et his inani eirmod integre. Ius impedit conceptam ex. At sanctus facilisi elaboraret vis, ius id inani admodum, ut scripta intellegat vis. Ad est justo congue neglegentur, mea ad alia deterruisset, per zzril vidisse ea.</p>

</div>
</body>
</html>

FAmmi sapere se va bene...

**elisacarli** · 24-11-2006, 16:38

No purtroppo non va bene.
Quello che intendevo dire era che la colonna contenuto deve essere uguale a laterale, anche se laterale é vuota, senza però assegnarli un altezza fissa
Nel tuo caso colonna-1 é più corta di colonna-2, poichè si limita a contenere il testo . Io voreei che fossero entrambe uguali, ma senza assegnarli un altezza fissa, ma che cambino dinamicamente l'una rispetto l'altra.

Saluti

**pezzo** · 24-11-2006, 16:46

mi sa che non ho capito cosa vuoi fare...

nel mio esempio se colonna 1 è vuota, viene cmq disegnata perché lo sfondo di corpo va di pari passo alla lunghezza di colonna 2...

Come dici tu quindi colonna-1 è più corta di colonna-2 ma nessuno se ne accorgerà mai perché verranno disegnate alla stessa altezza!

Scusami se non capisco, se puoi spiegami meglio... altrimenti chiedo aiuto agli altri per darti una mano!

**elisacarli** · 24-11-2006, 17:14

Ciao pezzo
sei davvero molto gentile. Il fatto é che le due colonne in oggetto non sono della stessa altezza.Infatti se provi a mettre come sfondo il verde, oppur ese le apir con dremaweaver , vedari che non sono alte uguali, perchè di fatto si riempiono in base a ciò che contengono.

Lascia stare se poi nessuno se ne accorge.....

A me di fatto occorre che la lunghezza della colonna laterale sia uguale al contenuto centrale. Nel contenuto centrale deve inserire dei testi di vari lunghezza e la colonna laterale deve allungarsi della stessa quantità, senza inserire alcun testo al suo interno.
Si devono allungare di pari passo.

saluti

**pezzo** · 24-11-2006, 17:20

Aspetta aspetta aspetta... la tua frase "se provi a mettere come sfondo il verde" mi fa sospettare che non sono stato abbastanza chiaro...

Per dare lo sfondo alla colonna 1 devi inserire un'immagine (tipo quella che ti ho allegato a cui puoi cambiare il colore) che farà da sfondo a corpo! questo perché la colonna 1 sarà sempre e comunque più corta di colonna 2.

Quindi, normalmente uno dei metodi per risolvere è utilizzare lo stratagemma di non assegnare sfondo a colonna 1 ma a corpo con una immagine che disegna la colonna 1... se assegni direttamente il colore a colonna 1... non va!

Spero di essere stato chiaro, altrimenti mi spiace dovrò issare bandiera bianca!

PS.
Non farti illudere da dreamweaver, guarda il risultato nel browser aggiungendo testo nella colonna 2...

Discussione: Colonna laterale ad altezza variabile

Strumenti discussione

Ricerca discussione

Visualizza

Colonna laterale ad altezza variabile

Permessi di invio