Creazione di un layout table-less
Grazie ai CSS possiamo fare a meno delle tabelle per la costruzione del layout di una pagina, creandone uno detto table-less, ovvero senza tabelle.
Naturalmente un layout molto complesso è scomodo da realizzare senza tabelle, o comunque molto difficile da gestire in modalità table-less: sta quindi alla bravura del designer riuscire a comprendere il funzionamento ed a effettuare prove su prove fino a raggiungere il risultato ottimale.
Approfittiamo di questa lezione pratica per studiare le proprietà float, il cui scopo è quello di eliminare ad un elemento di testo il ritorno a capo, e clear, che si limita a svolgere il lavoro contrario della proprietà float.
Creiamo dunque la seguente struttura HTML che rappresenta il layout della Homepage del nostro sito:
<html>
<head>
<title>Layout table-less con i CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div align="center">
<div id="MAIN">
<div id="HEADER">LOGO...</div>
<div id="MENU">
MENU...
</div>
<div id="CONTENT">
CONTENUTO DELLA PAGINA...
</div>
<div id="FOOTER">
COPYRIGHT E INFO DI CHIUSURA PAGINA...
</div>
</div>
</div>
</body>
</html>
Per centrare il layout della pagina utilizziamo direttamente un'istruzione HTML.
All'interno creiamo un contenitore a cui assegnamo l'ID MAIN, all'interno di cui avremo la struttura della pagina, composta da elementi con ID HEADER, MENU, CONTENT e FOOTER che rappresentano la struttura fisica vera e propria della pagina.
Il risultato finale somiglierà al seguente:
body
{
background: #FFFFFF;
color: #000000;
margin: 10px 0px 10px 0px;
}
div
{
font-size: 11px;
font-family: verdana;
}
/* ----- ----- ----- ----- ----- */
#MAIN
{
text-align: left;
width: 748px;
border: solid 1px #000000;
}
#HEADER
{
border-bottom: solid 1px #000000;
}
#MENU
{
float: left;
width: 146px;
border-right: solid 1px #000000;
}
#CONTENT
{
float: left;
width: 600px;
}
#FOOTER
{
clear: left;
border-top: solid 1px #000000;
}
Per chiarezza visiva si è soliti utilizzare un commento composto da separatori ottici come il seguente:
/* ----- ----- ----- ----- ----- */per dividere la definizione degli elementi base dagli ID e dalle classi, anche se di classi nel nostro esempio non ce ne sono.
Le fasi fondamentali sono rappresentate dagli ID MENU, CONTENT e FOOTER, i cui passaggi salienti, relativi alle proprietà float e clear, sono evidenziati in grassetto.
E' opportuno assegnare una larghezza agli elementi HTML via CSS, ma bisogna ricordare che il bordo, se di un pixel, occupa appunto 1 pixel di spazio che va quindi sottratto in fase di assegnazione della larghezza.
Lo stesso discorso vale se si utilizza il padding o il margin.
- << Lezione Precedente
- Indice Guida
- Lezione Successiva >>
