CSS  »  Articoli  »  CSS Template e layout 

Recentemente, tecniche come quelle dei Float: teoria e pratica e dei Layout con margini negativi e soprattutto quella denominata Any Order Columns, hanno portato i layout CSS a nuovi livelli di sviluppo finora impensabili.

Ho così pensato di introdurre questi nuovi modi di fare layout attraverso quella che è stata quasi una sfida personale: realizzare il maggior numero possibile di layout. La quantità non è stata l'unico obbiettivo che mi sono posto nel realizzare i molti esempi di questa serie di articoli. Ciascuno di essi infatti:

• usa lo stesso markup di base;
• usa un layout che non impone vincoli sulla lunghezza relativa delle colonne;
• ha un CSS semplice e logico che non usa hack o workaround;
• ha un'ottima compatibilità: sono stati tutti testati con successo su IE5, IE5.5, IE6, Opera 8.5, Firefox 1.6 e Safari.

Sono risultati circa 35 layout che presenterò in questa serie di articoli. Assolutamente non si tratta di tutti i possibili layout generabili dallo stesso markup, ma sono senz'altro una parte molto significativa, utile alla comprensione delle tecniche qui esposte (margini negativi e in alcuni casi float opposti), che può costituire un solido punto di partenza per i vostri progetti futuri nel momento in cui vorrete disporre di un layout di base già pronto.

La varietà dei layout è quasi impressionante: si tratta infatti di layout a due e tre colonne, liquidi o fissi, con colonne percentuali o a larghezza fissa e soprattutto con diverse disposizioni orizzontali delle colonne. Nella realizzazione non ho utilizzato grafica, ma per ciascuno di essi è possibile adottare facilmente la tecnica delle false colonne e delle Layout liquido a 2 colonne con i CSS.

Per la fase di test mi sono servito di un piccolo script che mi è venuto molto utile, ovvero il filler text a richiesta che ho presentato sul blog. Ho pensato di lasciarlo negli esempi così che possiate testarli variando la lunghezza relativa delle colonne. Ma ora non indugiamo oltre e procediamo con il codice.

Il markup di base

Prima di procedere con CSS ed esempi, diamo uno sguardo al markup che verrà usato per tutti i layout. Essenzialmente si tratta di un markup adatto per siti con cinque sezioni portanti: header, contenuti principali, navigazione, sezione aggiuntiva (per esempio per una navigazione secondaria, link, sponsor eccetera), footer. Ecco il codice HTML di base:

<div id="container">
<div id="header">Header</div>
<div id="wrapper">
    <div id="content">Contenuto</div>
</div>
<div id="navigation">Navigazione</div>
<div id="extra">Sezione extra</div>
<div id="footer">Footer</div>
</div>

Da notare il contenitore aggiuntivo (con id="wrapper") per la sezione dei contenuti principali: sebbene in alcuni esempi il suo uso sia superfluo, nella maggiorparte dei casi ci consente molta flessibilità e semplicità del CSS.

Altri articoli

Altre guide

Altre newsletter