Nello scorso articolo sui fogli di stile abbiamo visto come sia possibile controllare la formattazione del testo. In questo articolo andremo oltre iniziando a definire il layout di pagina, ossia come ordinare i vari elementi che compongono una pagina web. Infatti ci occuperemo delle formattazioni applicabili agli elementi in blocco della pagina. Queste sono le basi per la costruzione di layout con i CSS.
Gli elementi della pagina
I CSS permettono di lavorare in modo molto preciso sui margini e i bordi degli elementi in blocco che vengono visualizzati all’interno di box. Ogni box ha delle proprietà che si possono dividere in sei categorie:
- le proprietà dei margini (margin): assegnano un bordo esterno al box, quindi la distanza del box dagli elementi che lo circondano;
- le proprietà di riempimento (padding): assegnano al box uno spazio interno che separa il contenuto dai margini del box stesso. Se è definito un bordo, aumentando i valori di queste proprietà si aumenta lo spazio fra il bordo stesso e il contenuto;
- le proprietà dei bordi (border): definiscono le linee grafiche intorno al box;
- le proprietà relative alle dimensioni;
- le proprietà relative all’allineamento: non solo l’allineamento orizzontale visto per il testo nello scorso articolo, ma anche l’allineamento verticale;
- colori e sfondo.
Possiamo utilizzare queste proprietà per quasi tutti gli elementi in blocco. Per la creazione dei layout si ricorre spesso a elementi <div>. Cominciamo dalle proprietà più semplici, ossia quelle che impostano le dimensioni di un elemento. Si tratta di height e width, che richiedono un valore numerico espresso con le solite unità di misura che abbiamo visto nell’articolo intitolato “Introduzione ai CSS“.
Per la larghezza, è anche possibile assegnare alla proprietà width il valore auto. In questo caso, la larghezza dell’elemento sarà calcolata in base a quella del blocco contenitore, meno la dimensioni dei bordi, del margine e del padding (di queste proprietà parleremo tra poco).
Esistono poi vari attributi per margini, bordi e riempimento. Cominciamo dalla possibilità di definire la distanza del testo dal margine. Le proprietà disponibili sono:
- margin-left: per definire il margine sinistro. I valori per tutti i tipi di margine sono espressi in punti, pollici, centimetri o pixel;
- margin-right: per il margine destro;
- margin-top: per il margine superiore;
- margin-bottom: per il margine inferiore.
I valori accettati sono numeri con le relative unità di misura. È possibile scrivere i valori di queste proprietà in forma ridotta, così:
{margin: 10px 20px 30px 90px;}
Il browser riferisce questi valori, nell’ordine, al margine superiore (margintop), al margine destro (margin-right), al margine inferiore (margin-bottom) e al margine sinistro (margin-left). Se ne vengono forniti solo due o tre, quelli mancanti vengono automaticamente assegnati in base al valore del lato opposto regolarmente impostato.
È anche possibile impostare velocemente un solo valore per tutti e quattro i margini, così:
{margin: 5%;}
Se usate la proprietà margin per il tag <img> potete distanziare gli elementi circostanti dall’immagine, ottenendo un effetto analogo a quello che si può avere con gli attributi XHTML vspace e hspace, che sono però deprecati.
Per impostare la distanza del testo di un elemento dai suoi stessi bordi, occorre usare la proprietà padding, o meglio:
- padding-top;
- padding-bottom;
- padding-right;
- padding-left.
Questi attributi indicano la distanza tra i lati del box e gli elementi al suo interno. In altre parole, hanno una funzione opposta a quella vista in precedenza per l’attributo margin. Come per l’attributo margin, anche i quattro valori visti in precedenza possono essere definiti con un solo attributo padding. Quando viene impostato questo valore, il browser assume come ordine il primo valore di riempimento in alto (padding-top), il destro (padding-right), l’inferiore (padding-bottom) e il sinistro (padding-left). Se ne vengono forniti solo due o tre, quelli mancanti vengono assegnati automaticamente in base al valore del lato impostato.
Infine, passiamo a occuparci dei bordi. È possibile impostarne spessore, linea e colore. Per quanto riguarda lo spessore, possiamo usare le proprietà:
- border-top;
- border-bottom;
- border-right;
- border-left.
Queste proprietà devono assumere un valore numerico e possono essere scritte in forma “abbreviata”, come quelle relative ai margini e al padding.
Quando impostate larghezza, altezza, margini e padding, ricordate che dovete sempre fare in modo che i conti tornino, soprattutto se l’elemento su cui state lavorando è contenuto in un altro. La somma delle dimensioni dell’elemento contenuto non può essere superiore a quella dell’elemento contenitore. Per trovare le misure “corrette” dovrete fare un po’ di prove, perché non tutti i browser si comportano alla stessa maniera. Alcuni includono il padding nella somma delle dimensioni per calcolare la larghezza complessiva, altri no.
Per quanto riguarda i bordi, è anche possibile definirne la dimensione, o meglio lo spessore. Utilizzeremo le proprietà border-top-width, borderbottom-width, border-right-width e border-left-width. Queste proprietà possono assumere un valore numerico oppure i valori predefiniti:
- thin: per un bordo sottile;
- medium: per un bordo medio;
- thick: per un bordo spesso.
Se volete che tutti i bordi abbiano lo stesso spessore potete usare la notazione abbreviata border:spessore (per esempio, {border: thick;}).
Con la coppia proprietà-valore border:none usata per un’immagine, potete eliminare il bordo che compare intorno all’immagine quando questa è usata come collegamento.
Se volete agire sull’aspetto del bordo potete usare border-top-style, border-bottom-style, border-right-style e border-left-style, o semplicemente border-style per impostare lo stesso valore per tutti bordi. I valori possibili sono specificati da alcune parole chiave:
- none: nessun bordo;
- dotted: punteggiato;
- dashed: tratteggiato;
- solid: continuo;
- double: doppio;
- groove: incassato;
- ridge: in rilievo;
- inset: interno;
- outset: esterno.
Per concludere con l’esposizione delle proprietà del bordo, ricordiamo che usando border-color è possibile specificare il colore che si desidera per il bordo del nostro box.
A questo è opportuno fermarsi un attimo e proporre alcuni semplici esempi, dai quali potrete poi trarre spunto per il vostro lavoro. Nel primo esempio, visibile in figura 1, creeremo due box di larghezza diversa, entrambi col bordo.
<head>
<style type="text/css">
.primo {margin: 100px; padding: 20px; width: 50%; border: medium dashed #FF0000;}
.secondo {width: 80%; border: 15px double;}
</style>
</head>
<body>
<div class="primo">Lorem ipsum … </div>
<div class="secondo">Lorem ipsum … </div>
</body>
Ricordate, dallo scorso articolo, che è possibile adottare una notazione abbreviata per quelle proprietà, come border-color, border-style, ecc., che hanno la prima parte uguale (border: medium dashed #FF0000).
Notate che il primo blocco è distanziato dal secondo perché abbiamo definito un margine di 100px (margin: 100px) su tutti e quattro i suoi lati. Proviamo adesso a inserire due box all’interno di un box contenitore, come visibile in figura 2.
<head> <style type="text/css"> .contenitore {width: 80%; border: thick dotted;} .contenuto1 {margin: 20px; width: auto; border: thin solid;} .contenuto2 {width: 50%; border: thick double #FF00FF; padding: 10px;} </style> </head> <body> <div class="contenitore"> <div class="contenuto1">Lorem ipsum … </div> <div class="contenuto2">Lorem ipsum … </div> </div> </body>
Notate che la larghezza del primo contenuto (.contenuto1) è definita auto: il contenuto è largo quanto il suo contenitore fatti salvi i margini (margin: 20px) e la larghezza dei bordi.
Per il secondo contenuto (.contenuto2) non abbiamo definito la larghezza dei margini: per questo il box è “attaccato” al suo contenitore.
Sfondo del testo
Ogni box può essere corredato di un proprio sfondo. Quanto diremo in questo paragrafo, in realtà, vale anche per l’intera pagina. Basterà definire queste regole per il tag <body>.
Cominciamo a vedere come definire un colore di sfondo uniforme. La proprietà da usare, come per il testo, è background-color:
<div style="background-color:blue">ciao</div>
Se invece preferite utilizzare un’immagine per il vostro sfondo, dovrete ricorrere alla proprietà background-image, come nell’esempio:
{background-image: url(Italia.gif);}
Notate che il nome e il percorso dell’immagine vanno passati tra le parentesi tonde della parola url. I tipi di immagine che si possono usare sono GIF, JPEG e PNG.
Quando si richiama una pagina da un CSS esterno, ricordate che l’URL utilizzato deve fare riferimento alla posizione del file CSS e non a quella della pagina XHTML da cui è richiamato.
Se non specificate diversamente, l’immagine viene ripetuta tante volte quanto è necessario per riempire tutto l’elemento per cui deve fare da sfondo. Per evitare la ripetizione o decidere il numero delle ripetizioni che desiderate, potete ricorrere alla proprietà background-repeat. I valori possibili sono:
- no-repeat: per evitare la ripetizione;
- repeat: l’immagine viene replicata in senso verticale e orizzontale, quanto necessario, per riempire l’elemento (è il valore di default);
- repeat-x: replica l’immagine solo in orizzontale;
- repeat-y: replica l’immagine solo in verticale.
Se scegliete di non ripetere l’immagine, e non specificate diversamente, l’immagine viene mostrata a partire dall’angolo superiore sinistro. La proprietà background-position permette di definire dove collocare l’immagine. Potete usate un valore numerico in percentuale o indicare la distanza assoluta dall’angolo superiore sinistro. Se preferite, per il posizionamento orizzontale potete ricorrere ai valori:
- left;
- center;
- right.
Per il posizionamento orizzontale, invece, potete usare i valori:
- top;
- center;
- bottom.
Se sono espresse due coordinate, la prima è orizzontale e la seconda verticale. Per finire, è anche possibile specificare se l’immagine dello sfondo deve essere fissa (e quindi, eventualmente, nascondersi in parte quando la pagina viene fatta scorrere) o se deve scorrere insieme alla pagina. La proprietà da usare è background-attachment e i valori possibili sono:
- fixed;
- scroll.
Anche per lo sfondo è possibile adottare la solita versione abbreviata. La proprietà background vi consente di definire univocamente i diversi attributi dello sfondo finora esaminati. L’ordine è il seguente: colore, url, ripetizione, fisso/mobile, posizione, come nell’esempio
<div style= "background: yellow url(sfondo.jpg) repeat-y fixed right bottom"> ciao </div>
Nell’esempio che segue vi proponiamo uno sfondo non ripetuto e centrato per l’intera pagina visibile in figura 3:
<head>
<style type="text/css">
body {background-image: url(Italia.gif);
background-repeat: no-repeat;
background-position: center center;}
</style>
</head>
<body>
<p>Lorem ipsum … </p>
<p>Lorem ipsum … </p>
<p>Lorem ipsum … </p>
</body>
Proviamo ora a modificare uno degli esempi proposti, aggiungendo uno sfondo colorato con un’immagine, come visibile in figura 4:
<head>
<style type="text/css">
.primo { margin: 100px; padding: 20px;width: 50%; border: medium dashed #FF0000;
background-color:red;}
.secondo { width: 80%; border: 15px double; background-image: url(riccio.gif);
background-repeat: repeat;}
</style>
</head>
<body>
<div class="primo"> Lorem ipsum … </div>
<div class="secondo">Lorem ipsum … </div>
</body>
Posizione
Fino a ora abbiamo realizzato box allineati a sinistra e posti uno sotto l’altro. CSS permette di modificare anche queste impostazioni. Cominciamo con la definizione della posizione. Innanzi tutto, cominciamo col dire che sono possibili quattro tipi di posizionamento:
- statico: il normale posizionamento XHTML classico, per cui ogni elemento è posizionato in base al flusso dati;
- assoluto: è possibile astrarre un elemento in qualsiasi punto della pagina indipendentemente dagli altri elementi che, anzi, possono risultare sovrapposti o sottoposti;
- relativo: in questo modo l’oggetto non esce dal flusso dati,ma assume una posizione diversa relativamente agli elementi circostanti rispetto al posizionamento tradizionale (più a destra, più a sinistra…);
- fisso: l’elemento non scorre con la pagina.
La proprietà per modificare la posizione di un elemento è position, seguita dal valore absolute o relative e dal valore dello spostamento. Bisogna anche specificare dove volete ottenere uno spostamento con le parole top, right, bottom e left. Cominciamo con un esempio relativo al posizionamento assoluto, visibile in figura 5:
<head> <style type="text/css"> .immagine {position: absolute; left: 20px; top: 20px;} .testo {position: absolute; left: 200px; top: 20px;} </style> </head> <body> <div class="immagine"> <img src="riccio.gif" alt="riccio" width="170" height="112" /> </div> <div class="testo">Lorem ipsum … </div> </body>
Vediamo ora un esempio di elementi posizionati in modo relativo, come visibile in figura 6:
<head> <style type="text/css"> .indirizzo {position: relative; left: 10px;} </style> </head> <body> <div class="intestazione"><img src="intestazione.gif" alt="intestazione" /></div> <div class="indirizzo">via Garibaldi 18 - Pavia </div> <div> Lorem ipsum … </div> </body> </html>
Notate che il blocco di classe indirizzo si allontana dal margine sinistro di 10 px rispetto alla posizione normale (confrontatela con quella del testo sottostante).
Sia per il posizionamento assoluto sia per quello relativo sono possibili valori negativi. Per concludere, ricordiamo che tutti gli elementi supportano il posizionamento statico e relativo ma solo alcuni supportano quello assoluto; tra questi ultimi ricordiamo:
- <div>;
- <span>;
- <img>;
- <table>.
Resta ancora da trattare il posizionamento di tipo fisso. È possibile, infatti, fare in modo che un elemento occupi una posizione specifica e che non si sposti anche se si fa scorrere la pagina mediante la barra di scorrimento. Per specificare la posizione dell’elemento che deve rimanere fisso, procedete come per posizionare gli elementi in modo assoluto. Vi proponiamo un esempio, in cui un’immagine posta alla sinistra della pagina rimane sempre visibile anche se facciamo scorrere la pagina per leggere il testo alla sua destra, vedi figura 7 e 8:
<head>
<style type="text/css">
.contenuto{width:70%; position:absolute; left:22%; text-align:justify}
.fisso{position:fixed;top:0px;left:0px; width:20%;}
</style>
</head>
<body>
<div class="contenuto">Lorem ipsum ... </div>
<div class="fisso"><img src="riccio.gif"></div>
</body>
</html>
Le versioni di Internet Explorer precedenti alla 7 non supportano il posizionamento fisso.
Elementi flottanti
È possibile far “flottare”, letteralmente galleggiare, alcuni elementi per costruire layout a più colonne e a più sezioni. Cominciamo col presentarvi la proprietà che vi permette di fare questo, float, poi vi proporremo alcuni esempi. Float può assumere i valori:
- left;
- right.
Cominciamo a vedere come realizzare un semplice layout a due colonne di misura uguale, come visibile in figura 9:
<title>Documento a 2 colonne</title> <style type="text/css"> .sinistra {float: left; width: 49%; margin:0.5%; text-align:justify;} .destra {float: right; width: 49%; margin:0.5%; text-align:justify;} </style> </head> <body> <div class="sinistra">Lorem ipsum …</div> <div class="destra">Lorem ipsum …</div> </body> </html>
Notate che, nel definire la dimensione dei due blocchi, abbiamo dovuto considerare anche lo spazio occupato dai margini (lo 0,5% della pagina a destra e a sinistra di ogni blocco, ossia il 2% del totale). Se gli elementi sono troppo larghi, infatti, non possono essere affiancati.
Se ora volessimo inserire un filetto tra le due colonne, dovremmo aggiungere un bordo a uno dei due blocchi e stringerli lievemente entrambi per considerare anche la larghezza del filetto.
Per creare il filetto usiamo il margine destro del blocco di sinistra. Per evitare che il filetto sia attaccato al testo del blocco sinistro eliminiamo i margini interni dei due blocchi e aumentiamo il padding. Le indicazioni di stile andrebbero modificate così:
<style type="text/css">
.sinistra { float: left; width: 48.2%; margin:0.5% auto 0.5% 0.5%; text-align:justify;
border-right: thin dotted; padding-right:1.2%;}
.destra { float: right; width: 48.2%; margin:0.5% 0.5% 0.5% auto; text-align:justify;
padding-left:1%;}
</style>
Il risultato che otteniamo è quello della figura 10.
Continuiamo con i nostri esempi. Proviamo a realizzare un layout con tre colonne. La centrale sarà più larga, come visibile in figura 11.
<head> <style type="text/css"> .sinstra {float: left; width: 15%; background-color: #666666; padding:1%;} .centro {float: left; width: 62%; text-align:justify; padding:1% 2%; background-color: #CCCCCC;} .destra {float: right; width: 15%; background-color: #666666; padding:1%;} </style> </head> <body> <div class="sinstra">area sinistra <br> area sinistra <br> … </div> <div class="centro">Lorem ipsum … </div> <div class="destra">area destra <br>area destra <br>… </div> </body> </html>
Le colonne che abbiamo ottenuto non sono tutte uguali come lunghezza. Infatti, a meno che non si specifichi diversamente, i box hanno l’altezza del loro contenuto.
Potreste specificare un’altezza del 100% (height:100%), ma non tutti i browser si comportano correttamente.
Per risolvere questo problema e ottenere un posizionamento corretto del contenuto dei blocchi (per esempio, è necessario fare in modo che il contenuto del blocco centrale sia equidistante da quello dei due blocchi laterali), l’applicazione corretta del colore di sfondo ecc., vi proponiamo una soluzione che prevede la creazione di un contenitore che imposta la altezza di tutti gli elementi (l’altezza degli elementi contenuti è sempre in proporzione all’elemento contenitore) e il colore di sfondo che vedremo nel blocco centrale (per il quale non imposteremo un colore di sfondo specifico). Il contenitore avrà un’altezza pari al 100% della pagina e tutti i contenuti un’altezza pari al 100% del contenitore.
Questa soluzione viene resa in modo molto simile dai principali browser, come visibile in figura 12.
<head> <style type="text/css"> body {margin-top: 0px;} .contenitore {background-color: #CCCCCC; height: 100%; } .sinistra {background-color: #FF0000; float: left; width: 15%; height: 100%;} .destra {background-color: #FF0000; float: right; width: 15%; height: 100%; } .centro {float:left; width: 66%; text-align:justify; height: 100%; margin-right: 2%; margin-left: 2%;} </style> </head> <body> <div class="contenitore"> <div class="sinistra">sinistra</div> <div class="centro">Lorem ipsum … </div> <div class="destra">destra</div> </div> </body> </html>
In questo codice abbiamo anche impostato un valore 0 per il margine superiore del tag <body>, in modo da evitare la sottile fascia bianca che verrebbe lasciata dal browser tra il bordo della pagina e gli elementi contenuti.
Se il nostro layout ancora non vi soddisfa e preferite che non si allarghi su tutta la pagina, ma sia un po’ più stretto e centrato (in pratica, volete che ci siano due fasce bianche ai lati), basterà aggiungere il margine destro e sinistro per l’elemento contenitore:
.contenitore { background-color: #CCCCCC; height: 100%; margin-right: 10%;
margin-left: 10%; }
Il risultato è quello che vedete nella figura 13. Se in una pagina che contiene elementi flottanti volete aggiungerne altri fissi potete usare la proprietà clear, che può assumere i valori:
- left: impedisce che l’elemento fluisca attorno a un elemento flottante posto alla sua sinistra;
- right: impedisce che l’elemento fluisca attorno a un elemento flottante posto alla sua destra;
- both: impedisce che l’elemento fluisca attorno a un elemento flottante posto a uno dei suoi lati;
- none: l’elemento può fluire attorno agli elementi flottanti.
Proviamo ad utilizzare questa proprietà per aggiungere un piede e una testata al layout che vi abbiamo proposto sopra, come visibile in figura 14. Noi faremo il piede e la testata uguali. Voi potete differenziarli creando due stili diversi, sempre utilizzando la proprietà clear.
<head>
<style type="text/css">
body { margin-top: 0px; }
.contenitore {background-color: #CCCCCC; height: 100%; margin-right: 10%;
margin-left: 10%; }
.sinistra { background-color: #FF0000; float: left; width: 15%; height: 100%; }
.destra { background-color: #FF0000; float: right; width: 15%; height: 100%; }
.centro {float:left; width: 66%; text-align:justify; height: 100%;
margin-right: 2%; margin-left: 2%; }
.testataPiede {clear: both; width: 100%; height:10%; background-color: #FFff00; }
</style>
</head>
<body>
<div class="contenitore">
<div class="testataPiede">testata</div>
<div class="sinistra">sinistra</div>
<div class="centro">Lorem ipsum … </div>
<div class="destra">destra</div>
<div class="testataPiede">piede</div>
</div>
</body>
</html>
Overflow
La proprietà overflow controlla cosa succede al contenuto di un box quando è troppo grande per essere visualizzato all’interno del box. Overflow accetta i seguenti valori:
- visible: il contenuto si espande fuori dal suo riquadro e rimane comunque visibile (è l’opzione predefinita);
- hidden: il contenuto viene nascosto;
- scroll: il contenuto non esce dal suo riquadro. Vengono aggiunte delle barre di scorrimento per visualizzare la parte non visibile
- auto: funziona come il precedente. Le barre di scorrimento, però, non sono sempre visibili, ma vengono aggiunte solo se necessarie.
Per chiarire meglio, proviamo a vedere cosa succede se rimpiccioliamo la finestra del browser mentre visualizza la pagina della figura 14, fino a far sì che il testo dell’elemento .centro non abbia più spazio all’interno del suo box.
La figura 15 vi mostra che il testo scorre fuori dal suo box e “invade” il resto della pagina. Per evitare questo effetto, modifichiamo lo stile della classe .centro per impostare correttamente la proprietà overflow:
.centro { float:left; width: 66%; text-align:justify; height: 100%;
margin-right: 2%; margin-left: 2%; overflow:auto; }
La figura 16 vi mostra il risultato.
Altre opzioni
Impilamento 3D
CSS permette anche di controllare l’impilamento 3D dei box. Questo è importante quando definite la posizione degli elementi, in modo che alcuni si sovrappongano del tutto o parzialmente.
Se non indicate diversamente, gli elementi che nel flusso XHTML sono creati dopo si sovrappongono a quelli creati prima. È possibile usare la proprietà z-index per controllare il posizionamento sull’asse z (cioè quello della profondità). z-index accetta valori numerici positivi e negativi: un elemento con z-index più basso sta “sotto” un altro elemento con valore più alto. Con Javascript o altri linguaggi di scripting è possibile modificare questa proprietà (e anche altre proprietà) per ottenere effetti dinamici.
Visibilità
Esiste una proprietà CSS che permette di modificare la visibilità di un elemento. È possibile, poi, ottenere effetti interessanti modificando il valore di questa proprietà con Javascript o altri linguaggi di scripting. Oppure, potete servirvi di questa proprietà per nascondere parti non utili nel fogli di stile dedicati alla stampa. La proprietà in questione è visibility, che accetta i valori:
- hidden: l’elemento non è visualizzato;
- visible: l’elemento è visibile.
Potete rendere invisibile un elemento anche assegnando il valore none alla proprietà display (display:none).
Allineamento verticale
In un box, il contenuto si dispone a partire dall’alto, ma come è possibile modificare l’allineamento orizzontale (proprietà text-align), è anche possibile modificare l’allineamento verticale di un elemento figlio rispetto al genitore.
La proprietà che si utilizza è vertical-align e può assumere i seguenti valori:
- baseline: la linea di base dell’elemento figlio si allinea a quella del genitore;
- middle: genitore e figlio sono centrati verticalmente;
- sub: l’elemento figlio è posizionato come pedice del genitore;
- super: l’elemento figlio è posizionato come apice del genitore;
- text-top: i lati superiori del figlio e del genitore sono allineati;
- text-bottom: i lati inferiori del figlio e del genitore sono allineati;
- top: il lato superiore dell’elemento figlio si allinea con la riga più in alto del genitore;
- bottom: il lato inferiore dell’elemento figlio si allinea con la riga più in basso del genitore.
Vertical-align accetta anche valori espressi in percentuale.
Autore: Alessandra Salvaggio – Tratto da: XHTML e CSS Guida all’uso – Edizioni FAG