Alla scoperta di un nuovo modo di costruire layout CSS, senza float e posizionamenti assoluti.
A List Apart ha pubblicato un articolo che propone una nuova tecnica di posizionamento con i CSS, chiamata Faux Absolute Positioning. In pratica è un’alternativa ai due metodi più diffusi, il posizionamento con i float e quello assoluto.
Le ragioni della ricerca di un nuovo metodo per la realizzazione di layout CSS sono nella necessità di risolvere problematiche complesse e non così frequenti: si parla di siti dinamici, dove gli utenti possono magari decidere la posizione degli elementi nella pagina, con tutte le difficoltà che ne derivano.
Proprio per questo la tecnica del Falso Posizionamento Assoluto cerca di unire i pregi dei metodi conosciuti, eliminandone i difetti. In realtà non esattamente così, ma approfondiamo l’analisi per capire meglio.
La tecnica
Il codice HTML utilizzato deve servire a costruire una struttura a griglia, con linee orizzontali ed item (che rappresentano le colonne), in questo modo:
<div class="line">
<div class="item" id="item1">
<p>contenuto</p>
</div>
<div class="item" id="item2">
<p>contenuto</p>
</div>
<div class="item" id="item3">
<p>contenuto</p>
</div>
</div>
Sulla tecnica originale è presente un altro div intorno al contenuto, ma ai fini del layout non è rilevante.
Il CSS relativo invece è il seguente:
.line {
float: left;
width: 100%;
display: block;
position: relative;
}
.item {
position: relative;
float: left;
left: 100%;
}
Infine per posizionare ogni item, serve una dichiarazione come questa:
#item1 {
margin-left: -100%;
width: 20%;
}
In pratica per ogni item la posizione viene assegnata tramite un margin-left negativo. Per chiarirvi le idee, ho realizzato un esempio di layout a 3 colonne costruito in questo modo.
Considerazioni
Il vantaggio della tecnica è che ogni elemento viene posizionato facendo riferimento ad un punto ben preciso, cioè il margine destro del layout. Questo è un punto di forza preso direttamente dal posizionamento assoluto, con il vantaggio che gli elementi non vengono estratti dal normale flusso del codice, ed inoltre il contenuto continua a definirne l’altezza, cosa che non succede utilizzando i float.
Il risultato è stabile, rimane valido sia ingrandendo il testo che ridimensionando la finestra, e funziona su tutti i browser senza richiedere nessun hack, nemmeno per IE6.
Sembrerebbe un’ottima soluzione quindi, ma i difetti non mancano. Il più evidente è il gran numero di div utilizzati: se dovete realizzare un layout semplice a 2 o 3 colonne, non usate questo metodo e magari seguite gli esempi di Layout Gala di Alessandro Fulciniti.
Un altro problema riguarda le unità di misura, che devono essere sempre le stesse per posizionare gli elementi. Non potrete combinare percentuali, em, e pixel.
In conclusione, non vedo molte applicazioni per questa tecnica nel lavoro di tutti i giorni, ma per particolari esigenze potrebbe essere un’alternativa da considerare. Tenetela presente per i momenti di difficoltà, almeno finchè non arriveranno i CSS3 con il modulo per i layout a colonne.
Io aspetto l’advanced layout module di css3… e speriamo che tutti i browser si adeguino!! parlo soprattutto per Mr.Microsoft!
Curiosità:
Cosa significa più precisamente questa frase?
E’ una soluzione molto interessante, bisogna studiarsela bene.. ad un primo impatto sembra macchinosa, ma proviamola..
Non riesco a vedere i benefici di un layout fatto in questo modo, al momento. Quello che salta subito agli occhi, leggendo il codice, è un uso massiccio di div (che Zeldman definisce “divite acuta”). Non credo che lo utilizzerei anche se, fino ad ora, non ho mai avuto problemi con i float, nonostante si debba scrivere un foglio di stile con qualche rigo solo per IE.
Scusate, ma perchè dovrebbe esserci un eccessivo uso di div? Per un semplice layout a 2/3 colonne, l’ header lo si realizza normalmente, il corpo della pagina utilizzando questa tecnica, con il div.line che funge da contenitore per il corpo, le 2/3 colonne ognuna racchiusa in un div.item ed il footer lo si fa come si vuole. Non vedo tutto questo spreco, anzi secondo me può essere una buona alternativa alle false colonne, che con i layout elastici a volte danno alcuni problemi.
@Paolo: quando usi la proprietà float su un div, l’altezza di quest’ultimo non viene più determinata dal suo contenuto, è necessario usare un elemento con proprietà clear o altri stratagemmi.
Mi sbaglio o il contenuto di #item3 deve essere sufficientemente esteso in modo da non far risalire il footer che in tal caso va a coprire #item2?
@Loris: no, la posizione del footer è definita dalla colonna più alta, non c’è alcun vincolo in questo senso. Se provi con Firebug a modificare la lunghezza dei testi dell’esempio vedrai che non ci sono problemi.
Vero! Ma anche prima avevo provato …???
Grazie
Beh effettivamente neanche io vedo questo uso eccessivo di div, anzi, mi sembra il minimo sindacale per realizzare un layout complesso a 2/3 colonne.
La tecnica pare supportare qualsiasi ordine di colonna “2,1,3” , “2,3,1” ecc. perchè il posizionamento avviene semplicemente con il margine e la larghezza della colonna.
Ecco l’ordinamento “2,1,3” direttamente da firebug:
#item1 {
margin-left:-80%;
padding:1%;
width:54%;
}
#item2 {
margin-left:-100%;
padding:1%;
width:20%;
}
#item3 {
margin-left:-20%;
padding:1%;
width:18%;
}
Sono d’accordo con marco e davide.. nemmeno io vedo questo spreco di div.
Ma sinceramente preferisco il posizionamento standard con i float. I problemi di altezza si risolvono abbastanza agilmente, ma soprattutto il codice è molto più leggibile..
Forse sono l’unico a trovarla poco amichevole, ma il codice css messo così mi “parla” poco..
Devo dire che questo esempio rispecchia molto ciò che generalmente uso per creare layout a più colonne.
In pratica genero un div contenitore con float:left in cui all’interno inserisco i vari div (1 per colonna) con float:left e ne definisco la posizione semplicemente con l’ordine con cui li dichiaro nella pagina html.
Quindi inserisco un div con clear:both per sistemare l’altezza e chiudo il div contenitore.
Mi sembra molto simile come cosa…
@Art.ika:
La differenza con il tuo metodo è che non viene utilizzata la proprietà float. In questo modo non c’è bisogno di aggiungere div con clear: both per dare un altezza al contenitore.
Come ho scritto, ci sono pregi e difetti da considerare, io al momento continuo a ritenere gli esempi di Layout Gala una delle soluzioni migliori.
p.s.:l’esempio che avevi postato non appare, se inserisci direttamente del codice html viene interpretato da WordPress.
@Tom
Si, immaginavo che il mio esempio non si vedesse per quel motivo.
“La differenza con il tuo metodo è che non viene utilizzata la proprietà float.”
In realtà li stai utilizzando attraverso le classi “item” e “line”.
Ma forse ho capito male cosa intendi…
@Art.ika:
Sì hai ragione, i float vengono utilizzati, ma il posizionamento non si basa solo su quelli. Questo metodo è stato presentato come una combinazione di float e posizionamento assoluto, senza avere i vincoli e le limitazioni di entrambi.
@Tom
Anche a me aveva lasciato perplesso la tua frase e la tua risposta a Paolo () mi sorprende nuovamente…
A me risulta che impostare il float (a left o right) ad un qualsiasi elemento continui a lasciare che l’altezza dell’elemento dipenda dal suo contenuto.
Complimenti comunque per la chiara spiegazione della tecnica, Andrea ;)
Ok, rileggendoti penso che tu volessi dire che, applicato il float su un elemento, è l’elemento che lo contiene a non avere più l’altezza dipendente dal contenuto…. A meno di clear,overflow+hasLayout o altro.
Right? :)
@Andrea:
Esatto, mi sono espresso male, ma intendevo proprio l’elemento contenitore.
Ciao a tutti
ho appena utilizzato questo tipo di layout su due siti a 3 colonne e mi sono trovato benissimo! In un colpo solo ho risolto diversi problemi:
1) la colonna di sinistra può essere + corta del contenuto
2) la colonna di destra la posso posizionare dove voglio su tutti i browser nella stessa posizione
3) non ho + il problema della risoluzione sballata a 1024×768
ora xrò devo rifare il mio sito e sto cercando un layout a 2 colonne fisso a posizionamento centrale. Potete darmi un consiglio?
Pier
Ciao Pier, io ti consiglio di seguire il suggerimento che avevo espresso anche nel post: scegli il tuo layout tra quelli di Layout Gala, sono ben fatti e solidi.
Grazie 1000!
Ciao
Ciao a tutti
ho utilizzato il layout “Falso Posizionamento Assoluto” utilizzando 3 colonne.
Guardate questa pagina:
http://www.pietracalcio.it/home.asp?codice_contenuti=home
quando con Internet Explorer ridimensiono la finestra del browser il contenuto della pagina non segue il flusso del layout, lo stesso quando apro la finestra a larghezza massima.
Come posso risolvere?
…ovviamente con Firefox, Opera e gli altri browser il tutto non accade funzionando correttamente!
Pier
non so proprio come risolvere.
ma questo è un layout a 3 colonne…ma non è il migliore di tutti il “Falso Posizionamento Assoluto” x 3 colonne o 5?
@Pier: ti conviene seguire il consiglio che ti ho dato nel commento 20 ;)
@Pier: leggendo il paragrafo “Considerazioni”, vedrai che questa tecnica è sperimentale e non esente da difetti. Per layout a 2 o 3 colonne resta sempre valido il consiglio di Layout Gala.
Ciao Tom ho risolto! Ho tolto involontariamente “position:relative;” all’interno di “.line”.
Pier
Anche a me sembra un buon metodo…
è vero crea un div superfluo, ma, spesso si deve crearlo comunque, ad esempio per centrare tutto il contenuto (anche se è vero che il contenuto può essere centrato dando una larghezza al body coi margin auto).
bisognerà provarlo per vedere se porta realmente dei vantaggi… ma sembra veramente una buona idea.
ne approfitto per chiedervi una cosa sulla discussione sul float che è nata sopra:
forse si intendeva dire che il float di un elemento annulla l’altezza dell’elemento che lo contiene?
mettiamo ad esempio che io abbia un contenitore con un immagine di sfondo; all’interno del contenitore ci sono 2 colonne flottanti; a questo punto l’immagine di sfondo non la vedo più, perchè l’altezza del contentitore diventa nulla.
la soluzione è rendere flottante anche il contenitore.
è la soluzione migliore? ci sono anche altre alternative?
@cube: esatto, è quello che diceva Andrea nel commento 17, è l’elemento contenitore che perde l’altezza. I rimedi sono vari, oltre a quello che dici tu puoi inserire un elemento con clear prima della chiusura del contenitore, o usare overflow: auto sul contenitore (ma con ie6 dà problemi).
si giusto… a volte uso anche l’elemento clear.
proverò anche con l’overflow anche se il fatto che dia problemi con ie 6 è un limite…
ma non ci siamo ancora liberati di ie6?
voi testate ancora i css per questo browser? io per il momento si, purtroppo
@cube: puoi leggere qualcosa sull’argomento ie6 in questo articolo e soprattutto nei relativi commenti. Personalmente inizio a non preoccuparmi più dei dettagli su questo browser, basta che il sito sia leggibile e navigabile.
ottimo. grazie dell’indicazione. ho segnalato l’articolo anche su twitter.
Il suo esempio invece di chiarire le idee le confonde: infatti ha poco a che vedere con il layout di Eric Sol, dove il contenuto centrale è elastico sino a sparire del tutto e le colonne laterali invece sono fisse.
http://fapdemo.solide-ict.nl/
@Mauro: è solo un esempio differente, anche sull’articolo di A List Apart c’è una demo che usa solo percentuali.