Corso HTML e CSS (26^ lezione): Posizionare gli elementi.

Impariamo a costruire un sito Web

Lezione 26: CSS: Il Posizionamento degli elementi.

 

Il corretto posizionamento degli elementi che costituiscono la nostra pagina è, com’è ovvio alla base della costruzione di una pagina web; però capirne i meccanismi ed ottenere buoni risultati non è poi così immediato come potrebbe sembrare.


Vediamo innanzitutto qual’è il posizionamento di default dei diversi elementi se non si interviene con il CSS.

Possiamo dividere gli elementi di una pagina html in due grandi gruppi: i blocchi e gli elementi in linea. I primi sono contenitori entro i quali possiamo racchiudere qualsiasi altro elemento, mentre i secondi possono contenere solo testo od altri elementi in-linea.


dei blocchi per esempio:
<h1>…<h6>, <p>, <div>, <ul> ecc.

Appartengono al gruppo degli elementi in linea per esempio <strong>, <span>, <a>, <em> ecc.

I blocchi vengono posizionati dal browser uno di seguito all’altro in verticale. L’eventuale distanza tra i blocchi è determinata dalla proprietà margin. Questi elementi hanno sempre un line break prima e dopo di esso.

Ad esempio se noi scriviamo:

<div style="background:red; width:200px; height:100px;">
</div>

<div style="background:blue; width:200px; height:100px;">
</div>

otterremo dal browser questa visualizzazione:

Invece, gli elementi ‘in linea’ vengono posizionati orizzontalmente uno di seguito all’altro andando a nuova riga solamente se lo spazio a disposizione nella finestra del browser non fosse sufficiente.

Come esempio scriviamo:

<p>
   <span style="background:red; padding:20px;">Questo è il contenuto su sfondo rosso</span>
   <span style="background:blue; padding:20px;">Questo è il contenuto su sfondo blue</span>
</p>

Il browser visualizzerà:

 

Questo è il contenuto su sfondo rossoQuesto è il contenuto su sfondo blue

 

Una nota: come si puo vedere i blocchi allineati in verticale hanno il margine inferiore del primo adiacente al margine superiore del secondo; non c’è alcuno spazio tra i due blocchi, mentre per default gli elementi in linea non sono adiacenti, ma separati da uno spazio.

Tenendo presente questo posizionamento di default dei singoli elementi, possiamo oravedere come forzare un posizionamento differente quando ci occorre per disegnare il nostro layout. Vediamo quindi quali sono le proprietà che possiamo assegnare ai singoli elementi della pagina per forzare un posizionamento diverso da quello di default.

position Imposta il tipo di posizionamento dell’elemento.I valori che questa proprietà può assumere sono 4:

static Questo è il default come abbiamo visto sopra.
fixed Con il valore fixed diciamo come deve essere posizionato l’elemento rispetto alla finestra del browser. Manterrà la sua posizione rispetto alla finestra del browser anche in acso di scrolling. E’ usato per esempio per avere un’immagine di sfondo fissa, che non si muova anche se si fa scrolling della pagina.
relative relativeè invece il posizionamento rispetto alla posizione di default. Se per esempio, come vedremo più sotto, spostiamo l’elemento a destra e più in basso di 100px, questo spostamento avverrà non rispetto alla finestra, ma rispetto alla posizione che l’elemento avrebbe assunto di default. Per spostare l’elemento dalla posizione di default vanno usate le proprietà:topbottom,

left e

right

che vedremo più sotto.

absolute Con questo valore assegnamo una posizione assoluta rispetto al più prossimo elemento contenitore che non abbia proprietà static. Se nessun elemento che lo contiene ha posizionamento diverso da static, il posizionamento di questo elemento sarà rispetto alla pagina html. Un elemento con posizionamento assoluto viene considerato come non esistente dal browser durante il posizionamento degli elementi di default. Il posizionamento absolute si ottiene dando praticamente le coordinate mediante le proprietà top, bottom, left e right. Gli esempi verranno forniti dopo le descrizioni di queste proprietà.
inherit Specifica che il posizionamento sarà quello ereditato dall’elemento padre.
top Questa proprietà viene usata per definire lo scostamento dall’elemento superiore, ma ha significato diverso a seconda del tipo di posizionamento.Se si ha position:absolutedefinisce lo scostamento rispetto all’elemento contenitore non static oppure, in mancanza di questo, rispetto alla pagina.Se si ha position:relative definisce lo scostamento rispetto alla posizione che l’elemento avrebbe assunto per default.

