Pietro Vischia: h=c=±1=±i=±2
ItalianoEnglish

Alla ricerca del Santo Graal

autore: Matthew Levine

Translated with the permission of A List Apart Magazine and the author[s].

Mi dispiace. Sul serio. Non intendevo nominarlo. Non volevo sopravvalutare la sua importanza oppure sminuire gli altri e abbastanza più importanti Santi Graal.

Ma il nome è ormai qui in cima, e tutti sappiamo cosa significa.

Tre colonne. Una barra laterale a larghezza fissa per la navigazione, un’altra per, diciamo, i vostri Google Ads o le vostre foto su Flikr, e (come in un tartufo di ottima qualità) un contenitore centrale liquido per il contenuto vero e proprio. La sua vasta applicabilità in questa epoca d’oro per il blogging, unitamente alla sua considerevole complicatezza, sono i motivi per cui questo layout si è guadagnato il titolo di Santo Graal.

Molti articoli sono stati scritti riguardo al graal, ed esistono numerosi buoni templates. Tuttavia, tutte le soluzioni esistenti richiedono dei sacrifici: un corretto ordine nel codice sorgente, footers a larghezza piena, e un markup essenziae sono spesso compromessi durante la caccia a questo elusivo layout.

Un recente lavoro ha portato alla conclusione la mia personale ricerca del Graal. La tecnica che descriverò vi aiuterà a stendere il layout Santo Graal senza compromettere il vostro codice o la vostra flessibilità. Questa tecnica:

  1. avrà una sezione centrale fluida con barre laterali a larghezza fissa,
  2. permetterà alla colonna centrale di apparire per prima nel codice sorgente,
  3. permetterà ad ogni colonna di essere la più lunga,
  4. richiederà un solo extra div di markup, e
  5. richiederà un CSS molto semplice, con hacks patches minimali.

Sulle spalle dei giganti

La tecnica qui presentata è ispirata al brillante One True Layout di Alex Robinson. Anceh Alex ha fatto riferimento al problema del Santo Graal nel suo articolo, ma la sua soluzione richiede due contenitori e rende la gestione del pagging difficile senza un ulteriore livelo di div dentro ad ogni colonna.

Un’altra guida è venuta dall’Adattamento di Eric Meyer, che usa il posizionamento per mescolare molti tipi di unità. Anche il suo esempio fornisce un layout a tre colonne con barre laterali a larghezza fissata e una sezione centrale liquida. Sfortunatamente, si basa su percentuali approssimate, e riempie una porzione dell’area efficace che varia in modo consistente a seconda delle differenti risoluzioni dello schermo.

Basta parlare — vediamo un po’ di codice

L’HTML richiesto è molto intuitivo ed elegante.

(In nome della chiarezza nel dimostrare questa tecnica, useremo intenzionalmente gli id non semantici “center”, “left,”, e “right”. Vi raccomandiamo tuttavia di usare id semantici in qualsiasi applicazione di questa tecnica. —Ed.)

<div id="header"></div>

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>

<div id="footer"></div>

È tutto qui. Un singolo div in più per contenere le colonne è tutto quello di cui avete bisogno; questo soddisfa anche le mie abitudini ossessive compulsive riguardo al markup.

Il foglio di stile è pressoché altrettanto semplice. Supponiamo che vogliate avere una colonna di sinistra con una larghezza fissa di 200 pixels, e una colonna di destra con una larghezza fissa di 150 pixels. Per semplificare i commenti, abbrevierò colonna centrale, di destra e di sinistra con LC, RC, e CC, rispettivamente. Il CSS essenziale è qui:

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

Rimpiazzate semplicemente i valori con le dimensioni che desiderate, e il graal è vostro. La tecnica funziona in tutti i browser moderni: Safari, Opera, Firefox, e (con una sola righa di hack in fondo) IE6. Il supporto per IE5.5 richiederebbe perlomeno un box-model hack, che viene lasciato come esercizio al lettore.

Date un’occhiata e meravigliatevi per l’eleganza.

Come funziona

