CSS/Posizionamento: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
posizionamento |
float e clear |
||
Riga 35:
== Usare il floating ==
Il ''[[w:floattante|floating]]'' è una tecnica CSS che permette agli elementi HTML di allinearsi a destra o a sinistra della pagina (o dell'elemento contenitore). La caratteristica più interessante è però la possibilità che gli elementi della pagina scorrano a destra o a sinistra dell'oggetto in questione. Il funzionamento è analogo a quello della proprietà <code>align</code> dell'elemento HTML <code>img</code>. Può assumere i valori '''left''', '''right''' e '''none'''. Vediamo due esempi:
<div style="width:49%; float:left; ">
<div style="width:200px; float:left; border:1px solid black;text-align:left; margin:3px; padding:2px;">Questo elemento <code>div</code> è flottante a sinistra (<code>float: left;</code>) e il paragrafo si dispone alla sua destra</div>
<p>
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni... (da ''I promessi sposi'', A. Manzoni)</p>
</div>
<div style="width:49%; float:right;">
<div style="width:200px; float:none; border:1px solid black; text-align:left; margin:3px; padding:2px;">Questo elemento <code>div</code> '''non''' è flottante (<code>float: none;</code>) e il paragrafo non si dispone alla sua destra</div>
<p>
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni... (da ''I promessi sposi'', A. Manzoni)
</p>
</div>
Vediamo alcuni dettagli su questa tecnica:
*il ''floating'' può essere usato solo su elementi con una larghezza fissa (impostata dalla proprietà <code>width</code> oppure, ad esempio per le immagini, dalle dimensioni in pixel del file di origine)
*la proprietà <code>float</code> non viene considerata se l'elemento ha un posizionamento assoluto o fisso
*gli elementi flottanti diventano necessariamente elementi ''block''.
=== La proprietà clear ===
La proprietà <code>clear</code> sposta l'elemento a cui viene applicata sotto a tutti gli elementi flottanti dal lato speficicato. Può assumere i valori '''none''', '''left''', '''right''' e '''both''' (vengono considerati tutti gli elementi flottanti e a destra e a sinistra).
Vediamo un esempio:
<div style="width:49%; float:left; ">
<div style="width:200px; float:left; border:1px solid black;text-align:left; margin:3px; padding:2px;">Questo elemento <code>div</code> è flottante a sinistra (<code>float: left;</code>) e il paragrafo si dispone alla sua destra</div>
<p style="clear:left;">
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni... (da ''I promessi sposi'', A. Manzoni)</p>
</div>
In questo caso il paragrafo, invece di disporsi a destra del blocco, si dispone allineandosi con il suo lato inferiore: ciò è causato dall'uso della dichiarazione CSS <code>clear: left</code>. L'eeffetto è simile a quello del blocco senza floating ma è stato ottenuto con due modalità differenti. Ovviamente la proprietà <code>clear</code> risulta comodo con molti elementi flottanti nella pagina.
[[Categoria:CSS|Posizionare gli elementi nella pagina]]
| |||