Impaginare un sito web con Div e CSS - prima parte

Il metodo migliore per impostare la struttura di un sito internet consiste nell'usare i Div e i Css, che hanno mandato in pensione le tabelle.

Questo significa che le tabelle html vanno usate solo per presentare dati in forma tabellare e non più per impaginare un sito.

Vantaggi dei Div e Css rispetto alle tabelle

Un sito impaginato con i Div richiede meno codice html, allegerendo quindi la pagina finale e rendendo il codice più leggibile sia per lo sviluppatore che per i motori di ricerca. Inoltre con l'esperienza i div diventano più facili da mantenere in quanto gran parte del lavoro viene definito in un file Css esterno e non direttamente nel codice html presente nelle pagine.

Tag html e stili Css da conoscere

I prerequisiti sono una base di html e css.
In particolare bisogna diventare familiari con questi elementi:

  • div: questo tag html non è altro che un contenuitore, simile a un paragrafo <p>. Può essere impiegato per contenere praticamente qualsiasi contenuto html. Di default ha un ritorno a capo prima e dopo, a differenza di suo cugino <span>
  • float: è un attributo CSS usato per impostare il posizionamento di due div consecutivi. I valori più comuni sono left e right
  • clear: attributo CSS usato prevalentemente per "pulire" il comportamento float dei div precedenti. Il valore più comune è both

Nella sezione Html - Css della pagina dei Link trovate un elenco di siti dove poter approfondire l'argomento.

Layout a due colonne

Lo scopo è ottenere un semplice layout a due colonne come mostrato in questa immagine:

Si parte dal codice html, che contiene una serie di Div che inizialmente appariranno uno sotto l'altro.
Si attribuisce un nome univoco ad ogni parte della pagina, come l'intestazione, il contenuto principale e così via.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Layout a 2 colonne - www.Dev-oClock.com</title>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<style type="text/css">
		/* ... */
	</style>
</head>
<body>
	<!-- Contenitore dell'intero sito -->
	<div id="PageWrapper">
		<div id="Header">Intestazione</div>
		<!-- Contenitore dei menu laterali e del contenuto centrale -->
		<div id="Menu-Content-Wrap">
			<div id="Menu-Left">
				<p>Menu sinistra</p>
				<ul>
					<li>Menu Item 1</li>
					<li>Menu Item 2</li>
					<li>Menu Item 3</li>
					<li>Menu Item 4</li>
				</ul>
			</div>
			<div id="MainContent">
				<p>Contenuto pagina</p>
				<p>Layout a due colonne</p>
				<p>Layout a due colonne</p>
				<p>Layout a due colonne</p>

				<p>--- <a href="http://www.dev-oclock.com">Dev-oClock.com</a> ---</p>
			</div>
		</div>
		<div id="Footer">Footer</div>
	</div>
</body>
</html>

Poi si lavora con la parte Css, che in questi esempi ho tenuto all'interno della stessa pagina html ma è sempre meglio riporre in un file esterno.

			html, body
			{
				margin: 0px;
				padding: 0px;				
				text-align: center;
				background-color: #E3E3FF;				
			}
			#PageWrapper
			{
				width: 1024px;		/* larghezza del sito; impostare a 100% per un sito largo tutta la pagina del browser */
				margin: 0 auto;
				text-align: left;
			}
			#Header
			{
				text-align: center;
				background-color: #000000;
				color: White;
				padding: 20px;
			}						
			#Menu-Content-Wrap
			{								
				overflow: hidden;			/* 1/2 necessario per avere le colonne laterali della stessa altezza di quella centrale */
			}
			#Menu-Left
			{
				float: left;
				width: 180px;
				height: 100%;
				background-color: #B8B8FF;
				text-align: center;
				
				padding-bottom: 5000px;		/* 2/2 necessario per avere le colonne laterali della stessa altezza di quella centrale */
				margin-bottom: -5000px;		/* 2/2 necessario per avere le colonne laterali della stessa altezza di quella centrale */
			}
			#MainContent 
			{
				float: left;
				height: 100%;				
				padding-left: 5px;
				padding-right: 5px;
				min-height: 500px;			/* altezza minima del sito */
				background-color: #FFFFFF;
				width: 834px;				
			}
			#Footer 
			{
				clear: both;	/* manda a capo questo div */
				background-color: #000000;
				color: white;
				text-align: center;
				padding: 10px;
			}

Notare l'utilizzo di float per fare in modo che due div stiano affiancati anziché uno sotto l'altro.

Altezza div delle colonne laterali

Per qualche strana ragione spesso i div non accettano un'altezza del 100%. Quindi fare in modo che la colonna di sinistra sia sempre della stessa altezza di quella del contenuto centrale può essere un problema. In questa immagine si nota il comportamento di default, dove il menu di sinistra non arriva fino al footer nonostante abbia il parametro height impostato a 100%.

Esistono diverse soluzioni, quella che ho applicato qui mi sembra la più semplice.
E' un codice un po' strano a ma funziona bene su tutti i browser ed è riconosciuto come valido dal W3C. Si applica questo stile alla colonna:

padding-bottom: 5000px;
margin-bottom: -5000px;

Ma per funzionare è necessario che l'intero gruppo di div (colonna laterale e contenuto centrale) sia racchiuso in un div padre, chiamato in genere Wrapper, il quale deve avere questo stile:

#Menu-Content-Wrap
{
	overflow: hidden;
}

Nella seconda parte vedremo come impostare un sito a tre colonne e come personalizzare la larghezza.

Autore: Sergio Roberto Boarina