CSS/Posizionamento: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
float e clear |
m formattazione |
||
Riga 9:
== Posizionarsi relativamente agli altri elementi della pagina ==
Per posizionare un elemento rispetto agli elementi della pagina secondo quanto previsto dal puro HTML, usiamo la proprietà
*'''static''' (valore di default per quasi tutti gli oggetti HTML)
*'''relative''': l'elemento è posizionato relativamente il normale flusso con l'uso di quattro proprietà (left, right, top e bottom) che assumono come valore una grandezza e specificano la distanza (positiva o negativa) dell'elemento rispetto alla posizione che questo dovrebbe occupare normalmente nella pagina. Ad esempio:
Riga 21:
* '''left''' indica la distanza del bordo sinistro dell'ogetto e il bordo sinistro della pagina
* '''right''' indica la distanza del bordo destro dell'ogetto e il bordo destro della pagina
== Posizionamento assoluto e fisso ==
Per posizionamento assoluto (dal latino ''ab solutum'', sciolto dal resto) o fisso si intende un posizionamento che non segue il flusso degli elementi. È fissato tramite la proprietà <code>position</code> con l'uso dei valori:
Line 26 ⟶ 27:
*'''fixed''': l'elemento è posizionato rispetto alla finestra sempre tramite le quattro proprietà left, right, top e bottom e non è legato dallo scorrimento della pagina. Ad esmepio:
<source lang=css>
div.bann {
position: fixed;
bottom: 0px;
right:0px;
}
</source>
Line 35 ⟶ 36:
== 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; ">
<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>
| |||