Personalizza il sito:

pannello di controllo

Sei qui: Homepage » css, web design » Falso Posizionamento Assoluto

giu 23 2008

34

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.

Usi Twitter?

Twitter

Ti è piaciuto questo post?

Segnalalo su Twitter, aiutami a spargere la voce!

 

Classificato in css, web design.

34 Commenti a “ Falso Posizionamento Assoluto ”

  1. 23 giugno 2008 alle 16:27

    Laura web designer

    Io aspetto l’advanced layout module di css3… e speriamo che tutti i browser si adeguino!! parlo soprattutto per Mr.Microsoft!

  2. 24 giugno 2008 alle 09:37

    Paolo

    Curiosità:

    il contenuto continua a definirne l’altezza, cosa che non succede utilizzando i float

    Cosa significa più precisamente questa frase?

  3. 24 giugno 2008 alle 09:46

    Angelo

    E’ una soluzione molto interessante, bisogna studiarsela bene.. ad un primo impatto sembra macchinosa, ma proviamola..

  4. 24 giugno 2008 alle 12:48

    Floyd

    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.

  5. 24 giugno 2008 alle 21:03

    Davide

    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.

  6. 24 giugno 2008 alle 21:21

    Tom

    @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.

  7. 25 giugno 2008 alle 16:30

    Loris

    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?

  8. 25 giugno 2008 alle 17:47

    Tom

    @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.

  9. 25 giugno 2008 alle 18:22

    loris

    Vero! Ma anche prima avevo provato …???
    Grazie

  10. 26 giugno 2008 alle 10:41

    Marco Sagliocco

    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%;
    }

  11. 30 giugno 2008 alle 10:54

    davide

    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..

  12. 16 luglio 2008 alle 17:51

    Art.ika

    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…

  13. 16 luglio 2008 alle 19:28

    Tom

    @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.

  14. 17 luglio 2008 alle 11:58

    Art.ika

    @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…

  15. 17 luglio 2008 alle 12:57

    Tom

    @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.

  16. 7 settembre 2008 alle 17:34

    Andrea

    @Tom
    Anche a me aveva lasciato perplesso la tua frase il contenuto continua a definirne l’altezza, cosa che non succede utilizzando i float e la tua risposta a Paolo (quando usi la proprietà float su un div, l’altezza di quest’ultimo non viene più determinata dal suo contenuto) 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 ;)

  17. 7 settembre 2008 alle 17:41

    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? :)

  18. 7 settembre 2008 alle 18:45

    Tom

    @Andrea:

    Esatto, mi sono espresso male, ma intendevo proprio l’elemento contenitore.

  19. 27 gennaio 2009 alle 12:38

    Pier

    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

  20. 27 gennaio 2009 alle 14:20

    Tom

    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.

  21. 27 gennaio 2009 alle 18:22

    Pier

    Grazie 1000!

    Ciao

  22. 9 febbraio 2009 alle 12:16

    Pier

    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

  23. 9 febbraio 2009 alle 18:59

    Pier

    non so proprio come risolvere.

  24. 9 febbraio 2009 alle 19:13

    Pier

    ma questo è un layout a 3 colonne…ma non è il migliore di tutti il “Falso Posizionamento Assoluto” x 3 colonne o 5?

  25. 9 febbraio 2009 alle 19:06

    Tom

    @Pier: ti conviene seguire il consiglio che ti ho dato nel commento 20 ;)

  26. 10 febbraio 2009 alle 09:08

    Tom

    @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.

  27. 11 febbraio 2009 alle 12:00

    Pier

    Ciao Tom ho risolto! Ho tolto involontariamente “position:relative;” all’interno di “.line”.

    Pier

  28. 20 gennaio 2010 alle 16:43

    cube

    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?

  29. 20 gennaio 2010 alle 17:14

    Tom

    @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).

  30. 20 gennaio 2010 alle 17:23

    cube

    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

  31. 21 gennaio 2010 alle 08:40

    Tom

    @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.

  32. 21 gennaio 2010 alle 09:15

    cube

    ottimo. grazie dell’indicazione. ho segnalato l’articolo anche su twitter.

  33. 30 marzo 2010 alle 03:14

    Mauro

    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/

  34. 30 marzo 2010 alle 08:42

    Tom

    @Mauro: è solo un esempio differente, anche sull’articolo di A List Apart c’è una demo che usa solo percentuali.

Scrivi un commento

»
«

Menu secondario

feed

801 lettori

Iscriviti al Feed RSS

categorie

archivio

risorse esterne

extra