layout e template
DESCRIPTION
ÂTRANSCRIPT
Applicare lo stile
Scegliere un layout e
creare un template
Scegliere un layout
Con le informazioni trattate finora, relative al posizionamento degli
elementi attraverso CSS, è già possibile creare dei layout e dei
template di base per le nostre pagine web.
Tra i layout CSS più diffusi per semplicità di realizzazione e
funzionalità navigazionale troviamo:
il cosiddetto layout “liquido”, progettato per adattarsi alle
dimensioni della finestra del browser.
il cosiddetto layout “fisso” che non modifica mai il
posizionamento dell’area di contenuto della pagina in relazione
alla finestra del browser.
Il cosiddetto layout “flessibile” che presenta delle aree che
aumentano o diminuiscono le loro dimensioni nel caso in cui il
testo venga ridimensionato.
Impostare un layout liquido
Le pagine “liquide” permettono di realizzare un design facilmente
visualizzabile attraverso monitor con diversa risoluzione; pertanto tali
pagine risulteranno più accessibili attraverso dispositivi diversi.
Per creare un layout liquido è possibile specificare una determinata
larghezza (width) in relazione agli elementi presenti sia in valori di
percentuale che in pixel.
Tuttavia è allo stesso modo possibile non specificare una determinata
larghezza (width). In questo caso la “larghezza” della pagina sarà
impostata automaticamente a riempire l’area della finestra del
browser.
Allo stesso modo ogni elemento per cui non viene specificata una
data larghezza si estenderà fino a riempire l’elemento che lo contiene.
Vediamo due esempi di struttura (X)HTML relativi ad un layout di
tipo “liquido”.
Nella struttura a due colonne seguente, la larghezza (width) di ogni
elemento div è stata specificata con dei valori di percentuale, relativi
all’area che l’elemento dovrà occupare nella pagina.
La colonna principale, in questo layout, occuperà sempre il 70% della
larghezza della finestra del browser mentre la colonna più piccola a
destra occuperà sempre il 25% (il restante 5% viene usato per creare
un margine tra le colonne) della finestra, indipendentemente dalla
grandezza del monitor usato.
Prima struttura di esempio
<html>
<head><title>layout liquido primo esempio </title>
<link rel="stylesheet" type="text/css" href="liquido_1.css" />
<head>
<body>
<div>
<div id="main">
<h3>Il lupo e l'agnello</h3><br/>
<p>
Testo
</p>
<h3>La volpe e la cicogna</h3><br/>
<p>Testo </p>
</div>
<div id="second">
<h3>Cenni storici</h3><br/>
<p>Testo
</p>
<p>Testo<p>
</div>
</body>
</html>
Foglio di stile collegato
div#main { width: 70%; margin-right: 5%; float: left; background: #7FFFD4;}
div#second {width: 25%; float: left; background: #E9967A; }
body {text-align: justify; }
h3 {font-family: "comic sans ms"; font-style: italic; color: blue; }
Output
Layout “liquido” - Adattamento dei contenuti della pagina alla finestra del browser
Nel secondo esempio di stile, relativo alla struttura precedente, la
colonna secondaria sulla sinistra ha una specifica larghezza in pixel
mentre l’area di contenuto principale ha una larghezza di default
(senza indicazioni di valori specifici) per occupare automaticamente
la parte restante dello spazio disponibile. Sebbene questo layout
utilizzi una larghezza fissa per una colonna, può comunque essere
sempre considerato come “liquido” dal momento che le dimensioni
della pagina si basano sempre sulla larghezza della finestra del
browser.
Secondo foglio di stile collegato alla struttura (X)HTML precedente
div#main { width: auto; position: absolute; top: 0;left: 225px; background:
#7FFFD4;}
div#second { width: 200px; position: absolute; top: 0; left: 0; background:
#E9967A; }
body {text-align: justify; }
h3 {font-family: "comic sans ms"; font-style: italic; color: blue; }
Output
Impostare un layout fisso
In questo tipo di layout gli elementi vengono sempre visualizzati con
le dimensioni e la larghezza impostate per loro al momento della
creazione. Pertanto gli elementi non si adatteranno automaticamente
ai cambiamenti della finestra del browser.
Impostando una determinata larghezza per le nostre pagine è
necessario considerare due aspetti:
E’ necessario scegliere una grandezza base per le nostre pagine,
basata su quelle risoluzioni di schermo più utilizzate dagli utenti.
Generalmente pagine web con un layout fisso sono realizzate per
adattarsi ad un monitor con una risoluzione di almeno 800 × 600
pixel. Tuttavia modificando opportunamente le “larghezze” fisse dei
contenuti delle pagine sarà possibile creare un layout fisso adatto
direttamente anche a risoluzioni maggiori.
Tuttavia è bene considerare che mentre larghezze fisse minori, adatte
a schermi con una risoluzione di 800x600 pixel, potranno essere
visualizzate anche attraverso schermi con una risoluzione maggiore,
pagine web create già per essere adatte a monitor con risoluzione
maggiore non saranno correttamente fruibili attraverso schermi con
risoluzione inferiore.
Inoltre è importante decidere dove il nostro layout “fisso” dovrà
essere posizionato rispetto alla finestra del browser.
Generalmente, non impostando parametri diversi, un layout di questo
tipo verrà posizionato automaticamente sul lato sinistro della finestra
del browser. Nella maggior parte dei casi tuttavia, questi layout
vengono impostati come centrati rispetto alla finestra del browser, in
modo che rimanga dello spazio bianco su entrambi i lati della pagina
visualizzata e non solamente sul lato destro.
Vediamo ora due esempi di struttura con layout a larghezza fissa. Nel
primo esempio la pagina comparirà con il suo posizionamento
standard rispetto alla finestra del browser. Nel secondo output invece
la pagina con layout fisso è stata centrata rispetto alla finestra del
browser.
Struttura
<html>
<head><title>layout fisso primo esempio </title>
<link rel="stylesheet" type="text/css" href="fisso_1.css" />
<head>
<body>
<div id="fisso">
<div id="main">
<h3>Il lupo e l'agnello</h3><br/>
<p>Contenuto</p>
<h3>La volpe e la cicogna</h3><br/>
<p>Contenuto</p>
</div>
<div id="second">
<h3>Cenni storici</h3><br/>
<p>Contenuto
</p>
<p>Contenuto</p>
</div>
</div>
</body>
</html>
Foglio di stile collegato
#fisso {width: 750px; position: absolute; margin-left: auto; margin-right: auto;
padding: 0px; text-align: justify;}
#second {position: absolute; top: 0px; left: 0px; width: 200px; background:
orange; border: 2px solid fuchsia}
#main {margin-left: 225px; background-color: fuchsia; border: 2px solid
orange;}
h3 {text-align: center; font-family: "french script mt"; font-size: 22pt; }
L’output seguente mostra una pagina web all’interno di un monitor con
risoluzione 1280x800
<html>
<head><title>layout fisso secondo esempio centrato</title>
<link rel="stylesheet" type="text/css" href="fisso_centrato.css" />
<head>
<body align>
<div id="centrato">
<div id="main">
<h3>Il lupo e l'agnello</h3><br/>
<p>
Contenuto
</p>
<h3>La volpe e la cicogna</h3><br/>
Contenuto
</p>
</div>
<div id="second">
<h3>Cenni storici</h3><br/>
<p>Contenuto</p>
<p>Contenuto</p>
</div>
</div>
</body>
</html>
Foglio di stile collegato
#centrato{
position: relative;
width: 750px;
margin-left: auto;
margin-right: auto;
padding: 0px;
text-align: justify;
}
#second {
position: absolute;
top: 0px
right: 0px
margin: auto;
width: 200px;
background: orange;
border: 2px solid fuchsia;
padding: 10px;
}
#main {
position: absolute;
top: 0px;
right: 0px;
margin-left: 240px;
background-color: fuchsia;
border: 2px solid orange;
padding: 10px;
}
h3 {
text-align: center; font-family: "french script mt"; font-size: 22pt;
}
body {
background-color: #F4A460;
Output
Layout di questo tipo vengono creati specificando le dimensioni degli
elementi in pixel.
Normalmente come nell’esempio sopra presentato l’intero contenuto
della pagina è posizionato all’interno di un div (spesso questo
contenitore delle pagine web con layout fisso viene identificato con
un id con valore “container” oppure “wrapper”) che viene impostato
con una width specifica e in molti casi centrato rispetto alla finestra
del browser.
Utilizzando un layout di pagina “fisso”, per centrare la pagina rispetto
alla finestra del browser è possibile utilizzare il tag (X)HTML
<center> per chiudere l’intero contenitore rappresentato dal div
“wrapper”.
Tuttavia è possibile ottenere lo stesso effetto utilizzando i CSS.
Il metodo migliore per centrare una pagina con i fogli di stile, senza
l’impiego della marcatura (X)HTML, è quello di specificare una
determinata width per l’elemento div che contiene tutto il contenuto
della pagina.
Dopodichè sarà necessario impostare i margini left e right di tale
“contenitore” con valore “auto”, come evidenziato nell’esempio di
struttura visto in precedenza. In questo modo i contenuti verranno
automaticamente visualizzati come centrati nella finestra del browser.
Impostare un layout flessibile
Un layout di questo tipo si espande a seconda delle dimensioni del
testo contenuto. In questo modo la lunghezza delle righe (ovvero il
numero di caratteri per ogni linea di testo) rimarrà sempre lo stesso
anche cambiando le dimensioni del testo, al contrario di quello che
accade nei layout liquidi.
L’unità di misura utilizzata nella realizzazione dei layout elastici è
l’em, un’unità di misura relativa basata proprio sulle dimensioni dei
caratteri di testo. Ad esempio dato un carattere di testo con una
dimensione di 12px, un em corrisponderà a 12 pixel.
Nella formattazione dei testi per il web attraverso i fogli di stili è
bene utilizzare in relazione alle dimensioni dei font proprio l’unità di
misura em. Questa unità di misura permette al testo di diminuire le
sue dimensioni attraverso la funzione di zoom, disponibile in tutti i
moderni browser.
Nei layout elastici anche le dimensioni degli elementi di
contenimento verranno specificati in em. In questo modo le larghezze
impostate attraverso l’elemento width si adatteranno alle dimensioni
del testo.
Ad esempio nel caso in cui il testo sia impostato a 76%
(corrispondente a circa 12px nella maggior parte dei browser) e la
larghezza di pagina a 40 em, la pagina derivante da questi stili
corrisponderebbe a 480 pixel (40 em x 12px/em).
Quando l’utente ridimensionerà il testo della pagina a 24 pixel, la
pagina aumenterà di dimensioni fino a raggiungere i 960 pixel.
E’ importante non impostare una pagina con dimensioni superiori ai
40 em di ampiezza altrimenti questa potrebbe mostrare un testo di
dimensioni eccessive e soprattutto estendersi al di fuori della finestra
del browser e non risultare correttamente fruibile.
Esempio di struttura (X)HTML relativa ad un layout elastico
<html>
<head><title>Layout elastico</title>
<link rel="stylesheet" type="text/css" href="layout_elastico.css" />
<body>
<div id="header">
Favole di Fedro </div>
<div id="main">
<h3>Il lupo e l'agnello</h3>
<p>
Contenuto
</p>
<h3>La volpe e la cicogna</h3>
<p>
Contenuto</p>
</div>
<div id="second">
<h3>Cenni storici</h3>
<p>Contenuto
</p>
</div>
<div id="footer"> <address>Fiabe di tutti i tempi - Rivista online <br/>
Direttore responsabile - Camilla Bianchi<br/>
Gestione e copyright © Edizioni Online - Riproduzione vietata - Rivista
autofinanziata e senza scopo di lucro - Libera consultazione gratuita
<address></div>
</body>
</html>
Foglio di stile collegato
#header { background: #BDB76B; font-style: italic; }
#main {
background-color: #F0E68C;
float: left; width: 20em;
margin: 1em; text-align: justify;}
#footer {
clear: left;
background: #BDB76B; text-align: center; }
#second {
margin: 1em; font-style: italic; text-align: justify;}
h3 {font-style: italic;}
body {width: 40em; font-size: 76%; text-align: justify; position: relative; margin:
auto; }
Output
Creare un template
Ora vedremo in che modo organizzare le pagine web a seconda dei
layout scelti, creando delle sezioni interne senza dover ricorrere alle
tabelle (X)HTML.
In particolare vedremo in che modo è possibile realizzare le seguenti
tipologie di template:
Layout a più colonne attraverso l’utilizzo dei float
Layout a più colonne attraverso l’utilizzo dei posizionamenti
Template a colonne flottanti
Spesso il metodo più semplice per creare una colonna di contenuto in
una pagina web è quello di rendere l’elemento in questione flottante
su un lato, lasciando che il contenuto restante scorra intorno ad esso.
In questo caso sarà necessario impostare un certo margine per
mantenere libera l’area intorno alla “colonna flottante” inserita.
Il vantaggio principale di uno stile basato sulla proprietà float è
quello di facilitare l’inserimento di ulteriori elementi al di sotto di
quelli flottanti, come ad esempio una sezione footer in fondo alla
pagina.
Tuttavia gli elementi flottanti inseriti saranno sempre dipendenti dal
loro ordine nella struttura del codice sorgente, dal momento che a
questi non può essere applicata la proprietà di stile z-index.
Struttura (X)HTML di una pagina a due colonne flottanti con sezione footer,
basata su un layout liquido
<html>
<head><title>Layout flottante a due colonne</title>
<link rel="stylesheet" type="text/css" href="layout_flottante.css" />
<body>
<div id="header">
Favole di Fedro </div>
<div id="main">
<h3>Il lupo e l'agnello</h3>
<p>
Contenuti
</p>
<h3>La volpe e la cicogna</h3>
<p>
Contenuti
</p>
</div>
<div id="second">
<h3>Cenni storici</h3>
<p>Contenuti</p>
</div>
<div id="footer"> <address>Fiabe di tutti i tempi - Rivista online <br/>Direttore
responsabile - Camilla Bianchi<br/>Gestione e copyright © Edizioni Online -
Riproduzione vietata - Rivista autofinanziata e senza scopo di lucro - Libera
consultazione gratuita
<address>
</div>
</body>
</html>
Foglio di stile collegato:
#header { background: #CCC; padding: 15px; font-family: "french script mt";
font-size: 26pt; text-align: center;}
#main { background-color: aqua; float: left; width: 60%; margin-right: 5%;
margin-left: 5%; margin-top: 2%; margin-bottom: 2%; text-align: justify; padding:
10px; border: 2px dotted blue;}
#footer { clear: left; padding: 15px; background: #CCC; text-align: center; }
#second { margin-right: 5%; font-family: "french script mt"; font-size: 18pt; text-
align: justify;}
h3 {font-family: "french script mt";font-size: 22pt;}
body {margin: 0; padding: 0; }
Il documento sorgente è stato strutturato in 4 div, corrispondenti a:
intestazione di pagina
area di contenuto principale
l’area di contenuto secondaria
footer di pagina
Il contenuto principale della pagina (il div “main”) viene reso
flottante, mentre il contenuto secondario (il div “second”) scorre
intorno al primo.
Inoltre la width del div principale è stata impostata in modo tale che
la colonna occupi il 60% della larghezza totale della pagina.
I margini applicati al “div main” servono a dare spazio a quest’ultimo
rispetto agli elementi circostanti. In particolare il margine destro
impostato a 5% servirà a creare spazio proprio tra le due colonne di
testo.
Per il div indentificato come footer viene utilizzata la proprietà clear
affinchè l’elemento compaia appena sotto la colonna flottante del
contenuto principale.
Infine è importante notare che i margini e il padding dell’elemento
body sono stati impostati con valore 0, per ovviare alla impostazioni
di visualizzazione standard propri del browser.
In questo modo l’intera area di contenuto sarà visualizzata senza
l’aggiunta automatica di spazi bianchi su entrambi i lati.
La seguente struttura visualizzerà invece un layout fisso organizzato
in tre colonne flottanti: una colonna centrale relativa al contenuto
principale fiancheggiata da due sezioni laterali, utili per il
posizionamento di elementi navigazionali.
Struttura (X)HTML relativo ad un template a tre colonne flottanti, basato su
un layout di pagina a grandezza fissa
<html>
<head><title>Layout flottante a 3 colonne</title>
<link rel="stylesheet" type="text/css" href="layout_flottante_3.css" />
<body>
<center>
<div id="wrapper">
<div id="header"> Favole di Fedro </div>
<div id="link">
<h4>Altre storie</h4>
<p>
<a href="http://www.ilnarrastorie.it/Fedro/Le.rane.chiesero.un.re6.html">Le rane
che chiesero un re</a> <br/>
<a
href="http://www.ilnarrastorie.it/Fedro/Il.cane.vecchio.e.il.cacciatore5.html">Il
cane vecchio e il cacciatore</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.cane.fedele27.html" >Il cane
fedele</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.toro.e.il.vitello4.html" >Il toro e il
vitello</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Le.rane.e.il.Sole10.html" >Le rane e il
sole</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.lupo.e.la.gru12.html" >Il lupo e la
gru</a><br/>
<p>
</div>
<div id="main">
<h4>Il lupo e l'agnello</h4>
<p>Contenuto</p>
<h4>La volpe e la cicogna</h4>
<p>
Contenuto
</p>
</div>
<div id="second">
<h4>Cenni storici</h4>
<p>Contenuto</p>
</div>
<div id="footer"> <address>Fiabe di tutti i tempi - Rivista online <br/>
Direttore responsabile - Camilla Bianchi<br/>
Gestione e copyright © Edizioni Online - Riproduzione vietata - Rivista
autofinanziata e senza scopo di lucro - Libera consultazione gratuita
<address></div>
</div>
</center>
</body>
</html>
Foglio di stile collegato
#wrapper { width: 750px; border: solid 2px #A0522D;}
#header { background: #D87093; padding: 15px; text-align: center; font-family:
"french script mt"; font-size: 26pt;}
#link { background-color: #FFDAB9; float: left;
width: 175px; }
#main { background-color: #FFEFD5; float: left;
width: 400px; text-align: justify;}
#second { background-color: #FFDAB9; float: left;
width: 175px; text-align: justify;}
#footer {
clear: both; padding: 15px;
background: #D87093; text-align: center; }
h4 {text-align: center; }
body { margin: 0; padding: 0; background-color: #F5DEB3;}
p { padding: 0px 8px; }
Output
In questo caso, dal momento che si tratta di una pagina con layout
fisso, tutti gli elementi di contenuto sono stati posizionati all’interno
di un div principale identificato come “wrapper” con una larghezza
(width) predefinita.
Dal momento che per i float non è possibile stabilire un ordine
specifico, l’elemento div qualificato come “link” è stato posizionato
in struttura prima degli altri div di contenuto (main e second).
In questo caso per rendere la pagina come “centrata” rispetto alla
finestra del browser è stato utilizzato il tag HTML <center>.
Attraverso le regole di stile i div link, main e second sono stati resi
flottanti a sinistra. In questo modo tali elementi compaiono l’uno di
seguito all’altro a partire dalla sinistra dell’elemento div generale
(“wrapper”) che li contiene, andando a formare le tre colonne del
template.
Dal momento che non è stato impostato un padding, dei bordi o dei
margini in relazione ai tre elementi flottanti, questi occupano l’intera
larghezza del contenitore esterno.
Il valore “both”, associato alla proprietà clear, applicata al footer, fa
in modo che questo compaia immediatamente sotto ai tre elementi
flottanti.
Template e posizionamento assoluto
Il metodo di posizionamento assoluto può essere utilizzato come la
proprietà float per creare template a più colonne. In questo modo è
possibile stabilire un qualsiasi ordine in relazione agli elementi in
struttura. Tuttavia con questo metodo è anche possibile che gli
elementi si sovrappongano.
Ad esempio, nel caso in cui il contenuto di una colonna fosse molto
esteso, questo andrebbe a coprire automaticamente l’area di footer.
Nella seguente struttura, relativa ad un layout di pagina “liquido”,
verrà utilizzato il metodo assoluto per creare un template a due
colonne, con intestazione a area di footer.
Struttura esempio di un template a 2 colonne – basato su un layout liquido
<html>
<head><title>Layout con posizionamento assoluto a 2 colonne</title>
<link rel="stylesheet" type="text/css" href="layout_assoluto_colonne.css" />
<body>
<div id="header"> Favole di Fedro </div>
<div id="main">
<h4>Il lupo e l'agnello</h4>
<p>
Contenuto
</p>
<h4>La volpe e la cicogna</h4>
<p>
Contenuto
</p>
</div>
<div id="second">
<h4>Altre storie</h4>
<p>
<a href="http://www.ilnarrastorie.it/Fedro/Le.rane.chiesero.un.re6.html">Le rane
che chiesero un re</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.cane.vecchio.e.il.cacciatore5.html">
Il cane vecchio e il cacciatore</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.cane.fedele27.html" >Il cane
fedele</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.toro.e.il.vitello4.html" >Il toro e il
vitello</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Le.rane.e.il.Sole10.html" >Le rane e il
sole</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.lupo.e.la.gru12.html" >Il lupo e la
gru</a><br/>
<p>
</div>
<div id="footer"> <address>Fiabe di tutti i tempi - Rivista online <br/>
Direttore responsabile - Camilla Bianchi<br/>
Gestione e copyright © Edizioni Online - Riproduzione vietata - Rivista
autofinanziata e senza scopo di lucro - Libera consultazione gratuita
<address></div>
</body>
</html>
Foglio di stile collegato
#header { height: 70px;
padding: 15px; background: #6B8E23; color: white; font-family: "french script
mt"; font-size: 26pt; text-align: center;}
#main {
margin-right: 30%; margin-left: 5%; background-color: #EEE8AA; text-align:
justify; padding-left: 10px; padding-right: 10px; padding-top: 10px; }
#second {
position: absolute;
top: 100px; right: 0px; width: 25%; margin-right: 20px;
background: #FFA500;
padding: 10px; text-align: center; }
#footer {
margin-right: 30%; margin-left: 5%;
padding: 15px;
background: #6B8E23; color: white; text-align: center;}
body {
margin: 0;
padding: 0;}
h4 {text-align: center; }
Output
Il foglio di stile stabilisce un posizionamento assoluto sul lato destro
della pagina per il div qualificato come “second” e una sua distanza
dall’header della pagina di 100 pixel verso il basso.
Il div “main” è inoltre provvisto di un margine adeguato a destra
proprio per il riposizionamento del div “second”.
Nel seguente template a tre colonne, basato su un layout di pagina
liquido, entrambe le colonne laterali vengono riposizionate con il
metodo assoluto. I margini vengono applicati su entrambi i lati del
contenuto principale (div “main”) per lasciare spazio sufficiente alle
colonne di contenuto laterali.
Struttura (X)HTML
<html>
<head><title>Layout con posizionamento assoluto a 3 colonne</title>
<link rel="stylesheet" type="text/css" href="layout_assoluto_colonne3.css" />
<body>
<div id="header"> Favole di Fedro </div>
<div id="main">
<h4>Il lupo e l'agnello</h4>
<p>
Contenuto</p>
<h4>La volpe e la cicogna</h4>
<p>
Contenuto
</p>
</div>
<div id="link">
<h4>Altre storie</h4>
<p>
<a href="http://www.ilnarrastorie.it/Fedro/Le.rane.chiesero.un.re6.html">
Le rane che chiesero un re</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.cane.vecchio.e.il.cacciatore5.html">
Il cane vecchio e il cacciatore</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.cane.fedele27.html" >Il cane
fedele</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.toro.e.il.vitello4.html" >Il toro e il
vitello</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Le.rane.e.il.Sole10.html" >Le rane e il
sole</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.lupo.e.la.gru12.html" >Il lupo e la
gru</a><br/></p>
</div>
<div id="second">
<h4>Cenni storici</h4>
<p>Contenuto</p>
</div>
<div id="footer"> <address>Fiabe di tutti i tempi - Rivista online <br/>
Direttore responsabile - Camilla Bianchi<br/>
Gestione e copyright © Edizioni Online - Riproduzione vietata - Rivista
autofinanziata e senza scopo di lucro - Libera consultazione gratuita
<address></div>
</body>
</html>
Foglio di stile collegato
#header {
height: 70px;
padding: 15px; background: #CCC;
background: #6B8E23; color: white; font-family: "french script mt"; font-size: 26pt; text-
align: center;}
#main {
margin-left: 25%; margin-right: 25%;
text-align: justify; }
#link {
position: absolute;
top: 110px; left: 10px; padding: 10px;
width: 22%; background: #FFD700;;
}
#second {
position: absolute;
top: 110px;
right: 10px; padding: 10px;
width: 22%; background: #FFD700;
text-align: justify;}
#footer {
margin-right: 25%; margin-left: 25%;
padding: 15px;
background: #6B8E23; color: white; text-align: center;}
h4 {text-align: center; font-family: "french script mt"; font-size: 22pt;}
Output
In questo template sono stati riposizionati attraverso il metodo
assoluto i div “link” e “second”.
Quest’ultimo foglio di stile è quasi del tutto identico a quello visto in
precedenza ad eccezione dei margini che sono stati applicati ai div
“main” e “footer” per far spazio alle colonne posizionate su entrambi
i lati della pagina.
I div “link” e “second” sono stati riposizionati quasi a ridosso dei lati
dell’elemento contenitore. Per separarli da questo è stato aggiunto
solo un minimo margine a lato di 10px.
Al footer sono stati applicati dei margini specifici per fare in modo
che le colonne a lato non vadano a coprirlo.
Nel seguente template le tre colonne sono posizionate sempre con il
metodo assoluto all’interno di un layout di pagina fisso.
Inoltre a questa struttura di base sono stati aggiunti dei valori di
padding e dei bordi specifici per separare le varie sezioni della
pagina.
Struttura (X)HTML relativa ad un template a tre colonne, basato su un
layout di pagina a grandezza fissa
<html>
<head><title>Layout a 3 colonne con bordi</title>
<link rel="stylesheet" type="text/css" href="layout_3_bordi.css" />
<body>
<center>
<div id="wrapper">
<div id="header"> Favole di Fedro </div>
<div id="main">
<h4>Il lupo e l'agnello</h4>
<p>Contenuto</p>
<h4>La volpe e la cicogna</h4>
<p>
Contenuto
</p>
<h4>I due muli da soma</h4>
<p>Contenuto</p>
</div>
<div id="link">
<h4>Altre storie</h4>
<p>
<a href="http://www.ilnarrastorie.it/Fedro/Le.rane.chiesero.un.re6.html">Le rane
che chiesero un re</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.cane.vecchio.e.il.cacciatore5.html">
Il cane vecchio e il cacciatore</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.cane.fedele27.html" >Il cane
fedele</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.toro.e.il.vitello4.html" >Il toro e il
vitello</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Le.rane.e.il.Sole10.html" >Le rane e il
sole</a> <br/>
<a href="http://www.ilnarrastorie.it/Fedro/Il.lupo.e.la.gru12.html" >Il lupo e la
gru</a><br/>
<p>
</div>
<div id="second">
<h4>Cenni storici</h4>
<p>Contenuto</p> <p> Contenuto</p> <p>Contenuto</p></div>
</div>
</center>
</body>
</html>
Foglio di stile collegato
#wrapper {
position: relative; width: 750px; }
#header {
height: 70px;
padding: 15px; background: #DDA0DD; font-family: "french script mt"; font-
size: 26pt; text-align: center;
}
#main {
position: absolute;
top: 100px;
left: 150px;
width: 428px;
border-left: solid 1px #6A5ACD;
border-right: solid 1px #6A5ACD;
padding: 0px 10px; background-color: #B0E0E6; text-align: justify; }
#link {
position: absolute;
top: 100px;
left: 0px;
width: 134px;
padding: 0 8px; background: #DA70D6; }
#second {
position: absolute;
top: 100px;
left: 600px;
width: 134px;
padding: 0 8px; background: #DA70D6; color: white; text-align: justify; }
body {
margin: auto;
padding: 0; background: #FFF5EE;}
Output
Nella struttura presentata tutti e tre i div interni al contenitore
“wrapper” sono posizionati in maniera assoluta.
Il div “wrapper” è stato realizzato con una larghezza fissa di 750
pixel e la sua posizione è stata impostata come relativa per rendere
tale elemento come contenitore degli altri elementi riposizionati.
I tre div “link”, “main,” e “second” sono riposizionati in maniera
assoluta appena sotto la barra di intestazione della pagina.
I valori della proprietà left sono relativi alla distanza dal limite
sinistro dell’elemento di contenimento per ogni div e non solamente
per l’area di contenuto principale (“main”).
Aggiungendo padding, margini e bordi ad un layout di pagina a
larghezza fissa sarà ovviamente necessario eseguire dei calcoli
appropriati per quanto riguarda le dimensioni dei vari elementi da
riposizionare all’interno del contenitore generale.
La somma delle “width” dei singoli elementi non dovrà infatti
superare quella dell’elemento contenitore.
FINE LEZIONE