Posizionamento degli elementi by Corso Grafica e Web Design

Applicare lo stile gestire il posizionamento degli elementi

Introduzione In questa unità vedremo in dettaglio in che modo cambiare il posizionamento standard degli elementi dei nostri documenti (X)HTML utilizzando i fogli di stile. Le proprietà float, già menzionata nella lezione precedente, e position costituiscono le metodologie CSS principali per sistemare, secondo le proprie esigenze, i vari elementi (X)HTML all’interno delle pagine. Mentre la proprietà float serve a spostare gli elementi a sinistra e a destra di una pagina, permettendo al testo di scorrere a fianco di questi, la proprietà relativa al posizionamento (position) determinerà

l’esatta posizione (in unità di misura specifiche) di un elemento nella pagina. Il “flusso” standard degli elementi (X)HTML in una pagina In una pagina web i vari elementi, senza l’applicazione di regole specifiche, saranno visualizzati nello stesso ordine in cui compaiono nel documento sorgente. Gli elementi di blocco compariranno quindi in sequenza, l’uno di seguito all’altro, fino a riempire l’intera finestra del browser.

Allo stesso modo gli elementi in linea della struttura (X)HTML compariranno l’uno di seguito all’altro a riempire gli elementi di blocco che li contengono. Quando la finestra o l’elemento che contiene tutti gli altri elementi (X)HTML viene ridimensionato, gli elementi di blocco livello e gli elementi in linea interni si adatteranno automaticamente alle nuove dimensioni, come nell’esempio seguente:

Le proprietĂ CSS relative al float e al posizionamento vengono usate proprio per modificare le relazioni spaziali tra gli elementi (X)HTML.

Gestire la proprietà di stile float La proprietà float costituisce uno dei principali strumenti dei CSS moderni per creare layout di pagina a più colonne o sezioni, barre di navigazione e allineamenti di contenuto in stile tabella, senza tuttavia dover racchiudere i contenuti in una tabella (X)HTML. Coma abbiamo già visto, la proprietà float, serve a determinare il posizionamento di un qualsiasi elemento della struttura (X)HTML a sinistra o a destra di una pagina, permettendo al contenuto successivo di scorrere a fianco di questo. In questo modo il contenuto successivo

non dovrà necessariamente comparire sotto all’elemento “flottante, come avviene invece nella successione standard degli elementi (X)HTML in una pagina. Vediamo ora le differenze tra una struttura con stile float e una struttura senza la stessa definizione di stile. Struttura esempio con float <html> <head><title>utilizzare la proprietà float</title> <link rel="stylesheet" type="text/css" href="float.css" /> </head> <body>

<img src="bacchetta.gif"/>Testo a piacere! </body> </html>

Foglio di stile collegato img { float: right; } p { padding: 15px; text-align: center; }

Output

Struttura senza Float <html> <head><title>senza float</title> <link rel="stylesheet" type="text/css" href="senzafloat.css" /> </head> <body> <img src="bacchetta.gif"/>Testo a piacere </body> </html> Foglio di stile collegato p { padding: 15px; text-align: center; }

Output

Tuttavia per fare in modo che il testo non risulti troppo vicino all’immagine, è possibile aggiungere del margine, così come abbiamo visto nell’unità precedente. Pertanto la seguente struttura aggiungerà un margine di 10 px su tutti i lati dell’elemento immagine (img). Struttura esempio con float <html> <head><title>utilizzare la proprietà float</title> <link rel="stylesheet" type="text/css" href="float.css" /> </head> <body>

<img src="bacchetta.gif"/>Testo a piacere! </body> </html>

Foglio di stile collegato img { float: right; margin: 20px; } p { padding: 15px; text-align: justify; }

Output

Dagli esempi riportati vediamo come, con la proprietà float, l’immagine sia stata rimossa dalla sua normale posizione all’interno di una pagina. Tuttavia l’elemento immagine continuerà anche in questo caso a influenzare il contenuto circostante, come vediamo attraverso l’esempio successivo, dove il testo si sposta per far posto all’immagine flottante, adeguandosi al suo nuovo posizionamento.

A questo riguardo è importante ricordare che l’immagine con stile float è posizionata all’interno dell’area di contenuto (quindi entro il limite interno, secondo la schematizzazione del box model) dell’elemento paragrafo che la contiene. L’immagine non si estende nell’area di padding del paragrafo. Inoltre i margini vengono mantenuti su tutti i lati dell’immagine definita dallo stile float. Questo indica che l’intero contenitore dell’elemento img è soggetto allo stile float.

