CSS/Posizionamento: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m formattazione |
m +link |
||
Riga 6:
*seguendo il normale andamento della pagina previsto dall'HTML
*senza alcun legame con il resto del flusso degli elementi
*allineandosi in modo tale che gli elementi si dispongano al lato (questa tecnica, chiamata in gergo tecnico ''floating'', è simile al [[HTML/Immagini#Definire l'allineamento|funzionamento dell'attributo <code>align</code> delle immagini]])
== Posizionarsi relativamente agli altri elementi della pagina ==
Riga 37:
== Usare il floating ==
Il ''[[w:floattante|floating]]'' è una tecnica CSS che, tramite la proprietà '''float''', 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; border: 1px solid black; padding:3px; background:#eeeeee">
<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 ''[[s:I promessi sposi/Capitolo I|I promessi sposi, capitolo primo]]'', A. Manzoni)</p>
</div>
<div style="width:49%; float:right; border: 1px solid black; padding:3px; background:#eeeeee">
<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 ''[[s:I promessi sposi/Capitolo I|I promessi sposi, capitolo primo]]'', A. Manzoni)
</p>
</div>
<br style="clear: both"/>
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)
Line 54 ⟶ 55:
=== 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''' *'''both''': vengono considerati tutti gli elementi flottanti sia a destra sia a sinistra.
Vediamo un esempio:
<div style="width:49%; float:left; margin-right:10px; border: 1px solid black; padding:3px; background:#eeeeee">
<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 ''[[s:I promessi sposi/Capitolo I|I promessi sposi, capitolo primo]]'', A. Manzoni)</p>
</div>
In questo caso il paragrafo qui a fianco, 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.
<br style="clear: both" />
La proprietà <code>clear</code> è usata spesso in relazione all'elemento <code>br</code> in questo modo:
<nowiki><br style="clear: both" /></nowiki>
che interrompe il testo effettuando il clear in maniera semplice e pulita.
[[Categoria:CSS|Posizionare gli elementi nella pagina]]
| |||