Salve a tutti!
Sto creando un classico layout con header-footer e 3 colonne verticali, di cui quella centrale per i contenuti e quelle lateriali per navigazione ed extras, una a sx e una a dx.
Ho però un problema riguardo a queste due colonne laterali: avendo un colore di sfondo, vorrei che esse fossero lunghe quanto la colonna centrale, indipendentemente dal loro contenuto. In questo modo (esempio con 2 sole colonne) http://html.it/guide/esempi/layout_c...stile=2cpcolor
Invece a me succede che le colonne si interrompono al termine dei contenuti, senza continuare comunque fino al footer, cioè in pratica sono "troncate".
Questo è il mio foglio di stile e la mia pagina index.
Vi ringrazio per ogni indicazione! Credo basta che mi diciate il comando CSS per fare in modo che le colonne continuino fino in basso indipendentemente dal quanto contengono.
<style type="text/css">
/*stili per il layout fisso con posizionamenti assoluti*/
html,body{
margin: 0;
padding:0;
height: 100%;
}
body{
font-family: arial,sans-serif;
font-size: 76%;
text-align: center;
}
div#page{
position: relative;
height:100%;
text-align: center;
background: url(sfondocontainer.jpg) repeat:
}
div#container{
position: relative;
width:760px;
margin: 0 auto;
height:100%;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background: url(sfondocontainer2.jpg) repeat;
}
body>div#page{
height: auto;
min-height: 100%;
}
/*stili generici, su header e footer*/
div#header{
height: 100px;
background-color:#DDDDDD;
color: #ff;
}
h1,h2{margin: 0;padding:0}
h1{padding-left:10px; font: bold 2.3em/80px arial,sans-serif}
h2{color: #69f;font-size: 1.5em}
div#footer a{color:#fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{
position: absolute;
top: 100px;
left: 0;
width: 10px;
\width:10px;
w\idth:10px;
padding: 1em 1em 1em 1em;
background-color:#C0C0C0;
}
div#extra{
position: absolute;
top: 100px;
right: 0;
width: 10px;
\width:10px;
w\idth:10px;
padding: 1em 1em;
background-color:#808080;
}
div#content{
margin: 0 40px 0 20px; /*Nell'ordine: margine alto, destro, basso(?), sinistro */
padding: 0 1.5em 2em;
background-color: #969696;
}
div#footer{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align:center;
padding: 5px 0;
background-color: #646464;
color: #000;
}
/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.4em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
div#navigation p{font-size: 90%}
/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}
</style>
INDEX.PHP
<body>
<div id="page">
<div id="container">
<div id="header">H E A D E R</div>
<div id="content">Contenuti, tanti contenuti, troppi! </div>
<div id="extra">dx</div>
<div id="navigation">sx</div>
<div id="footer">
<?php
include ("footer.php");
?>
</div>
</div>
</div>
</body>
Rispondi quotando