I valori che questa proprietà può assumere sono:

auto Lascia che sia il browser a calcolare la posizione. Questo è il default.
Lunghezza Imposta lo spostamento espresso in pixels, em, cm , etc. Si possono dare anche vaoli negativi che determineranno uno spostamento in senso contrario.
% Imposta lo spostamento espresso in % rispetto all’elemento contenitore. Si possono dare anche vaoli negativi che determineranno uno spostamento in senso contrario.
inherit Specifica che il valore di questa proprietà sarà ereditato dall’elemento padre.
bottomleftright Queste proprietà sono le proprietà omologhe di top, solo che si riferiscono evidentemente allo spostamente dalla parte bassa, dalla sinistra o dalla destra rispettivamente, rispetto all’elemento contenitore o rispetto alla posizione di default a seconda del valore di position. Possono assumere chiaramente anche gli stessi tipi di valori di top. Non staremo quindi a dilungarci ripetendo le stesse cose.

Vediamo qualche esempio.

nel CSS scriviamo:

#container {
   position:relative;
   left:50px;
   background-color:#fc0000;
   border:1px solid black;
   width:350px;
   height:150px;
}

#box {
   position:absolute;
   right:10px;
   top:10px;
   border:1px solid black;
   width:120px;
   height:100px;
   background-color:#EEE;
}

Nella pagina html abbiamo:

<div id="container">container
   <div id="box">box
   </div>
</div>

e il risultato sarà:

container

box

Il container ha position relative e quindi la proprietà left:50px avrà l’effetto di spostarlo verso destra di 50 pixels rispetto alla posizione che avrebbe assunto naturalmente.

Il box ha position absolute e quindi lo spostamento di 10 pixels dall’alto e da destra (top:10px e right:10px) sarà effettuato rispetto al container che è l’elemento contenitore con position diversa da static.

float Permette di gestire il posizionamento di elementi affiancati.I valori che può assumere sono:

left L’elemento sarà posizionato a sinistra. Gli altri elementi che lo seguono saranno affiancati alla sua destra.
right L’elemento sarà posizionato a destra. Gli altri elementi che lo seguono saranno affiancati alla sua sinistra.
none Il posizionamento dell’elemento avviene secondo le regole viste sopra. Questo è il default.
inherit Specifica che il valore della proprietà float verrà ereditato dall’elemento padre.

Es d’uso:

Riprendiamo l’esempio visto ad inizio lezione aggiungendo però la proprietà float

<div style="background:red;
width:150px; height:100px; float:left;">
</div>

<div style="background:blue; width:150px; height:100px;">
</div>

Il browser mostrerà:

 

I due box che normalmente sarebbero stati incolonnati uno sotto all’altro col float:left vengono affiancati

clear Specifica da quale lato dell’elemento non è più permesso alcun affiancamentoI valori che possono essere assegnati a questa proprietà sono:

left Nessun elemento affiancato è permesso sul lato sinistro dell’elemento.
right Nessun elemento affiancato è permesso sul lato destro dell’elemento.
both Il float non sarà più attivo su alcun lato dell’elemento.
none L’affiancamento resta consentito su entrambi i lati. Questo è il default.
inherit Specifica che il valore della proprietà clear verrà ereditato dall’elemento padre.

Quando si usa il float per affiancare alcuni elementi è sempre bene usare la clear per tornare alla normalità quando l’affiancamento nen deve essere più attivo. Per far questo si può aggiungere una div vuota con la sola proprietà clear in questo modo

<div type=”clear:both”></div>

display Stabilisce se e/o come un elemento debba essere mostrato.I valori che possono essere assegnati a questa proprietà sono:

