Guida XHTML Layout liquido Primi passi in XHTML e CSS di Web-Link.it

I Layout fissi e liquidi.

Abbiamo visto nelle lezioni precedenti come creare dei box e come posizionarli nello schermo, adesso facendo uso di queste tecniche possiamo assemblarli creando di fatto un layout, cioè una struttura per contenere i nostri dati.

Si tratta in pratica di usare box fissi e/o box flottanti per impaginare il tutto, dai testi alle immagini dai moduli alle liste o qualsiasi altro oggetto che possa far parte di una pagina web.

Ne vediamo uno a scopo didattico: 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 a questo link.

Questo il codice nel foglio di style CSS:

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

#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 per ottenerlo:

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

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

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

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

Su questo link il risultato a video

Sono state introdotte molte delle cose trattate fino a questo momento ed anche i parametri sono stati espressi volutamente con unità di misura differenti al solo scopo di rendere meglio l'idea di cosa sia possibile adoperare con l'uso dei fogli di style.

Nella prossima lezione vedremo le tabelle che non servono soltanto per impaginare dati ma sono a volte adoperate come fossero layout.

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

Andrea Bianchi

Sito di riferimento: www.Web-Link.it
Forum di riferimento: www.ilmioforum.com

Potete fare domande e discutere l'argomento sul Forum gratuito di supporto.