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 verticalmente uno di seguito all'altro. A causa di questa caratteristica diventa 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 scoprire e capire a cosa servono.

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

Notate come i blocchi inseriti nella pagina seguendo il flusso naturale del codice disponendosi verticalmente pur non avendo inserito alcun ritorno a capo e questo perchè il tag <div> come tutti gli elementi di blocco provoca automaticamente un ritorno a capo.

Non avendo impostato alcun margin i bordi risultano incollati fra loro. L'esempio sotto è lo stesso box con 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.

questo il codice per definirlo nel foglio di style CSS.

Il codice si riferisce al box1 ma la definizione per gli altri due box è praticamente la stessa, varia soltanto per il nome: #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.

Da notare che per avere un bordo nel foglio di style non basta specificare il solo spessore (1px), si deve specificare anche un possibile attributo che identifica il tipo, in questo caso solid o il bordo non sarà visibile.

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

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

E' possibile regolare questo comportamento al fine di unificarlo su tutti i browser grazie alla proprietà overflow che accetta i seguenti possibili attributi: visible predefinito, hidden nascosto, auto appaiono le barre di scorrimento soltanto se necessario, scroll appaiono le barre di scorrimento sempre anche se non necessitano.

overflow visible: predefinito, interpretato in modo differente dai vari browser.

overflow hidden: nascondi le barre e taglia l'immagine alle dimensioni del blocco.

overflow auto: taglia l'immagine ed inserisci soltanto le barre di scorrimento necessarie.

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.

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 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.

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.

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.

absolute è il posizionamento assoluto cioè è possibile posizionare il blocco in un qualsiasi punto della pagina, a differenza del posizionamento relativo che 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 pagina, praticamente non inciderà in alcun modo con gli altri oggetti, una specie di sovrapposizione 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 è al primo blocco progenitore non statico o 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 da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.