CSS  »  Articoli  »  CSS Template e layout 

Per quanto riguarda la griglia, utilizziamo invece dei sotto-blocchi e la tecnica dei float contrari in modo da avere una scalabilità e una stabilità ottimale, appunto la stessa tecnica che adoperano i framework Blueprint e Yui.

Questo sistema prevede il DIV come elemento di blocco/struttura. Avremo sempre il DIV contenitore, il DIV testata e il DIV fondo come finora siamo abituati a vedere ma per ogni DIV che strutturerà gli spazi del nostro layout subentra il sistema griglia dei sotto-blocchi.

Infatti i DIV "addetti" a rispettare la griglia hanno una classe che li identifica in base a che tipo di ingombro sto adoperando rispetto alla griglia. Lato CSS andiamo ad indicare il valore di questo ingombro e tramite un margine negativo al DIV contenitore della griglia e alla tecnica dei float contrari rendiamo l'affiancamento delle colonne con una compatibilità che parte da IE 5.5 fino alle moderne release dei vari browser. Inoltre eliminiamo dal codice il famoso e semanticamente scorretto DIV cleaner o pulitore, insomma il comune resettatore di float che eseguiva il clear dei blocchi flottanti, ed il DIV corpo (ovvero il contenitore delle macro colonne).

Tale sotto-scomposizione dei DIV griglia è infinita fino al valore minimo della colonna stessa ovvero l'ingombro della colonna scelta che nel nostro caso è 60px. Ecco il codice HTML:

<div id="Contenitore">
<div id="Testata">
<p>testata</p>
</div><!-- fine div=Testata -->
<div id="Colonna1">
<div class="Col-Grid2">
<div>
<p>colonna 1-1</p>
</div>
<div>
<p>colonna 1-2</p>
</div>
</div>
</div><!-- fine div=Colonna1 -->
<hr />
<div id="Contenuto">
<div class="NoGrid Post">
<p>contenuto</p>
</div>
</div><!-- fine div=Contenuto -->
<hr />
<div id="Fondo">
<p>fondo</p>
</div><!-- fine div=Fondo -->
</div><!-- fine div=Contenitore -->

Ed ecco quello CSS:

   #Colonna1{ 
   float:right; 
   width:460px;} 
   #Colonna1 div.Col-Grid2, div.Col-Grid3, div.Col-Grid4{ 
   float:left; 
   width:480px; 
   margin-right:-20px;} 
   #Colonna1 div.Col-Grid2 div{ 
   float:left; 
   width:220px; 
   margin-right:20px;} 
   #Colonna1 div.Col-Grid3 div{ 
   float:left; 
   width:140px; 
   margin-right:20px;} 
   #Colonna1 div.Col-Grid4 div{ 
   float:left; 
   width:100px; 
   margin-right:20px;} 

Ogni DIV non addetto alla griglia ha una classe che gli toglie le proprietà lasciandocelo quindi libero per le nostre formattazioni e utilizzi:

   #Colonna1 div div.NoGrid{ 
   float:none; 
   width:auto; 
   margin-right:0;}

Per fare in modo che il DIV fondo stia al suo posto senza utilizzare un elemento che esegua la proprietà clear basta attribuire ad esso la stessa larghezza del DIV contenitore e la proprietà float. Esempio:

   #Fondo{ 
   width:940px; 
   float:left; }

Conclusioni e approfondimenti

Queste due tecniche sono considerate da molti designer di interfacce web il giusto canale da seguire per portare sempre più professionalità e chiarezza nelle nostre pagine. Tutta l'esperienza dal cartaceo sta piano piano applicandosi al web. Le tecniche ce lo permettono e ritroviamo sempre gli standard a garantirci un prodotto conforme.

Il passo successivo per queste tecniche discusse sarà senz'altro l'implementazione delle griglie fluide per soddisfare anche la ridimensionabilità della pagina rispetto alla nostra finestra, caratteristica molto utile in ambito di accessibilità.

Di seguito una lista di articoli usciti in questa sezione e dedicati ai temi oggetto di questo articolo:

• Ritmo verticale nella tipografia
• Layout a griglia con Yahoo Grids
• Layout a griglia con Blueprint
• Introduzione a 960gs

Altri articoli

Altre guide

Altre newsletter