I Layout fissi e liquidi

0
53

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 disporre 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 soltanto a scopo didattico formato da 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 potete scrivere sul forum di supporto, gratuito e aperto a tutti.

PS: vuoi imparare a usare l'HTML come un vero professionista in pochissimo tempo?

Segui il miglior video corso di HTML

corso HTML5

Impara la tecnologia che sta ALLA BASE del mondo Internet di oggi, in particolar modo se vuoi creare siti facilmente indicizzabili e responsive.

12345
33 Recensioni, aggiornato l'8 agosto 2018

CONDIVIDI
Articolo precedenteIl Box Liquido
Prossimo articoloLe Tabelle: la loro struttura
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