Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

Posizionare il Box Model.

Abbiamo visto nella lezione precedente che un box è praticamente un contenitore di codice html che inserito in un punto qualsiasi della pagina ne segue il suo flusso naturale generando un ritorno a capo come tutti gli elementi di blocco, ne consegue che più box sarebbero disposti sempre e solo verticalmente, uno di seguito all'altro. A causa di questa caratteristica diventerebbe impossibile creare dei layout elaborati usando più box senza fare uso di una proprietà dei fogli di style dal nome position che permette di posizionare il box in modo diverso da quello naturale.

Gli attributi ammessi per la proprietà position sono: static, relative, absolute e fixed.

Vediamoli per capire bene a cosa servono.

static è il posizionamento predefinito, quello naturale, che segue il flusso insieme ad altri oggetti nella disposizione della pagina. Il suo posizionamento è nel punto preciso in cui viene creato o richiamato.

blocco 1 inserito nel normale flusso
blocco 2 inserito subito dopo l'istruzione per il blocco 1
blocco 3 inserito subito dopo l'istruzione per il blocco 2

Notate come i blocchi inseriti nella pagina seguono il flusso naturale del codice e si dispongono verticalmente pur non avendo inserito alcun <br /> per il ritorno a capo. Questo perchè il tag <div>, usato per creare il blocco, così come tutti gli altri elementi di blocco, provoca automaticamente un ritorno a capo.

Non avendo impostato alcun margin i bordi risultano incollati fra loro. L'esempio sotto usa la stessa definizione di box ma con un margin impostato a 5 pixel. Ricordate quanto detto nella lezione precedente riguardo al box model? si fa riferimento al box interno per cui i 5 pixel che distanziano i vari box sono 3 pixel più 2 pixel esterni che fanno da bordo.

blocco 1 con margin, inserito nel normale flusso
blocco 2 con margin, inserito subito dopo l'istruzione per il blocco 1
blocco 3 con margin, inserito subito dopo l'istruzione per il blocco 2

questo il codice per definirlo nel foglio di style CSS.

#box1 {
width: 400px;
height: 20px;
border: solid 1px;
margin: 5px;
color: black;
background-color: #ffff99;
}

Il codice sopra si riferisce al box1 ma la definizione per gli altri due box è praticamente la stessa, varia soltanto per il nome assegnato: in questo caso #box2 e #box3 ed il relativo colore di sfondo: background-color.

L'attributo margin accetta anche come valore la parola auto che posizionerebbe il blocco al centro del flusso dal momento che assegnerebbe automaticamente lo stesso margine ad entrambi i lati.

 blocco 1 con margin auto inserito nel normale flusso

Da notare che per avere un bordo dichiarato nel foglio di style non basta specificare il solo valore di spessore, in questo esempio 1px, si deve specificare anche un attributo che ne identifica il tipo, in questo esempio solid diversamente il bordo non sarà visibile.

Per richiamare i vari box all'interno del codice html:

<div id="box1">blocco 1 con margin inserito... </div>
<div id="box2">blocco 2 con margin inserito... </div>
<div id="box3">blocco 3 con margin inserito... </div>

Quando il contenuto del box supera le sue massime dimensioni, per esempio inserendo un'immagine più larga, si hanno comportamenti differenti a seconda del tipo di browser, purtroppo ognuno di questi interpreta a modo suo, per esempio alcuni allargano il box per adattarlo alla dimensione del contenuto, altri fanno uscire l'immagine dal box stesso.

E' possibile regolare questo comportamento al fine di unificarlo su tutti i browser grazie alla proprietà overflow che gestisce le barre di scorrimento sul box, le stesse che si trovano presenti in una pagina web che avesse contenuti più larghi e/o più lunghi della finestra del browser.
Questi i possibili attributi: visible (predefinito), hidden (nascosto), auto (soltanto se necessario) scroll (sempre anche se non necessitano).