La strategia è semplice. Il div contenitore avrà un interno liquido e un padding a larghezza fissa di lato. Il trucco è quindi portare la colonna di sinistra ad allinearsi con il padding di sinistra, e la colonna di destra con il paggind di destra, lasciando che la colonna centrale riempia la larghezza variabile del contenitore.

Costruiamo questo passo dopo passo.

Passo 1: Creare la struttura

Iniziamo con l’header, il footer, e il container.

<div id="header"></div>

<div id="container"></div>

<div id="footer"></div>

Usiamo un padding per il container di larghezza pari alla larghezza che vogliamo che le colonne di destra e di sinistra occupino.

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}

Il nostro layout ora si presenta così:

Figura 1: evidenziamo l’header, il footer, e il container

Passo 1: Creare la struttura

Passo 2: Aggiungere le colonne

Ora che abbiamo la nostra struttura di base, occupiamoci delle colonne.

<div id="header"></div>

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>

<div id="footer"></div>

Aggiungiamo ora le appropriate larghezze e l’appropriato floating per allinearle correttamente. Sarà inoltre necessario usare lĵattributo clear per mantenere il footer sotto alle colonne galleggianti

#container .column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;  /* LC width */
}
#right {
  width: 150px;  /* RC width */
}
#footer {
  clear: both;
}

Notate che la larghezza pari al 100%della colonna di centro si riferisce alla larghezza del div contenitore, escluso il padding. Incontreremo questa larghezza 100% ancora, mano a mano che il layout prenderà forma, e si riferirà sempre alla larghezza centrale del contenitore.

Le colonne ora vogliono alliearsi in ordine, ma poiché la colonna centrale sta occupando il 100% dello spazio disponibile, le colonne di destra e di sinistra si sovrappongono al tutto.

Figura 2: le tre colonne allineate in ordine di apparizione nel codice sorgente

Passo 2: Aggiungere le colonne

Passo 3: Piazzaare al suo posto la colonna di sinistra

La sola cosa che resta da fare è far allineare le colonne con il padding del contenitore. La colonna centrale inizia esattamente dove deve iniziare, quindi ci concentreremo sulla colonna di sinistra.

Ci sono due passi da compiere per mettere a posto la colonna di sinistra. Per prima cosa, la porteremo completamente dall’altra parte rispetto alla colonna centrale, con un margine negativo del 100%. Ricordatevi che 100% si riferisce alla larghezza centrale del contenitore, che è anche esattamente la larghezza della colonna centrale.

#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
}

Ora la colonna di sinistra è sovrapposta a quella centrale, condividendone il confine sinistro. La colonna di destra galleggia a sinistra e si annida a ridosso del confine sinistro della colonna centrale (ma ancora si sovrappone), lasciandoci con il seguente risultato parziale:

Figura 3: la colonna centrale è trascinata del 100% a sinistra

Passo 3: Mettere al suo posto la colonna di sinistra—siamo a metà strada

Per spingere la colonna di sinistra per il resto della strada, useremo il posizionamento relativo con un offset che è esattamente pari alla larghezza della colonna di sinistra.

#container .columns {
  float: left;
  position: relative;
}
#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
  right: 200px;        /* LC width */
}

La proprietà right spinge la colonna 200px lontano dal confine destro; in altre parole, verso sinistra. Ora la colonna di sinistra è allineata perfettamente con il padding sinistro del contenitore.

Figura 4: spostamento della colonna di sinistra di 200px verso sinistra

Passo 3: Colonna di sinistra sistemata al suo posto

Passo 4: Sistemare al suo posto la colonna di destra

Ci rimane solo da sistemare la colonna di destra al suo posto. Per ottenere ciò, dobbiamo semplicemente spingerla fuori dal contenitore fino all’interno del padding del contenitore stesso. Ancora una volta, useremo margini negativi.

#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

Ora è tutto al proprio posto, e le sovrapposizioni scompaiono.

Figura 5: la colonna di destra spostata del 100% verso destra

Passo 4: Sistemare al suo posto la colonna di destra

