|
Guida CSS Fogli di stile - Ver. 4.1.3 - Ottobre 2008 Ver. 1.0 - Novembre 1999
I Layout fissi e liquidi.
Un layout altro non è che una struttura per contenere i dati. Si tratta in pratica di usare box fissi e/o box flottanti per impaginare tutto quello che può far parte di una pagina web.
Facendo uso delle informazioni e degli esempi visti per il box liquido è possibile creare una struttura molto versatile, in questo esempio due colonne: una per il menù a sinistra e l'altra per la pagina principale, una testata con titolo ed un margine inferiore. Lo possiamo vedere su questo link.
Questo il codice nel foglio di style CSS, già tenuto conto del bug per i browser IE:
<!--
body {
text-align: center; /* IE5.x */
}
#telaio {
width:100%;
margin: 0px;
border:1px solid gray;
line-height:150%;
color: black;
background-color: #ffffcc;
text-align: left; /* IE5.x */
}
#testata {
font-size: 130%;
}
#fondo {
font-size: 85%;
text-align: center;
}
#testata, #fondo {
padding:0.5em;
color:white;
background-color: #cc9900;
clear:left;
}
#sinistro {
float:left;
width:160px;
margin: 0px;
padding: 5px;
}
#centrale {
margin-left: 170px;
border-left:1px solid gray;
padding:10px;
}
-->
Questo il codice HTML:
<body>
<div id="telaio">
<div id="testata">... Testata ...</div>
<div id="sinistro">... Sinistro...</div>
<div id="centrale">... Centrale ...</div>
<div id="fondo">... Fondo ...</div>
</div>
</body>
Su questo link il risultato a video
In questo esempio riassuntivo sono state introdotte molte delle cose trattate fino a questo momento per quanto riguarda il box model. Anche i parametri sono stati espressi volutamente con unità di misura differenti al solo scopo di rendere meglio l'idea di cosa sia possibile fare con l'uso dei fogli di style. Ognuno di voi potrà modificarlo a proprio gusto ed esigenza.
Continua: I Links
Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.
|
