NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo

Capitolo 6: Posizionamento e margini: position, relative, absolute, float, margin, padding.

 

In questo capitolo tratteremo diversi argomenti legati all'aspetto visivo degli elementi: da come gestirne la spaziatura interna ed esterna a come posizionarli nel documento html.

 

 

Iniziamo con i margini, che definiscono la spaziatura esterna degli elementi, ossia quella tra il bordo di un elemento e gli elementi ad esso adiacenti.

 

 

Tale spazio può essere definito in maniera uniforme per tutti e 4 i lati dell'elemento mediante la proprietà:

margin: [vari valori possibili, vd. descrizione dopo]

o specificato separatamente per ciascun lato, scrivendo:

margin-top: [vari valori possibili, vd. descrizione dopo]

margin-bottom: [vari valori possibili, vd. descrizione dopo]

margin-left: [vari valori possibili, vd. descrizione dopo]

margin-right: [vari valori possibili, vd. descrizione dopo]

 

In tutti questi casi, i valori possibili sono:

  • valori numerici con unità di misura; es.: 10px, 6mm, ...;
  • un valore in percentuale, relativo alla larghezza del contenitore; es.: 10%, ...;
  • auto, un valore definito automaticamente dal browser (in genere, 0).

 

 

NOTA --- Di particolare importanza è la dichiarazione:

margin: 0 auto;

che consente di posizionare un elemento al centro del suo contenitore (non tutti i browser la supportano, comunque).

 

La spaziatura interna di un elemento, quella cioè che intercorre tra il bordo di un elemento e gli oggetti contenuti al suo interno, è detta invece padding.

 

Come per margin, con padding possiamo specificare i valori per i quattro lati in maniera uniforme, con:

padding: [stesse possibilità di margin]

o singolarmente, con:

padding-top: [stesse possibilità di margin]

padding-bottom: [stesse possibilità di margin]

padding-left: [stesse possibilità di margin]

padding-right: [stesse possibilità di margin]

 

Passiamo ora alla gestione del posizionamento degli oggetti; prima di parlare del posizionamento "nel" documento, comunque, ecco due proprietà utili per gestire l'aspetto di un elemento "sul" documento:

  • z-index: auto | [un valore numerico intero]

Questo comando può tornare utile nel caso di (ri)posizionamento dinamico degli elementi, in quanto determina in che ordine sovrapporli, trattandoli come dei layer (livelli); in particolare, quelli con valore più basso staranno sul fondo, "verso lo schermo", mentre quelli con valore più alto copriranno gli altri (verranno posizionati "verso l'utente").

  • visibility: visible | hidden

Con questa regola (utile in genere, come z-index, in caso di modifiche dinamiche) è possibile rendere invisibile (hidden) o mostrare (visible) un elemento.

 

Passiamo finalmente alla gestione del posizionamento degli elementi nel documento, affidata a due gruppi di regole:

  • position: static | absolute | fixed | relative

Si occupa di definire COME (rispetto a cosa, a quale punto/elemento di riferimento) un elemento verrà posizionato.

  • le proprietà top, bottom, left, right; ciascuna di queste proprietà accetta vari tipi di valori, come vedremo.

Definiscono DOVE, una volta definito il contenitore/punto di riferimento dell'elemento, posizionare l'oggetto rispetto al suo contenitore.

Inizialmente, una presentazione del genere potrà confondervi un pò, ma non preoccupatevi: a poco a poco tutto diverrà molto chiaro!

 

Iniziamo parlando di position che, come anticipato, definisce COME posizionare un elemento, o meglio: RISPETTO A COSA.

 

position ammette 4 valori, ciascuno dei quali determina, ovviamente, comportamenti differenti; eccoli:

  • static

Valore di default, indica di posizionare l'elemento seguendo il "flusso" dello stesso, specificato nella pagina html.

  • absolute

Le coordinate vengono specificate mediante le proprietà top, bottom, left, right, che identificano coordinate ben precise (vd. dopo).

Se l'elemento ha, tra "gli antenati" (dal padre in su), un antenato DIVERSO da static, allora i valori di top, bottom, left e right si riferiranno proprio a tale elemento, altrimenti il riferimento sarà costituito dall'intera finestra del browser.

In caso di scrolling, l'elemento scorrerà insieme al resto.

  • fixed

Simile ad absolute ma i valori di top, bottom, right e left (che indicano, comunque, posizioni ben precise) si riferiranno SEMPRE E SOLO direttamente alla finestra del browser.

In caso di scrolling, l'elemento NON scorrerà insieme al resto (sarà cioè fixed, appunto).

  • relative

L'elemento verrà posizionato rispetto all'elemento contenitore; in questo caso, però, i valori di top, bottom, left e right non identificheranno delle posizioni ben precise, ma un "offset", uno spostamento (orizzontale o verticale) rispetto all'elemento contenitore.

 

Le voci top, bottom, right e left, quindi, possono riferirsi a coordinate assolute o a spostamenti relativi (offset); in entrambi i casi, per ciascuna proprietà, sarà possibile specificare come valore:

  • un valore numerico con unità di misura; es.: left: 10px; right: 1cm;
  • un valore in percentuale, in riferimento all'altezza (top e bottom) o alla larghezza (right, left) dell'elemento contenitore; es.: top: 10%;
  • il valore auto; es.: top: auto.

 

Prima di chiudere questo capitolo, è necessario parlare di altre due proprietà:

  • float: left | right | none

Permette di spostare un elemento su uno de lati del contenitore; a meno di non specificare una regola clear (vd. dopo), gli altri contenuti "avvolgeranno" l'elemento, "scorrendogli intorno" sul lato opposto rispetto a quello specificato con float.

E' buona norma, quando si imposta float diverso da none, specificare esplicitamente una dimensione orizzontale (con width) per l'elemento, per evitare "effetti strani" in fase di visualizzazione dello stesso.

  • clear: left | right | both | none

Tale proprietà serve ad impedire che vengano posizionati, ai lati di un elemento "floattante" (ossia con float diverso da none), altri elementi; ad esempio, con:

float: right

viene impedito il posizionamento di oggetti a destra dell'elemento.

 

 

 
Vai all'inizio della pagina