none L’elemento non sarà mostrato per nulla.
block L’elemento viene trattato come un blocco, occuperà l’intera riga e l’elemento successivo sarà posizionato sotto ad esso.
inline L’elemento viene mostrato come un elemento in-line (disposizione in orizzontale sulla stessa linea. Questo è il default
inline-block L’elemento viene posizionato come un elemento in-line, ma trattato come un blocco.
inline-table L’elemento viene posizionato come un elemento in-line, ma trattato come una tabella.
list-item L’elemento viene trattato come un elemento di una lista e quindi viene mostrato un bullet prima dell’elemento.
table L’elemento viene mostrato come una tabella.
table-caption L’elemento viene mostrato come il titolo di una tabella.
table-cell L’elemento viene mostrato come una cella di una tabella.
table-column L’elemento viene mostrato come una colonna di una tabella.
table-column-group L’elemento viene mostrato come un gruppo di colonne di una tabella (come <colgroup>).
table-footer-group L’elemento viene mostrato come una riga a fondo tabella.
table-header-group L’elemento viene mostrato come una riga di testata di una tabella.
table-row L’elemento viene mostrato come una riga di una tabella.
table-row-group L’elemento viene mostrato come un gruppo di righe di una tabella.
inherit Specifica che Il valore di display sarà ereditato dall’elemento padre.

Es d’uso:

Scriviamo nel foglio CSS:

.tab-layout {
   display: table;
   width:100%;
   max-width:398px;
}

.tab-layout-row {
   display: table-row;
}

.tab_layout-cell {
   display: table-cell;
   vertical-align: top;
   border:1px solid black;
   padding:5px;
   width: 50%;
}

Abbiamo cioè definito 3 classi con le quali descriveremo la tabella fatta con i <div>. Nel corpo del foglio html andremo a descrivere la tabella ad esempio così:

<div class="tab-layout">
   <div class="tab-layout-row">
      <div class="tab_layout-cell">
         <p> Questo è il contenuto della cella 1</p>
      </div>
      <div class="tab_layout-cell">
         <p> Questo è il contenuto della cella 2</p>
      </div>
   </div>
</div>

e il risultato a video sarà:

Questo è il contenuto della cella 1

Questo è il contenuto della cella 2

overflow Stabilisce come gestire l’eventuale overflow del contenuto.I valori accettati sono:

visible La parte eccedente non viene tagliata. L’overflow si espande al di fuori del box. Questo è il default.
hidden La parte eccedente viene tagliata. L’overflow resta invisibile.
scroll L’overflow non va oltre i limiti del box, ma viene aggiunta una scroll-bar (sia orizzontale che verticale) al box in modo da rendere visibile la parte eccedente.
auto Simile a scroll. Ma la scroll-bar è aggiunta solo se serve.
inherit Specifica che Il valore di display sarà ereditato dall’elemento padre.

Es d’uso:

Scriviamo nel foglio CSS:

.scroll {
   background-color:#BBDDDD;
   width:100px;
   height:100px;
   overflow:scroll;
}

Nella pagina html scriviamo:

<div class=”scroll”>Questo testo è un po’ troppo lungo per essere ospitato nel box di dimensioni 100×100</div>

Il risultato sarà:

Questo testo è un po’ troppo lungo per essere ospitato nel box di dimensioni 100×100
overflow-xoverflow-y overflow-xstabilisce come gestire l’eventuale overflow del contenuto sui lati sinistro e destro del box.overflow-yinvece stabilisce come gestire l’eventuale overflow del contenuto sui lati alto e basso del box.I valori che possono assumere sono:

visible La parte eccedente non viene tagliata. L’overflow si espande al di fuori del box. Questo è il default.
hidden La parte eccedente viene tagliata. L’overflow resta invisibile.
scroll L’overflow non va oltre i limiti del box, ma viene aggiunta una scroll-bar (orizzontale o verticale a seconda che la proprietà sia overflow-x o overflow-y) al box in modo da rendere visibile la parte eccedente.
auto Simile a scroll. Ma la scroll-bar è aggiunta solo se serve.
no-display Se il contenuto eccede i limiti del box, l’intero box viene eliminato.
no-content Se il contenuto eccede i limiti del box, l’intero contenuto viene eliminato.

Es d’uso:

Scriviamo nel foglio CSS:

.scroll {
   background-color:#BBDDDD;
   width:100px;
   height:100px;
   overflow-x:hidden;
   overflow-y:scroll;
}

Nella pagina html scriviamo:

<div class="scroll">
   <p style="width:130px;">
   Questo testo è un po' troppo lungo per essere ospitato nel 
   box di dimensioni 100x100</p>
</div>

Il risultato sarà:

Questo testo è un po’ troppo lungo per essere ospitato nel box di dimensioni 100×100

 

Da notare che nel box 100×100 abbiamo inserito un paragrafo di larghezza fissa uguale a 130px e quindi questo determina un overflow orizzontale che però sarà nascosto per via della definizione overflow-x:hidden.

 

visibility Specifica se un elemento debba essere visibile o meno.I valori che possono essere assegnati a questa proprietà sono:

visible L’elemento è visibile. Questo è il default.
hidden L’elemento è nascosto.
collapse Valido per elementi di tipo tabella. Rimuove una riga od una colonna della tabella senza però modificare il layout della tabella. Lo spazio lasciato dalla riga/colonna rimossa è disponibile per altro contenuto.Se questa proprietà viene applicata ad un elemento non di tipo tabella si comporta come hidden.
inherit Specifica che Il valore di visibility sarà ereditato dall’elemento padre.

Es d’uso:

Scriviamo nel foglio CSS:

.tab-layout {
   display: table;
   width:100%;
   max-width:398px;
}

.tab-layout-row {
   display: table-row;
}

.tab_layout-cell {
   display: table-cell;
   vertical-align: top;
   border:1px solid black;
   padding:5px;
   width: 50%;
}

come nell’esempio che abbiamo fatto per display.

Nella pagina html scriveremo poi:

<div class="tab-layout">
   <div class="tab-layout-row">
      <div class="tab_layout-cell">
         <p> Questo è il contenuto della cella 1</p>
      </div>
      <div class="tab_layout-cell">
         <p> Questo è il contenuto della cella 2</p>
      </div>
   </div>
   <div class="tab-layout-row" style="visibility:hidden">
      <div class="tab_layout-cell">
         <p> Questo è il contenuto della cella 3</p>
      </div>
      <div class="tab_layout-cell">
         <p> Questo è il contenuto della cella 4</p>
      </div>
   </div>
</div>

praticamente 2 righe con 2 celle ciascuna.

Il risultato a video sarà:

Questo è il contenuto della cella 1

Questo è il contenuto della cella 2

Questo è il contenuto della cella 1

Questo è il contenuto della cella 2

 

Praticamente la seconda riga rimane nascosta, ma come si può notare lo spazio che questa riga occupava resta vuoto e non viene ricoperto dagli elementi successivi.

 

z-index Permette di sovrapporre elementi specificando quale è più esterno. A valore più alto corrisponde un elemento a livello superiore.I valori che questa proprietà può assumere sono:

auto L’ordine dell’elemento è quello dell’elemento padre. Questo è il default.
numero Imposta l’ordine dell’elemento. Sono ammessi numeri negativi.
inherit Specifica che il valore sarà ereditato dall’elemento padre.

Es d’uso:

Scriviamo nel CSS:

.image {
   position:relative;
   left:0px;
   top:0px;
}

h2 {
   position:absolute;
   left:0px;
   top:0px;
   z-index:2;
}

Nella pagina scriviamo:

<div class="image">
   <img src="logo.png" width="112" height="112" alt="logo" />
   <h2>Questo è il nostro logo</p>
</div>

Il risultato a video sarà:

logo

Questo è il nostro logo

clip Permette di ritagliare un elemento che abbia position:absolute. Non può coesistere con la proprietà overflow:visible.I valori che possono essere assegnati a questa proprietà sono:

forma Va indicato come vada ritagliato l’elemento. Può assumere solamente il valore: rect (top, right, bottom, left) [vedi esempio].
auto Nessun ritaglio. Questo è il default.
inherit Specifica che Il valore di clip sarà ereditato dall’elemento padre.

Es d’uso:

Scriviamo nel foglio CSS:

.image {
   position:absolute;
   clip:rect(0px,60px,120px,0px);
}

Nella pagina html scriveremo poi:

<img class=”image” src=”logo.png” width=”112″ height=”112″ alt=”logo” />

Il risultato a video sarà:

logo

 

2 thoughts on “Corso HTML e CSS (26^ lezione): Posizionare gli elementi.”

  1. Grazie per questo esauriente post. Certo che ci sono un sacco di cose da imparare, ma come faremo a rimanere aggiornati su tutto senza articoli come questo. Grazie ancora per il tuo prezioso aiuto.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.