A Sbafo! Tutto per il web gratis e in italiano... |
 |
Aggiungi ai preferiti |
A Sbafo! Tutto per il web gratis e in italiano... |
|
Aggiungi ai preferiti |
 |
 |
||
 |
 |
||
 |
|
| :: Sei qui: Home > Manuali > Indice generale dei manuali - Giochiamo con i fogli di stile - pagina 19 | |||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||
|
Se avessi due o tre immagini e volessi sovrapporle in una pagina oppure volessi che il testo scorresse sotto le immagini? Con il solo HTML sarebbe impossibile, ma si possono ottenere questi risultati con un foglio di stile agendo sui piani ed associandoli ai selettori di identità che abbiamo visto nella quarta lezione. Per i nostri esempi useremo queste tre immagini
La seconda e terza immagine sono GIF dotate di trasparenza.
12.1 Posizionamento di un'immagine
Per determinare la posizione di un'immagine rispetto al foglio si utilizza l'elemento di stile position che ha tre valori:
Il posizionamento assoluto non considera minimamente il contenuto dei dati presenti nel foglio e posizionerà l'immagine esattamente nel punto prestabilito, indipendentemente dal fatto che nel medesimo punto sia presente testo o altro. Il posizionamento relativo dispone invece l'immagine ad una distanza prestabilita dagli elementi che la circondano nella pagina. Il posizionamento statico è la condizione normale e non modifica le caratteristiche degli elementi dell'HTML. Per stabilire un posizionamento, sia esso assoluto che relativo, occorre stabilire delle distanze, anch'esse assolute o relative. A questo fine si utilizzano gli elementi di stile:
Le distanze riferite a questi ultimi elementi di stile possono essere espresse in:
oppure in percentuale. Altro elemento da prendere in considerazione è ed il piano
che assume un valore numerico. Questo elemento è molto interessante quando si vogliono sovrapporre più oggetti nello stesso punto della pagina. In assenza di piano gli oggetti si posizioneranno nell'ordine che appaiono all'interno del linguaggio HTML, ma impostando un piano di visualizzazione si potrà modificare l'ordine di sovrapposizione. Un elemento che avrà uno z-index:2 apparirà sopra ad un altro che avrà uno z-index:1. Sono accettati anche valori negativi e vedremo perché. Vediamo un primo esempio di posizionamento di una sola immagine. Supponiamo di voler assegnare un posizionamento assoluto di 80 pixels da sinistra e di 200 pixels dall'alto nella nostra pagina, in questo primo esempio vuota. Creiamo un selettore di identità che chiameremo #immagine. #immagine {position:absolute; left:80px; top:200px} ed aggiungiamolo al nostro foglio di stile in questo modo: <style type="text/css"> Per farlo agire su un'immagine abbiamo bisogno di un tag HTML qualunque e del nome dell'immagine, utilizzeremo rosa.gif. Ecco l'esempio: <html> Come avrai notato, l'immagine si è disposta esattamente nella posizione voluta ignorando completamente il pulsante "Indietro" che, osservando il linguaggio HTML, si trova in realtà sotto di essa. In altre parole usando l'elemento di stile position e il valore absolute l'immagine associata si comporta come se nella pagina non vi fosse niente altro. Vediamo cosa succede invece cambiando il valore da absolute a relative. Utilizziamo esattamente lo stesso esempio, ma inserendo, prima del paragrafo che richiama l'immagine, un altro paragrafo di testo in maniera tale che vi sia un elemento prima dell'immagine: <html> L'immagine questa volta si è disposta in maniera relativa rispetto all'elemento che la precede cioè a 200 pixels (top:200px) dalla stringa di testo e sempre a 80 pixels da sinistra in quanto, alla sua sinistra, non c'è alcun elemento. Il pulsante appare più in alto dell'immagine in quanto, gerarchicamente, all'interno della pagina è richiamato dalla terza riga di comando. Stai attento a non abusare del valore absolute nell'elemento di stile position. Fintanto che le immagini sono le uniche cose presenti nella pagina non vi sono problemi, ma quando assieme ad esse è presente testo o tabelle o altri contenuti, chi visualizza il sito con una risoluzione diversa o con un carattere differente, oppure addirittura in una semplice finestra anziché a tutto schermo, vedrebbe una pagina totalmente diversa da quella che hai progettato. Avendo assegnato infatti un posizionamento assoluto, l'immagine si troverà sempre nel medesimo punto della pagina, nel nostro esempio a 200 pixels dall'alto e ad 80 da sinistra, e potrebbe sovrapporsi agli altri elementi. Meglio perciò ricorrere, quando possibile, al valore relative per l'elemento di stile position. Vediamo un esempio con una pagina contenente del testo per comprendere meglio la differenza tra i valori absolute e relative: <html> Come hai potuto vedere, il primo cerchio, che ha come valore absolute, ha ignorato totalmente il testo e vi si è disposto sopra coprendolo, mentre il secondo cerchio, che ha come valore relative, si è posizionato 50 pixels sotto il paragrafo del testo che lo precede nella pagina HTML. Torniamo comunque all'elemento di stile position:absolute per vedere qualcosa che con il solo HTML è impossibile da ottenere. Utilizziamo per l'esempio tutte e tre le immagini e creiamo tre selettori di identità, rispettivamente #quadrato {position: absolute;left:300px; top:150px} #cerchio {position : absolute; left : 325px; top: 175px} #rombo {position : absolute; left:350px; top:200px} e applichiamoli a tre paragrafi in sequenza richiamando le immagini. Ecco l'esempio: <html> |
|
|
|
|
Questo sito è ottimizzato per Explorer 5.0 o superiore, Java compatibile. Alcune delle applicazioni presenti potrebbero non essere supportate da Netscape© o da sistemi operativi diversi da Microsoft© Windows. Tutti i marchi citati sono di proprietà dei loro legittimi autori. |
Webmaster: Seatiger Team 
rosa.gif delle dimensioni di 100 pixels per 100
verde.gif delle dimensioni di 100 pixels per 100
blu.gif delle dimensioni di 100 pixels per 100
