Salve, seguendo l'articolo "Layout in CSS con Layout-o-matic" di HTML.IT, stavo preparando appunto un layout a 3 colonne grazie alle funzionalità del "posizionamento degli oggetti" di cui beneficiano le proprietà dei CSS.
Le due colonne laterali riporteranno i link per la navigazione all'interno del portale, la colonna centrale i contenuti.
Il problema è il seguente:
lo sfondo delle due colonne laterali dovrà essere bianco dove sono riportati i link di navigazione e grigio (stessa colonna) nella parte rimanente dell'altezza fino al raggiungimento del footer .
Occuppando i contenuti che risiedono nella colonna centrale un' altezza maggiore di quella delle colonne laterali, la parte rimanente dell'altezza di quest'ultime rimane di uno sfondo bianco anzichè grigio come vorrei.
Un esempio di quello che vorrei realizzare è su http://blog.tiscali.it
Con un layout a tabelle sarebbe necessario dare uno sfondo comune a tutta la tabella, in questo modo la sfondo che si allunga per effetto dell'altezza della colonna centrale riempie automaticamente anche le colonne laterali anche se i i link di navigazione di quest'ultime occupano un'altezza inferiore rispetto ai contenuti centrali.
Ma con i CSS come posso fare ?
Esistono degli attributi della proprietà "BOX" che magari possono aiutarmi ?
Se nel file "prova.html " che fa riferimento a "File_esterno.css " provate ad inserire dei paragrafi di lunghezza maggiore nella colonna centrale (content) rispetto alle due colonne laterali ("sidebar_left" e "sidebar_right") capirete cosa voglio dire.
N.B.:
Gli sfondi delle due colonne laterali, in realtà dovrebbero essere di sfondo bianco dove ci sono i contenuti e di sfondo grigio dove non ci sono i contenuti fino al footer quando i contenuti centrali occupano un altezza maggiore di quelli laterali.
Se provate a togliere dai commenti /*.. */ i BACKGROUND-COLOR avranno i loro valore. Ma non è colorare la colonna dove ci sono i contenuti quello che voglio ma colorarla invece dove non ci sono .
Ringranzio anticipatamente tutti coloro che vorranno aiutarmi.
*************************************
--> File "prova.html"
<DIV id=container>
<DIV id=header>Paragrafo testo..</DIV>
<DIV id=sidebar_left>Paragrafo testo..</DIV>
<DIV id=sidebar_right>Paragrafo testo..</DIV>
<DIV id=content>Paragrafo testo..</DIV>
<DIV id=footer>Paragrafo testo..</DIV>
</DIV>
*************************************
--> File_esterno.css :
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
BORDER-RIGHT: gray 1px solid;
BORDER-LEFT: gray 1px solid;
BORDER-TOP: gray 1px solid;
BORDER-BOTTOM: gray 1px solid;
margin: 10px auto;
margin-left: auto;
margin-right: auto;
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
PADDING-TOP: 10px;
}
#header {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
MARGIN-BOTTOM: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
BACKGROUND-COLOR: rgb(213,219,225)
}
#content {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN-LEFT: 163px;
MARGIN-RIGHT: 163px;
/*BACKGROUND-COLOR:#FAEBD7; */
}
#sidebar_left {
float: left;
width: 144px;
\width: 154px;
w\idth: 144px;
margin: 0;
margin-right: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
/* background-color: rgb(235, 235, 235); */
}
#sidebar_right {
float: right;
width: 144px;
\width: 154px;
w\idth: 144px;
margin: 0;
margin-left: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
/*background-color: rgb(235, 235, 235); */
}
#footer {
clear: both;
PADDING-RIGHT: 5px;
margin-top: 5px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
background-color: rgb(213, 219, 225);
}
*************************************