Passo 5: Elaborare in maniera difensiva

Se la finestra del browser viene deformata fino a quando il centro diventa più piccolo della colonna di sinistra, il layout si spezza, nei browser conformi agli standard. Stabilire una min-width per il body mantiene le vostre colonne al loro posto. Con IE6 questo non succede, quindi il fatto che esso non supporti min-width non costituisce un problema.

body {
  min-width: 550px;  /* 2x LC width + RC width */
}

Naturalmente, nessuna tecnica di layout sarebbe completa senza richiedere un qualche tipo di artificio per Internet Explorer. Il margine negativo spinge la colonna di sinistra troppo a sinistra in IE6 (la larghezza piena della finestra del browser). Dobbiamo quindi riportare la colonna verso destra di una larghezza pari alla larghezza intera della colonna di destra—usando l’hack dello stellina-html per mascherare il procedimento agli altri browser—e siamo pronti a proseguire.

* html #left {
  left: 150px;  /* RC width */
}

Il mtivo per cui dobbiamo usare la larghezza della colonna di destra richiede un po’ di algebra. Non vi annoierò con i dettagli; potete lavorarci da soli, oppure considerare questo come un altro dei numerosi incantesimi di IE.

Padding, per favore

Non sono un designer, ma guardare il layout di cui sopra offende la sensibilità estetica persino mia. Le colonne senza padding sono dure per gli occhi e difficili da leggere. Abbiamo bisogno di spazi.

Uno degli svantaggi di usare percentuali con il One True Layout per creare colonne liquide è che ciò rendeun po’ complicato impostare il padding delle colonne. I padding percentuali tendono ad apparire brutti ad alcune larghezze dello schermo. Si possono aggiungere paddings fissi, ma solo ingombrando il markup con un div annidato in ogni colonna.

Con questa tecnica, il padding invece non è un problema. Il padding può essere aggiunto direttamente alle colonne di destra e di sinistra; semplicemente correggete le loro larghezze corrispondentemente. Per dare un padding di 10 pixel alla colonna di sinistra di cui sopra, ma mantenere la sua larghezza totale (padding + width) al valore di 200px, semplicemente modificate le istruzione come segue:

#left {
  width: 180px;        /* LC fullwidth - padding */
  padding: 0 10px;
  right: 200px;        /* LC fullwidth */
  margin-left: -100%;
}

Impostare un padding per il centro richiede un po’ più di bravura, ma non richiede markup aggiuntivo, e solo un po’ di CSS addizionale.

Il padding più una larghezza del 100% costringe la colonna centrale ad espandersi oltre la larghezza priva di padding del contenitore. Per riportarla al suo posto, dobbiamo incrementare il margine di destra aggiungedogli la larghezza totale del padding. Questo assicura che la colonna centrale sia larga solo quanto ci aspettiamo che sia.

Inoltre, poiché ora la colonna centrale è più larga, la colonna di sinistra deve essere spostata di una maggiore distranza per essere allineata al suo posto. Incrementare l’offset della totale larghezza del padding del centro assolve allo scopo.

Per concretizzare il discorso, modificherò l’esempio per aggiungere un padding di 10 pixels ad ogni colonna laterale (per un totale di 40 pixels), e un padding di 20 pixels ad ogni lato della colonna centrale (per un totale di 40 pixels). Il nuovo CSS avrà quindi l’aspetto seguente:

body {
  min-width: 630px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}
#container {
  padding-left: 200px;   /* LC fullwidth */
  padding-right: 190px;  /* RC fullwidth + CC padding */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
#right {
  width: 130px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -190px;  /* RC fullwidth + CC padding */
}
#footer {
  clear: both;
}

/*** IE Fix ***/
* html #left {
  left: 150px;           /* RC fullwidth */
}

Naturalmente padding sopra e sotto possono essere aggiunti senza problemi. Date un’occhiata a questa versione fornita di piacevoli padding per vedere il template completo.

Questa tecnica funziona altrettanto bene per gli ems. Sfortunatamente, non potete mischiare ems e pixels, quindi scegliete o l’uno o l’altro, ma scegliete con saggezza.