Vediamo ora altre modalità con cui è possibile sfruttare la proprietà di stile float. Come accennato, tale proprietà di stile può essere associata sia agli elementi in linea sia agli elementi di blocco. Vediamo ora quali sono le eventuali differenze nell’applicazione di questa stessa proprietà alle due tipologie di elementi (X)HTML.

 Elementi in linea e proprietà float Nell’esempio precedente abbiamo applicato la proprietà float ad un elemento in linea (img). Ora proveremo ad applicare la stessa proprietà di stile sempre ad un elemento in linea, ma stavolta di tipo testuale. Struttura esempio <html> <head><title>Float applicato ad un elemento in linea di testo</title> <link rel="stylesheet" type="text/css" href="float_avviso.css"/> </head>

<body> A breve sul sito la Storia di Cappuccetto Rosso Testo del paragrafo a scelta </body> </html>

Foglio di stile collegato span.avviso { float: right; margin: 10px; width: 200px; color: #FFF; background-color: #9D080D; padding: 4px;} p { padding: 15px; background-color: #FFF799; border: 2px solid #6C4788;}

Output

L’effetto finale è lo stesso visto per l’elemento immagine. Tuttavia applicando la proprietà float ad un elemento di testo in linea è necessario considerare un’altra questione.

In questo caso specifico sarà bene fornire le dimensioni dell’elemento di testo flottante, attraverso l’utilizzo della proprietà di stile width, analizzata in dettaglio nell’unità precedente. Senza uno specifico valore di width, come nella struttura sopra riportata, in associazione dell’elemento di testo in linea flottante, l’area di contenuto del box si espanderà fino a raggiungere i valori massimi. Le immagini (img) hanno già una propria larghezza e pertanto non è necessario modificarla per utilizzare al meglio la proprietà float. Gli elementi in linea flottanti si comportano per il resto esattamente come gli elementi di blocco livello che andremo a considerare a breve.

Il margine viene mantenuto su tutti e 4 i lati dello span di testo, anche se normalmente i margini superiore e inferiore non verrebbero resi nella visualizzazione finale. Questo perchĂŠ un elemento di testo in linea flottante segue le regole di visualizzazione degli elementi di blocco livello e i margini saranno pertanto resi automaticamente su tutti e 4 i lati dellâ&#x20AC;&#x2122;elemento.

 Elementi di blocco livello e proprietà float Nella seguente struttura di esempio un intero elemento di blocco livello, un paragrafo, viene reso flottante attraverso l’applicazione della proprietà di stile apposita. Struttura esempio: <html> <head><title>Float paragrafo</title> <link rel="stylesheet" type="text/css" href="p_float.css"/> </head> <body> contenuto di paragrafo contenuto di paragrafo contenuto di paragrafo

contenuto di paragrafo contenuto di paragrafo contenuto di paragrafo </body> </html>

Foglio di stile collegato p#float { float: left; width: 200px; margin-top: 0px; background: #A5D3DE;} p { border: 1px solid red;}

Output

Attraverso il foglio di stile abbiamo aggiunto una linea rossa attorno a tutti gli elementi p per evidenziare i loro “confini”. Inoltre il margine superiore dell’elemento flottante è stato impostato con valore 0, per sovrascrivere l’impostazione di default relativa ai margini di paragrafo utilizzata dai browser. Questo permette di allineare il paragrafo flottante rispetto al margine superiore del paragrafo successivo, nella sequenza del file sorgente. Così come avviene per l’elemento immagine (elemento in linea), un elemento paragrafo (elemento di blocco) si muove sul lato stabilito (sinistro, nel caso del nostro esempio) e il resto del contenuto testuale si estende intorno ad esso; invece normalmente gli elementi di blocco

dovrebbero apparire impilati e riportati l’uno di seguito all’altro nella visualizzazione finale, a rispettare la struttura (X)HTML base. Anche per quanto riguarda gli elementi di blocco livello flottanti è bene fornire sempre la loro larghezza, utilizzando la proprietà di stile width. Non fornendo un valore di width specifico, la larghezza del blocco flottante verrà impostata automaticamente, andando a riempire l’area della finestra del browser, rendendo quindi inutile l’impostazione dello stile float. Infine ,un ultimo punto da considerare in relazione alla proprietà float associata agli elementi di blocco livello, è che l’elemento flottante

occuperà sempre la stessa posizione, rispetto alla sequenza del documento sorgente. Pertanto il paragrafo flottante, seppur riposizionato, rimarrà sempre sotto qualsiasi altro elemento di blocco che lo precede, nella sequenza normale del file (X)HTML di struttura. Volendo far apparire un elemento flottante in prima posizione, questo dovrà necessariamente comparire in struttura come primo elemento di blocco livello, nella sequenza generale del file (X)HTML. Ovviamente è possibile inserire più di un elemento flottante all’interno di un pagina o all’interno di un singolo elemento della

struttura. In questo caso i vari elementi flottanti saranno posizionati, secondo le ultime specifiche CSS 2.1, in modo da non sovrapporsi mai. Vediamo una struttura dâ&#x20AC;&#x2122;esempio relativa a questâ&#x20AC;&#x2122;ultima situazione. Struttura esempio <html> <head><title>Float multipli</title> <link rel="stylesheet" type="text/css" href="float_multipli.css"/> </head> <body> Paragrafo 1 // paragrafo non flottante // Paragrafo 2 Paragrafo 3

Paragrafo 4 Paragrafo 5 // Paragrafi flottanti a sinistra Paragrafo 6 Paragrafo 7 Paragrafo 8 Paragrafo 9 Paragrafo 10 </body> </html>

Foglio di stile collegato: p#float { float: left; width: 200px; margin: 0px; background: #CCC;} p {border: 1px solid red;}

Output

L’output mostra cosa succede quando una serie sequenziale di paragrafi viene resa “flottante” su uno stesso lato della pagina (left).

I paragrafi flottanti iniziano a susseguirsi dall’angolo sinistro fino a “riposizionare” anche il primo paragrafo successivo, non flottante (paragrafo 6 nell’output), nella sequenza generale. Tuttavia nel caso in cui uno dei paragrafi flottanti, come ad esempio il paragrafo 2, risultasse troppo lungo, questo verrebbe spinto contro il limite del float, come nell’esempio seguente:

L’inserimento di più elementi flottanti di questo tipo all’interno di una pagina è un metodo utilizzato generalmente per creare layout a più colonne e barre di navigazione orizzontali, come vedremo in dettaglio nella prossima unità.

Elementi flottanti e proprietà di stile clear Ora vedremo in che modo modificare il testo a fianco degli elementi flottanti affinchè questo non scorra automaticamente attorno a questi. Questo effetto può essere realizzato utilizzando la proprietà di stile clear applicata all’elemento che vogliamo far iniziare esattamente sotto all’elemento flottante. Usando la proprietà clear (valori: left, right, both, none – valore di default) potremmo quindi impedire al testo di comparire immediatamente a fianco di un elemento flottante. In questo modo un testo con stile clear comparirà nel primo spazio disponibile al di sotto dell’elemento float.

Vediamo ora come utilizzare questa specifica proprietà di stile, applicabile solamente agli elementi di blocco livello. La proprietà clear dovrà essere applicata solo all’elemento non flottante che vogliamo riposizionare e non direttamente all’elemento caratterizzato come “float”. Il valore “left” in associazione alla proprietà clear indica che l’elemento sarà riposizionato sotto qualsiasi elemento “flottante” a sinistra. Allo stesso modo il valore “right” indica che l’elemento sarà riposizionato sotto qualsiasi elemento “flottante” a destra. Nel caso in cui fossero presenti diversi elementi flottanti, volendo che gli altri elementi non flottanti siano posizionati sotto questi, sarà

necessario utilizzare entrambi i valori di clear, relativi ai due lati della pagina. Nell’esempio seguente la proprietà clear viene usata per far comparire un elemento h2 sotto ad altri elementi flottanti a sinistra. L’output relativo alla seguente struttura (X)HTML mostra infatti come l’intestazione sia posizionata nel primo spazio disponibile, appena sotto l’immagine flottante. <html> <head><title>utilizzare la proprietà clear</title> <link rel="stylesheet" type="text/css" href="clear.css" />

</head> <body> Questa sezione del nostro sito web Ă¨ dedicata alla raccolta delle favole per bambini piĂš famose ... <img src="bacchetta.gif"/> <h2>Cenerentola</h2> Testo del paragrafo </body> </html>

Foglio di stile collegato body { color: blue; } p {text-align: center; } img { float: left; margin-right: 10px; } h2 { clear: left; margin-top: 2em; }

Output

Nell’output vediamo tuttavia che, sebbene sia stato applicato un margine superiore di 2 em all’elemento h2, tale distanza spesso non viene resa correttamente. Per assicurare una certa spaziatura tra l’elemento flottante e l’elemento con stile clear sarà bene applicare un margine inferiore anche all’elemento “float”.

Posizionamento attraverso i CSS â&#x20AC;&#x201C; la proprietĂ position Attraverso i moderni CSS Ă¨ possibile posizionare un dato elemento (X)HTML in qualsiasi punto della pagina. Inoltre Ă¨ possibile posizionare un dato elemento in relazione alla finestra del browser rimanendo fissi nella posizione determinata anche durante lo scorrimento della pagina. Tuttavia non tutte le moderne funzioni CSS di posizionamento vengono supportate allo stesso modo dai diversi browser.

Tipologie di posizionamento La proprietà CSS dedicata a stabilire l’esatto posizionamento degli elementi è la proprietà position, applicabile a qualsiasi elemento di una struttura (X)HTML. I valori associabili a questa proprietà sono i seguenti: static, relative, absolute, fixed. Il valore di default è static. Attraverso la proprietà position sarà pertanto possibile indicare quale metodo dovrà essere utilizzato per il posizionamento di un dato elemento.

 Metodo statico (valore “static”) Un elemento (X)HTML, senza specificare altrimenti sarà posizionato, al momento della visualizzazione finale, in maniera statica, mantenendo quindi la sua posizione nel normale “flusso” del documento sorgente. Es. di stile con posizionamento “statico” selettore { width: 350px; height: 150px; border: 1pt solid black; background-color: white; padding: .5em; position: static; }

 Metodo relativo (valore “relative”) In questo modo un dato elemento verrà spostato rispetto alla sua posizione originale, nella normale sequenza di un documento sorgente. Inoltre un posizionamento “relative” preserverà automaticamente come vuoto lo spazio precedentemente occupato dall’elemento spostato. Es. di stile con posizionamento “relativo” selettore {width: 350px; height: 150px; border: 1pt solid black; background-color: white; padding: .5em; position: relative; top: 100px; left: 100px;}

Dall’esempio riportato vediamo che per impostare un posizionamento relativo non basta utilizzare la proprietà position e indicare il metodo. In questo caso è necessario determinare, con le proprietà top, left (ma anche con le proprietà right e bottom), la distanza desiderata rispetto alla posizione originale dell’elemento, nella sequenza della struttura (X)HTML. Le proprietà top e left in questo caso esprimono la distanza in relazione alla posizione di partenza dell’elemento. Pertanto un dato elemento sarà spostato verso il basso e verso sinistra di 100px.

 Metodo assoluto (valore “absolute”) Gli elementi posizionati in questo modo sono rimossi dalla sequenza stabilita nel documento sorgente e posizionati relativamente al loro elemento contenitore, da cui sono dipendenti. selettore {width: 350px; height: 150px; border: 1pt solid black; background-color: white; padding: .5em; position: absolute; top: 100px; right: 100px; } In questo caso, top e left indicano che l’elemento con posizionamento assoluto si sposterà di 100px verso il basso e verso sinistra rispetto all’elemento che lo contiene.

 Metodo fisso (valore “fixed”) Un elemento posizionato con questo metodo rimarrà fisso nella posizione assegnata anche durante lo scorrimento del documento. Elementi impostati come “fissi” vengono rimossi dalla sequenza normale di un documento sorgente e posizionati relativamente alla finestra del browser e non in relazione ad un altro elemento presente nella struttura (X)HTML. selettore {width: 350px; height: 150px; border: 1pt solid black; background-color: white; padding: .5em; position: ﬁxed; bottom: 100px; left: 100px;}

In questo caso le proprietà bottom e left indicano che l’elemento si sposterà di 100px verso l’alto basso e verso destra rispetto alla finestra del browser. Vediamo ora in dettaglio l’applicazione dei metodi citati in relazione al posizionamento degli elementi della struttura (X)HTML

Usare il posizionamento relativo Come già menzionato, il posizionamento relativo muove un dato elemento (il selettore della regola) rispetto alla sua posizione originaria nella struttura del documento. Lo spazio che sarebbe stato occupato da tale elemento rimarrà invariato, non determinando modifiche nel layout circostante. Vediamo una struttura di esempio in relazione a questo specifico stile di posizionamento. Nel foglio di stile riportato di seguito un elemento in linea em viene posizionato secondo il metodo “relative”. Nella stessa regola viene utilizzata la proprietà top per muovere l’elemento em di 5 pixel verso il basso rispetto alla sua posizione di partenza.

La proprietà left viene invece utilizzata per indicare che l’elemento verrà spostato anche di 80 pixel verso destra. Pertanto è importante ricordare che le proprietà aggiuntive associate alla proprietà position, top, bottom, right e left indicano sempre un movimento di moto da luogo.  Indicando la proprietà left l’elemento verrà spostato a destra.  indicando la proprietà right, si indicherà uno spostamento a sinistra.  Indicando la proprietà top si indicherà uno spostamento verso il basso.

 Indicando la proprietà bottom si stabilirà uno spostamento verso l’alto. Struttura esempio <html> <head><title>posizionamento relativo</title> <link rel="stylesheet" type="text/css" href="pos_rel.css" /> </head> <body> C'era una volta in una fredda giornata d'inverno; <img src="biancaneve.gif" /> Contenuto restante del paragrafo

</body> </html>

Foglio di stile collegato body {color: blue; text-align: justify;} em { position: relative; top: 5px; left: 80px; background-color: fuchsia;} img {float: right; margin-left: 10px; }

Output relativo alla struttura riportata

Output senza lo stile relativo al posizionamento

L’elemento che è stato riposizionato attraverso la regola di stile descritta può ovviamente essere spostato fino a coprire gli altri elementi, come nell’output seguente (con proprietà top impostata a 20px):

Usare il posizionamento assoluto Questo metodo Ă¨ molto piĂš flessibile rispetto al metodo â&#x20AC;&#x153;relativo" nella realizzazione di layout personalizzati. Prendiamo in considerazione la struttura di esempio vista in precedenza utilizzando stavolta il metodo di posizionamento assoluto. Foglio di stile collegato body {color: blue; text-align: justify;} em { position: absolute; top: 20px; left: 80px; background-color: fuchsia;}img {float: right; margin-left: 10px; }

Output

Output relativo al precedente posizionamento relativo, con gli stessi valori di top e left

Dal confronto tra i due output vediamo che quando un elemento viene riposizionato in maniera assoluta, lo spazio originario occupato dallâ&#x20AC;&#x2122;elemento non rimane per forza vuoto.

Nel primo output lo spazio una volta occupato dall’elemento em viene automaticamente ridimensionato, senza lasciare inutili parti vuote nel layout di pagina. Nella struttura riportata è stata modificata la posizione di default di un elemento em, dipendente da un elemento gerarchicamente superiore: l’elemento p. Pertanto il nuovo posizionamento dell’elemento em avviene in riferimento all’elemento paragrafo che lo contiene. Qualora l’elemento em non fosse contenuto all’interno di un paragrafo, allora il suo nuovo posizionamento avverrebbe in relazione al tag body che lo contiene e che rappresenta il “blocco di contenimento” ad esso più vicino.

Per gestire attraverso i CSS i diversi blocchi di contenimento degli elementi eventualmente presenti in una struttura (X)HTML è necessario tenere conto delle seguenti regole:  Se un elemento non è contenuto all’interno di un altro elemento riposizionato, nemmeno all’interno di un elemento body, questo sarà spostato in relazione al blocco di contenimento iniziale (l’elemento html).  Tuttavia quando un elemento è contenuto all’interno di un altro elemento che è stato a sua volta riposizionato attraverso un metodo relativo, assoluto o fisso, l’elemento in questione verrà riposizionato in relazione ai bordi di contenimento dell’elemento che lo contiene.

Vediamo ora cosa succede applicando la proprietà position, con valore “relative”, all’elemento p, rispetto al quale viene stabilito anche un riposizionamento assoluto dell’elemento em. Foglio di stile collegato alla struttura (X)HTML vista in precedenza: body {color: blue; text-align: justify;} em { position: absolute; top: 20px; left: 80px; background-color: fuchsia;} img {float: right; margin-left: 10px; } p { position: relative; padding: 15px; background-color: #DBFDBA; border: 2px solid #6C4788;}

Output

Dall’esempio di stile riportato è evidente che l’elemento em è stato effettivamente riposizionato 20 pixel più in basso e 30 pixel più a

destra rispetto all’angolo in alto a sinistra del contenitore di paragrafo e non rispetto alla finestra del browser. Inoltre l’elemento em è stato posizionato in relazione al padding del paragrafo, all’interno del bordo di quest’ultimo. Nell’esempio di stile seguente vediamo cosa succede aggiungendo all’elemento em, riposizionato in modo assoluto, un margine e un dato valore di width. Esempio di stile body {color: blue; text-align: justify;}

em { width: 200px; margin: 25px; position: absolute; top: 30px; left: 60px; background-color: #FFB6C1; text-align: center;color: white; font-weight: bolder;} img {float: right; margin-left: 10px; } p { position: relative; padding: 15px; background-color: #DBFDBA; border: 2px solid #6C4788;}

Output

Nellâ&#x20AC;&#x2122;output il margine di 25px viene visualizzato dal browser (attraverso il menĂš strumenti di sviluppo) in arancione.

Dall’output riportato notiamo che: I valori relativi al posizionamento vengono applicati esternamente al contenitore dell’elemento e pertanto al di fuori dei margini dell’elemento (quindi fuori dall’area “arancione” indicata nell’output). Gli elementi riposizionati con il metodo “absolute” si comportano sempre come elementi di blocco livello. Ad esempio i margini su tutti i lati dell’elemento em sono mantenuti anche se si tratta di un elemento in linea.

Una volta che un elemento viene riposizionato con il metodo â&#x20AC;&#x153;assolutoâ&#x20AC;?, questo diventerĂ il nuovo blocco di contenimento per tutti gli altri elementi contenuti in esso. Prendiamo in considerazione la seguente struttura di esempio. Struttura esempio

<html> <head><title>Posizionamento assoluto e blocchi di contenimento</title> <link rel="stylesheet" type="text/css" href="pos_abs_con.css" /> </head> <body> <div id="intestazione">

<h2>Favole Antiche</h2> Contenuto paragrafo Contenuto paragrafo Contenuto paragrafo Contenuto paragrafo </div> <div id="contenuto"> <h2>Contenuti della sezione</h2> <ul> <li>La volpe e l'uva</li> <li id="spec">La pulce e il bue</li> <li>La cicala e la formica</li> <li>La lepre e la tartaruga</li> <li>La gallina dalle uova d'oro</li> <li>Il granchio e la volpe</li> </ul> </div>

</body> </html> Foglio di stile collegato body { background-color: #F9FEB0;} h2 {font-family: "comic sans MS"; text-align: center; color: #808000;} p { text-align: justify; } img {float: right; } div#contenuto { width: 200px; position: absolute; top: 0; left: 0; backgroundcolor: #AFD479; padding: 10px;} // Il valore di 0 in relazione alla proprietà top indica che l’elemento è stato posizionato a ridosso dell’angolo in alto a sinistra dell’elemento che lo contiene. li#spec { position: absolute; top: 0; right: 0; background-color: #FF6347;}

// Il valore di 0 in relazione alle proprietà top e right indica che l’elemento è stato posizionato a ridosso dell’angolo in alto a destra dell’elemento che lo contiene, l’elemento div. div#intestazione { margin-left: 225px; } // Il margine viene impostato per far posto ai contenuti. Output

Nelle struttura presentata il div identificato come “contenuto” viene riposizionato in alto a sinistra nella pagina. Posizionando un elemento lista all’interno del div, i valori delle proprietà top, right, left e bottom faranno riferimento ad uno spostamento solo all’interno dell’elemento div, che agisce come blocco di contenimento dell’elemento lista.

Specificare la posizione con le unità di misura  Utilizzare i pixel E’ possibile specificare lo spostamento di un dato elemento utilizzando dei valori relativi a tutte e quattro le proprietà viste finora: top, bottom, right e left. E’ possibile utilizzare per lo spostamento anche dei valori negativi. I valori positivi indicheranno sempre un moto da luogo dell’elemento, rispetto alla sua posizione di partenza.

Pertanto i valori positivi delle proprietà spingeranno un dato elemento ad una certa distanza, partendo dal punto indicato, verso il centro dell’elemento contenitore. Nell’esempio seguente vengono usati 4 valori distinti per meglio specificare il nuovo posizionamento dell’elemento div all’interno del suo contenitore (un altro elemento div). Struttura esempio <html> <head><title>La pulce e il bue</title> <link rel="stylesheet" type="text/css" href="pulcebue.css" /> </head> <body>

<div class="primo"> <div class="secondo"> La Pulce e il Bue </div> </div> </body> </html>

Foglio di stile collegato .primo { position: relative; height: 120px; width: 300px; border: 1px solid; backgroundcolor: #DA70D6;} .secondo { position: absolute; top: 20px; right: 30px; bottom: 40px; left: 50px; border: 1px solid; background-color: #FF4500; text-align: center; } Output

Impostando 4 valori di spostamento per tutti i lati dell’elemento div qualificato come “secondo”, posto all’interno dell’elemento div “primo”, è stata automaticamente impostata la sua grandezza. Dopo lo spostamento, l’elemento div “secondo” occupa pertanto, come evidenziato dal seguente output, un’area di 220 × 60 pixel all’interno del blocco di contenimento.

 Utilizzare i valori percentuale E’ possibile specificare il posizionamento degli elementi utilizzando i valori percentuale. Nell’esempio seguente la prima immagine viene posizionata a circa metà in basso rispetto all’angolo in alto a sinistra del suo elemento contenitore (elemento body). L’immagine viene invece riposizionata affinchè compaia nell’area in basso a destra del suo elemento contenitore (sempre l’elemento body). Struttura esempio <html> <head><title>Volpe e uva</title>

Foglio di stile collegato body {background-color: #DDA0DD; } .prima { position: absolute; top: 50%; left: 0%; border: 2px solid; } .seconda {position: absolute; bottom: 0%; right: 0%; border: 2px solid; } // Il simbolo di percentuale puĂ˛ essere omesso //

Output

Stabilire l’ordinamento – la proprietà z-index Dal momento che gli elementi posizionati in maniera assoluta possono sovrapporsi ad altri elementi, diversi elementi posizionati in questo modo possono essere ordinati in una sequenza specifica. E’ infatti possibile attraverso gli stili impostare anche un ordine diverso degli elementi, rispetto a quello di default stabilito dal documento sorgente. Per far in modo che gli elementi riposizionati compaiano nell’ordine che desideriamo è tuttavia necessario utilizzare una proprietà specifica: z-index applicabile esclusivamente ad elementi che sono stati posizionati attraverso la proprietà position.

I valori associabili a questa proprietà sono indicati da numeri specifici interi (sia positivi che negativi). Più alto è il numero, più in alto nella sequenza l’elemento verrà posizionato. Quando un numero è basso o negativo, questo valore sposterà l’elemento più in basso nella sequenza. Vediamo la seguente struttura di esempio che riporta tre elementi paragrafo, con colori diversi. Normalmente il paragrafo Giallo apparirebbe al primo posto nella sequenza, secondo la struttura (X)HTML di base. Tuttavia, assegnando agli altri paragrafi un valore più alto, con proprietà z-index, questi potranno essere posizionati anche prima rispetto alla sequenza standard.

Struttura esempio <html> <head><title>proprietĂ zindex</title> <link rel="stylesheet" type="text/css" href="zindex.css" /> <body> Paragrafo giallo Paragrafo rosso Paragrafo verde </body> </html> Foglio di stile collegato #verde { z-index: 10; position: absolute; top: 200px; left: 200px; background-color: green; } #rosso { z-index: 5; position: absolute; top: 225px;

left: 175px; background-color: red;} #giallo { z-index: 1; position: absolute; top: 250px; left: 225px; background-color: yellow; } Output con proprietĂ z-index

Output normale

Usare il posizionamento fisso Il posizionamento fisso funziona generalmente come il metodo assoluto. Lâ&#x20AC;&#x2122;unica differenza Ă¨ che i valori da impostare per le proprietĂ top, bottom, right e left faranno sempre riferimento alla finestra del browser. Questo vuol dire che gli elementi rimarranno nella posizione stabilita anche durante lo scorrimento della pagina da parte dellâ&#x20AC;&#x2122;utente.

FINE LEZIONE