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 â&#x20AC;&#x153;liquidoâ&#x20AC;? - 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â&#x20AC;&#x2122;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 â&#x20AC;&#x153;liquidoâ&#x20AC;? 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â&#x20AC;&#x2122; 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â&#x20AC;&#x2122;output seguente mostra una pagina web allâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;utente ridimensionerĂ il testo della pagina a 24 pixel, la pagina aumenterĂ di dimensioni fino a raggiungere i 960 pixel. Eâ&#x20AC;&#x2122; 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; textalign: 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 â&#x20AC;&#x153;mainâ&#x20AC;?) 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; textalign: 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â&#x20AC;&#x2122;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"; fontsize: 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