Salve ragazzei...mi sto cimentando con i css...sarò fagiano io ma pensavo fosse più semplice.
Ho preso il layout da un esempio della guida: tre colonne (div), le due ai margini larghezza fissa, quella centrale per i contenuti idem...un footer che riesce a stare sempre al di sotto...e dunque scende se il testo o il contenuto delle due colonne aumentano.
avrei l'esigenza di far scendere le colonne laterali fino al bottom e dunque impostare una sorta di altezza 100%...è possibile?
posto il codice
grazie
codice:
<body>
<div id="container">
<div id="container2">
<div id="header">
<h1></h1>
</div>
<div id="navigation">
<ul>[*]Home[*]Pillole[*]Contenuti
[*]Grafica[*]Linguaggi[*]Webdesign[*]Software
[/list]
</div>
<div id="extra">
<div class="newsbox">
<h2>Larghezza delle colonne</h2>
La tendenza è avere le due colonne laterali a larghezza fissa e la colonna centrale fluida [...]</p>
</div>
</div>
<div id="content">
<h2>Layout a tre colonne - versione con i float</h2>
Il layout a tre colonne è uno dei più diffusi e permette di gestire siti di dimensioni medio-alte,
fino ad arrivare ai portali. Si compone delle seguenti sezioni fondamentali:
header, navigazione, contenuti, sezione extra e footer.</p>
visualizza il css di questo layout</p>
</div>
<div id="footer">© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietà di HTML.it s.r.l.
Note e informazioni legali</div>
</div>
</div>
CSS
codice:
/*stili per il layout fisso con background*/
html,body{margin: 0;padding:0}
body{
font-family: arial,sans-serif;
font-size: 8;
text-align:center;
}
div#container{
width: 685px;
border-width: 0 1px;
border-style:solid;
border-color: #ccc;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
div#container2
{
}
/*stili generici, su header e footer*/
div#header{
height: 146px;
color: #ff0;
background-image: url(Senza%20nome-1.jpg);
}
h1,h2{margin: 0;padding:0}
h1{padding-left:12px;font: 16px arial,sans-serif}
h2{color: #69f;font-size: 16px}
div#footer a{color:#fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{
float: left;
height: 400px;
width: 70px;
\width:110px;
w\idth:100px;
padding-top: 1em;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
background-image: url(Senza%20nome-4.gif);
background-repeat: repeat-y;
}
div#extra{
float: right;
height: 400px;
width: 51px;
\width:91px;
w\idth:81px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-image: url(Senza%20nome-3.gif);
background-repeat: repeat-y;
}
div#content{
margin-top: 0;
margin-right: 110px;
margin-bottom: 0;
margin-left: 110px;
padding-top: 1em;
padding-right: 5px;
padding-bottom: 1em;
padding-left: 10px;
font-size: 12px;
text-align:justify;
}
div#footer{clear:both; text-align:center; padding: 5px 0;
background-color: #69c; 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:#ffffff;font: normal bold 12px 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: 12px}
/*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}