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
CSScodice:<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>
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}
Rispondi quotando
