Creazione di un layout senza tabelle
Articolo scritto da Luca Ruggiero
I Css mettono a disposizione un ottimo sistema di impaginazione e costruzione di layout, potente almeno quanto le tabelle standard dell'Html, col vantaggio di alleggerire il codice (e di conseguenza il caricamento della pagina), e di rendere una pagina accessibile ai browser per invalidi, quindi con impulsi vocali e sensibili al tatto, ecc...
Vediamo un esempio in cui costruiamo un layout composto da una colonna (tipo menu) sulla sinistra, ed un'area principale sulla destra:
<div class="SX"> MENU...A questo banale listato Html aggiungiamo questo foglio di stile:
</div> <div class="DX"> PRINCIPALE...
</div>
div.SX {
float: left;
width: 20%;
/* IMPOSTAZIONE MARGINI, SFONDO, GIUSTIFICAZIONE, BORDI, ECC... */
}
div.SX {
float: left;
width: 80%;
/* COME SOPRA! (Rif. Referenze ed elenco dei comandi del linguaggio Css) */
}
La proprietà float impostata sul valore left non fa altro che impedire ad un layer di tipo <div> di andare a capo alla chiusura, come nativamente si comporta e, mantenendolo sulla stessa riga, permette la creazione di layout in forma tabellare.
