Stardust Wordpress Theme - Download
feed
classifica commentatori
categorie
archivio
risorse esterne
extra
Giu 23
Falso Posizionamento Assoluto
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.
23 Giugno 2008 alle 16:27
Io aspetto l’advanced layout module di css3… e speriamo che tutti i browser si adeguino!! parlo soprattutto per Mr.Microsoft!
24 Giugno 2008 alle 09:37
Curiosità:
Cosa significa più precisamente questa frase?
24 Giugno 2008 alle 09:46
E’ una soluzione molto interessante, bisogna studiarsela bene.. ad un primo impatto sembra macchinosa, ma proviamola..
24 Giugno 2008 alle 12:48
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.
24 Giugno 2008 alle 21:03
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.
24 Giugno 2008 alle 21:21
@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.
25 Giugno 2008 alle 16:30
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?
25 Giugno 2008 alle 17:47
@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.
25 Giugno 2008 alle 18:22
Vero! Ma anche prima avevo provato …???
Grazie
26 Giugno 2008 alle 10:41
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%;
}
30 Giugno 2008 alle 10:54
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..
16 Luglio 2008 alle 17:51
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…
16 Luglio 2008 alle 19:28
@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.
17 Luglio 2008 alle 11:58
@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…
17 Luglio 2008 alle 12:57
@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.