Concludiamo la nostra guida di base all’utilizzo dei CSS analizzando due proprietà fondamentali, ovvero float e clear. Queste due proprietà (che non vengono ereditate dagli elementi discendenti) assumono un ruolo assolutamente centrale nell’attività quotidiana di web design in quanto sono le protagoniste indiscusse di buona parte dei nuovi layout table-less.
La tecnica che prevede l’utilizzo di queste proprietà è detta table-less ("senza tabelle") per contrapporla alla ormai obsoleta abitudine di molti web-designer di impostare il layout di un sito web utilizzando le tabelle di HTML.
Fino a qualche anno fa, infatti, era abitudine diffusa racchiudere i vari elementi dei template web all’interno di tabelle annidiate attraverso le quali veniva definita la griglia dei contenuti. Una simile prassi, tuttavia, è da considerarsi deprecabile in quanto la finalita delle tabelle di HTML non è certamene quella di fungere da griglia per le pagine web, ma piuttosto quella – ben più consona – di essere la base strutturale per la creazione di rapporti ed elenchi di dati.
Ma le tabelle di HTML sono deprecate?
Assolutamente "no"! Il fatto che sia stato abbandonato ormai da tempo il modello che voleva le pagine Web strutturate all’interno di tabelle, non significa che i tag "table", "tr", "td" etc. siano andati in pensione o siano stati eliminati dall’HTML.
La verità è semplicemente che i tag tabellari non devono essere utilizzati per la costruzioni del layout di pagina, detto questo, possono essere utilizzati per quello che fin dall’inizio era il loro scopo, cioè mostrare dati all’interno di report; a conferma di quanto detto cito testualmente il manuale ufficiale del W3C:
The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.
Il tag <table> e tutti gli altri tag per la creazione di tabelle non sono quindi deprecati come spesso si tende a pensare sulla base di informazioni errate o superficiali.
Creare layout complessi senza le tabelle
Ogni web designer che si rispetti, quindi, deve essere oggi in grado di creare layout (anche estremamente complessi) utilizzando esclusivamente elementi contenitore come DIV e liste opportunamente stilizzati mediante i fogli di stile. Vediamo quindi le caratteristiche di queste due proprietà, partendo da float.
La proprietà float
Questa proprietà ha lo scopo di estrarre un elemento dal normale flusso del documento per spostarlo su uno dei lati del suo contenitore; così facendo gli altri elementi della pagina non andranno a capo ma gli "scivoleranno" attorno posizionandosi sul lato opposto a quello dichiarato nella proprietà float.
Questa proprietà, come avrete già intuito, ammette solo tre valori:
- none – (default) l’elemento mantiene il suo posizionamento naturale;
- left – l’elemento viene spostato a sinistra e gli altri contenuti della pagina gli scorrono a destra;
- right – l’elemento viene spostato a destra e gli altri contenuti della pagina gli scorrono a sinistra.
Un elemento flottante è sempre (ed automaticamente) un elemento di tipo block e pertanto è idoneo a possedere dimensioni esplicite, margini, padding e bordi. Se all’elemento non vengono assegnati valori espliciti per le proprietà width ed height, le sue dimensioni saranno date dall’ingombro del suo contenuto sia in larghezza che in altezza (ovviamente non potrà essere superata la larghezza massima del suo contenitore).
Un "problema" tipico di quanto si lavora con float è dato dall’atteggiamento del contenitore: come gli elementi posizionati in modo assoluto, anche quelli flottanti (essendo estratti dal normale flusso della pagina) perdono consistenza nei confronti del loro contenitore il quale, in un certo senso, non ne rileva la presenza.
Al fine di risolvere tale problema è possibile:
- impostare un altezza esplicita per il contenitore che sia almeno uguale a quella degli elementi flottanti in esso contenuti;
- oppure utilizzare la proprietà clear per interrompere l’affiancamento e "ridare consistenza" al contenuto: in questo modo il contenitore si adatterà automaticamente all’altezza degli elementi flottanti e non sarà necessario assegnargli un’altezza arbitraria.
La proprietà clear
La proprietà clear accompagna sempre la proprietà float: attraverso clear, infatti, si vuole impedire che ad un dato elemento si affianchino elementi flottanti su un lato o su entrambi.
tale proprietà ammette i seguenti valori:
- none – (default) gli elementi con float possono circondare l’elemento sia a destra che a sinsitra;
- left – l’elemento non può avere elementi flottanti affiancati a sinistra;
- right – l’elemento non può avere elementi flottanti affiancati a destra;
- both – l’elemento non può avere elementi flottanti affiancati né a destra né a sinistra;
Tip: nei layout table-less vengono spesso utilizzati dei DIV vuoti a cui viene assegnata la proprietà clear: both al solo fine di "chiudere" un gruppo di elementi affiancati.
Un semplice esempio di design table-less
Vediamo con utilizzare le proprietà float e left per realizzare un semplice layout table-less per la homepage del nostro sito.
Per prima cosa andiamo a definire una struttura HTML composta, nel nostro esempio, esclusivamenteda DIV:
<html>
<head>
<title>Layout table-less con i CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="MAIN">
<div id="HEADER">logo...</div>
<div id="MENU">
menu laterlae...
</div>
<div id="CONTENT">
contenuto della pagina...
</div>
<div id="FOOTER">
copyright e info di chiusura pagina...
</div>
</div>
</body>
</html>All’interno del tag <body> creiamo un contenitore a cui assegnamo l’ID "MAIN", all’interno di cui avremo la struttura della nostra homepage, composta da elementi con diversi ID ("HEADER", "MENU", "CONTENT" e "FOOTER") che rappresentano la struttura fisica vera e propria della pagina. Il risultato che vogliamo raggiungere sarà qualcosa del genere:
Passiamo ora al "succo del discorso": vediamo cioè che stile applicare per raggiungere il risultato che ci siamo prefissati. Segue il contenuto del nostro file style.css:
body
{
background: #FFFFFF;
color: #000000;
margin: 0;
}
div
{
font-size: 11px;
font-family: verdana;
}
#MAIN
{
margin: 0 auto;
width: 750px;
border: solid 1px #000000;
}
#HEADER
{
border-bottom: solid 1px #000000;
}
#MENU
{
<strong>float: left;</strong>
width: 149px;
}
#CONTENT
{
<strong>float: left;</strong>
width: 600px;
border-left: solid 1px #000000;
}
#FOOTER
{
<strong>clear: left;</strong>
border-top: solid 1px #000000;
}La stilizzazione applicata in realtà è piuttosto banale; voglio tuttavia attirare la vostra attenzione su tre elementi della pagina, ovvero i DIV aventi ID "MENU", "CONTENT" e "FOOTER".
A primi due di questi DIV, infatti, è stato applicato il float: left al fine di creare l’effetto di due colonne affiancate (area del menu laterale e area dei contenuti). Nel fare ciò, ovviamente, abbiamo dovuto prestare attenzione alla larghezza degli elementi in quanto la somma delle due width non poteva superare la larghezza del contenitore (750 pixel); nel fare questo conteggio, inoltre, abbiamo dovuto tenere in considerazione lo spessore di 1 pixel del bordo verticale sinistro dell’area dei contenuti.
149 + 600 +1 = 750
Per quanto riguarda il DIV con i "FOOTER", invece, è stata utilizzata la proprietà clear: left per "chiudere" il blocco degli elementi affiancati e creare un elemento orizzontale a tutta larghezza.
