Se conoscete il funzionamento di una griglia CSS quello che vi resta da apprendere è come poter costruire il vostro primo layout! Ed è proprio quello che andremo a fare insieme in questa lezione.
Lo scopo di questa lezione è andare a creare un layout che rappresenti i seguenti elementi
attraverso la struttura HTML:
Sono sicuro che avete già visto moltissimi siti che hanno questa struttura e sperimentando con il box model avete iniziato a chiedervi come tutto questo fosse possibile. Uno dei vari modi per realizzare un layout riguarda quello di affidarsi alle griglie CSS che faciliteranno il nostro lavoro e lo renderanno compatibile con i vari browser senza alcuno sforzo da parte nostra.
Ma prima di andare a vedere come questo sia possibile diamo prima uno sguardo alla struttura HTML della nostra pagina:
Come potete vedere all’interno dell’elemento body sono presenti diversi div, il primo con id #contenitore è, appunto, il contenitore di tutti gli elementi della nostra pagina che grazie alla classe .container_12 e al foglio di stile scaricato da 960.gs permette di impostare le dimensioni della nostra griglia.
Costruiamo il LayoutCome già visto un una altra lezione, non ci è sufficiente dichiarare la classe per il nostro contenitore, ma dobbiamo specificare anche le classi per i vari elementi che vogliamo andare a posizionare.
Nell’esempio presentato sopra possiamo capire come ci basti delle semplici classi per poter creare il nostro primo layout. In questo caso abbiamo creato un layout di due colonne, una per i contenuti principali (#main) mentre un altra per la navigazione secondaria (#sidebar).
Ricordandovi che la somma delle colonne utilizzate per definire i nostri contenitori, saresti in grado di sviluppare un layout con 3 colonne?