esempio overflow visible
overflow visible: predefinito, interpretato in modi diversi a seconda del tipo di browser.
esempio overflow hidden
overflow hidden: nascondi le barre e taglia l'immagine alle dimensioni max del blocco.
esempio overflow auto
overflow auto: taglia l'immagine ed inserisci soltanto le barre di scorrimento necessarie. (orizz. o vertic.)
esempio overflow scroll
overflow scroll: taglia l'immagine ed inserisci entrambe le barre di scorrimento anche se non necessarie.

relative è il posizionamento modificato rispetto alla posizione predefinita, praticamente un offset che consente di spostare il box rispetto alla sua naturale origine senza che questo spostamento incida o alteri il posizionamento degli altri elementi (oggetti) facenti parte della stessa pagina.

blocco 1 con margin inserito nel normale flusso
blocco 2 position relative 12 px top e 20 px left
blocco 3 con margin inserito subito dopo l'istruzione per il blocco 2

Notate come il blocco 2 sia spostato di 12 pixel a partire dall'alto e di 20 pixel a partire dalla sinistra rispetto alla sua posizione naturale (visibile nell'esempio precedente) e senza che gli altri due box subiscano alcuna variazione di posizione, questo perché position relative agisce solo sul box che ne fa uso senza alterare il normale flusso. E' possibile specificare la posizione relative usando gli attributi top, left, bottom e right rispettivamente per posizionarlo a partire dall'alto, da sinistra, dal basso e da destra. Sono ammessi anche numeri negativi che posizionerebbero il blocco in direzione contraria da quella dei numeri positivi.

Questo il codice nel css per definirlo.

#box2 {
position: relative;
top: 12px;
left: 20px;
width: 450px;
height: 20px;
border: solid 1px;
margin: 5px;
color: black;
background-color: #ffccff;
}

A questo punto il blocco 2 risulta sovrapposto al blocco 3 oscurandolo in parte, è possibile stabilire l'ordine di sovrapposizione con la proprietà z-index che accetta solo valori numerici positivi, il numero più alto è quello in primo piano e copre il numero più basso.

blocco 1 con margin inserito nel normale flusso
blocco 2 position relative 12 px top e 20 px left
blocco 3 con z-index superiore al blocco 2

Adesso il blocco 3 risulta sovrapposto al blocco 2 perchè ha un valore z-index di 1 che è superiore al valore dello z-index (di default impostato a 0) del blocco 2.

questo il codice nel css per definirlo.

#box3 {
position: relative;
z-index:
1;
width: 450px;
height: 20px;
border: solid 1px;
margin: 5px;
color: black;
background-color: #ccffff;
}

absolute è il posizionamento assoluto, cioè è possibile posizionare il blocco in un qualsiasi punto della pagina, a differenza del posizionamento relativo che, come abbiamo visto, non alterava gli altri oggetti pur condizionandoli con la sua presenza, absolute farà in modo che il blocco così definito risulti come se non facesse parte della stessa pagina, praticamente non inciderà in alcun modo con gli altri oggetti, una specie di livello da sovrapporre alla pagina stessa.

E' possibile specificare la posizione absolute usando gli stessi attributi visti per relative top, left, bottom e right, rispettivamente per posizionarlo a partire dall'alto, da sinistra, dal basso e da destra ma questa volta il punto di riferimento è il primo blocco progenitore non statico e se non esiste all'elemento <html> praticamente i margini della finestra del browser.

Se non viene specificato alcun valore di posizionamento il blocco assumerà valore assoluto riferendosi al punto in cui viene inserito dal normale flusso del codice. Su questa pagina è possibile vedere un esempio.

fixed Non supportato dai browser IE è simile al posizionamento assoluto ma il riferimento è sempre e solo alla finestra del browser e quando la pagina scorre i box così definiti restano fissi nella loro posizione specificata.

Nella prossima lezione dedicata sempre al box model vedremo come centrarlo automaticamente qualunque sia la dimensione della finestra del browser, praticamente un box liquido.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi