Layout e template

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">


<p>Contenuto</p>


<p>Contenuto</p>

</div>

<div id="second">


<p>Contenuto

</p>

<p>Contenuto</p>

</div>

</div>

</body>

</html>


#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">


<p>

Contenuto

</p>


Contenuto

</p>

</div>

<div id="second">


<p>Contenuto</p>

<p>Contenuto</p>

</div>

</div>

</body>

</html>


#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>


#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">


<p>

Contenuti

</p>


<p>

Contenuti

</p>

</div>

<div id="second">


<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">


<p>Contenuto</p>


<p>

Contenuto

</p>

</div>

<div id="second">


<p>Contenuto</p>

</div>





<address></div>

</div>

</center>

</body>

</html>


#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="main">


<p>

Contenuto

</p>


<p>

Contenuto

</p>

</div>

<div id="second">


<p>



<a href="http://www.ilnarrastorie.it/Fedro/Il.cane.vecchio.e.il.cacciatore5.html">

Il cane vecchio e il cacciatore</a> <br/>


fedele</a> <br/>


vitello</a> <br/>


sole</a> <br/>


gru</a><br/>

<p>

</div>





<address></div>

</body>

</html>


#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="main">


<p>

Contenuto</p>


<p>

Contenuto

</p>

</div>

<div id="link">


<p>

<a href="http://www.ilnarrastorie.it/Fedro/Le.rane.chiesero.un.re6.html">

Le rane che chiesero un re</a> <br/>




fedele</a> <br/>


vitello</a> <br/>


sole</a> <br/>


gru</a><br/></p>

</div>

<div id="second">


<p>Contenuto</p>

</div>





<address></div>

</body>

</html>


#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="main">


<p>Contenuto</p>


<p>

Contenuto

</p>

<h4>I due muli da soma</h4>

<p>Contenuto</p>

</div>

<div id="link">


<p>






fedele</a> <br/>


vitello</a> <br/>


sole</a> <br/>


gru</a><br/>

<p>

</div>

<div id="second">


<p>Contenuto</p> <p> Contenuto</p> <p>Contenuto</p></div>

</div>

</center>

</body>

</html>


#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

Layout e template

Documents

Transcript of Layout e template