Il sito per imparare gratuitamente a fare pagine Web

Layout Fisso e Liquido

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida CSS Fogli di stile - Ver. 4.8.1   

I Layout fissi e liquidi.

Un layout altro non Ŕ che una struttura per contenere i dati. Si tratta in pratica di usare box fissi e/o box flottanti per impaginare tutto quello che pu˛ far parte di una pagina web.

Facendo uso delle informazioni e degli esempi visti in precedenza per il box liquido Ŕ possibile creare una struttura molto versatile, in questo esempio due colonne: una per il men¨ a sinistra e l'altra per la pagina principale. Una testata con titolo ed un margine inferiore. Lo possiamo vedere su questo link esempio.

Questo il codice nel foglio di style CSS, giÓ tenuto conto del bug per i browser IE:

body {
	text-align: center; /* IE5.x */
	padding: 0;
	margin: 0;
	}

#telaio {
	width:100%;
	margin: 0px;
	border:1px solid gray;
	line-height:150%;
	color: black;
	background-color: #ffffcc;
	text-align: left; /* IE5.x */
	}

#testata {
	font-size: 130%;
	}


#fondo {
	font-size: 85%;
	text-align: center;
	}


#testata, #fondo {
	padding:0.5em;
	color:white;
	background-color: #cc9900;
	clear:left;
	}


#sinistro {
	float:left;
	width:160px;
	margin: 0px;
	padding: 5px;
	}

#centrale {
	margin-left: 170px;
	border-left:1px solid gray;
	padding:10px;
	}

Questo il codice HTML:

<body>

<div id="telaio">
<div id="testata">... Testata ...</div>

<div id="sinistro">... Sinistro...</div>

<div id="centrale">... Centrale ...</div>

<div id="fondo">... Fondo ...</div>
</div>

</body>

Su questo link il risultato a video

In questo esempio riassuntivo sono state introdotte molte delle cose trattate fino a questo momento per quanto riguarda il box model. Anche i parametri sono stati espressi volutamente con unitÓ di misura differenti al solo scopo di rendere meglio l'idea di cosa sia possibile fare con l'uso dei fogli di style. Ognuno di voi potrÓ modificarlo a proprio gusto ed esigenza.


Continua: I Links

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi