I Layout fissi e liquidi

0
55

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.

CONDIVIDI
Articolo precedenteIl Box Liquido
Prossimo articoloI link
La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here