Colonne di pari larghezza

Questa tecnica è veramente utile quando alle colonne sono assegnate altezze uguali. Il metodo che userò è adattato in modo un po’ grezzo dal One True Layout, e quindi non entrerò in dettaglio a riguardo. Per utilizzarlo, semplicemente aggiungete il seguente CSS:

#container {
  overflow: hidden;
}
#container .column {
  padding-bottom: 20010px;  /* X + padding-bottom */
  margin-bottom: -20000px;  /* X */
}
#footer {
  position: relative;
}

Qui, ho fornito alle colonne un padding extra di 10px in basso.

I soliti IE non taglia i backgrounds delle colonne nella parte inferiore del contenitore. I backgrounds si riversano sopra il footer, se la pagina non è alta quanto l’area efficace dello schermo. Questo non rappresenta un problema se non avete un footer a sè stante, e neppure se le vostre pagine sono abbastanza alte da assicurare che coprite l’intera area efficace.

Se avete bisogno di questo footer, tuttavia, non abbiate paura. Anche questo è un problema risolvibile, ma richiede un div in più. Aggiungete un involucro al footer, nel modo seguente:

<div id="footer-wrapper">
  <div id="footer"></div>
</div>

Ora usiamo nuovamente lo stesso trucco con le colonne uguali per fare in modo che l’involucro del footer si estenda oltre la pagina, lasciandovi il footer per farci quello che volete.

* html body {
  overflow: hidden;
}
* html #footer-wrapper {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #fff;         /* Same as body 
                               background */
}

Questo risolve il problema, e ci lascia con il risultato desiderato e pochissima confusione.

Oh, ancora una cosa

Gli estremisti qua fuori potrebbero chiedersi se non esista un ancora migliore metodo per ottenere il nostro scopo. Dopo tutto, il metodo che ho illustrato introduce un div contenitore non semantico. Sicuramente non possiamo avere un extra div che mette confusione nel nostro markup altrimenti perfetto.

Se voi, come me, vi siete posti questa domanda, non ponetevela più Come bonus speciale, vi presento il Santo Graal senza involucri, in tutta la sua gloria minimalista. Un div per ogni sezione del codice—non uno in più, non uno in meno. Beatitudine semantica, pressoché degna del titolo di “Santo Graal”.

Il principio che sta dietro al suo CSS è lo stesso. Il padding è stato applicato direttamente al body, eliminando la necessità di qualsivoglia contenitore. Margini negativi stirano header e footer per assicurare che essi occupino l’intero spazio.

Questa piccola versione funziona in tutti i browsers summenzionati, persino (pressoché scioccante, no?) in Internet Explorer. Colonne di uguale altezza NON funzionano, tuttavia, e questo layout si scomporrà per larghezze della finestra molto piccole. Usatelo con prudenza.

Bene, e ora?

Benché questa particolare applicazione del Santo Graal sia abbastanza specifica, la tecnica può essere considerevolmente generalizzata. Perché non volere due colonne liquide? Percé non scambiare l’ordine delle colonne? Queste applicazioni vanno oltre lo scopo di questo articolo, ma sono ottenibili con modifiche minori. Usate il Graal con saggezza, e potrà essere per voi una particolarmente utile (e priva di confusione) aggiunta alla vostra cassetta degli attrezzi dei trucchi CSS.

Inizio della pagina   ∴   Pagina iniziale

Last site update:
20 Mar 2010, 00.51 (GMT+1)

Sito creato in sorgente
Powered by GNU-Emacs Logo GNU-Emacs

Pagine visitate:
Online:

Dài visibilità al mio sito votandomi sulle top 100: ci metti poco e non ti costa nulla!

Votatemi sulla Heracleum Top Sites
Convalidato!
W3CCSS 3
W3CXHTML 1.0
DIVTABLE FREE

Google logo
Search WWW Search pietrovischia.altervista.org

Creative Commons License
This work is copyright © Pietro Vischia, 2005, and is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.