Creazione di un layout table-less con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

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...
</div>
<div class="DX">
  PRINCIPALE...
</div>
A questo banale listato Html aggiungiamo questo foglio di stile:
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.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.936)

:: Referenze dei fogli di stile Css (41.900)

:: Menu ad effetto mouseover con i Css (39.299)

:: Effetti sui link con i Css (30.301)

:: Testo verticale coi Css (20.102)

:: Angoli smussati in un box coi Css (18.979)

:: Box con effetto ombra con i CSS3 (16.391)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.291)

:: Stilizzare i form Html con i Css (16.110)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.893)

IN EVIDENZA
DOWNLOAD