 |
 |
 |
Homepage -> Guida CSS (Fogli di Stile)
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:
| |
|
|
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 avviene sempre rispetto al box contenitore dell'elemento.
Il posizionamento relativo dispone invece l'immagine ad una distanza prestabilita dagli elementi (box contenitore) che la circondano nella pagina.
Il posizionamento statico è la condizione normale e non modifica le caratteristiche degli elementi dell'HTML.
Con il posizionamento fisso il box dell'elemento viene, come per absolute, sottratto al normale flusso del documento. La differenza sta nel fatto che per fixed il box contenitore è sempre il cosiddetto viewport. Con questo termine si intende la finestra principale del borwser, ovvero l'area del contenuto. Altra differenza fondamentale: un box posizionato con fixed non scorre con il resto del documento. Rimane, appunto, fisso al suo post. L'effetto è lo stesso che si può ottenere con l'uso dei frame, in cui una parte della pagina rimane fissa e il resto scorre. Solo che qui il documento è solo uno. Purtroppo, il valore non è supportato da Explorer su Windows.
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 z-index , 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"> #immagine { position: absolute; left: 80px; top: 200px } </style> |
Per farlo agire su un'immagine abbiamo bisogno di un tag HTML qualunque e del nome dell'immagine, utilizzeremo rosa.gif.
Quest'esempio mostra bene la loro differenza.
Se usassimo tutte e tre le immagini con posizioni assolute, otterrei questo:
Nell'ultimo esempio abbiamo visto come le immagini possano sovrapporsi. Si sono però disposte nell'ordine in cui le abbiamo inserite nell'HTML: la prima sotto, la seconda in mezzo e la terza sopra le altre.
Utilizzando l'elemento di stile z-index possiamo però agire anche su questo aspetto e decidere quale delle tre immagini debba disporsi in primo piano rispetto alle altre indipendentemente dall'ordine di in cui sono inserite nel linguaggio HTML.
Il valore dell'elemento di stile è un numero. L'immagine che avrà un valore di z-index più elevato sarà in primo piano rispetto a tutte le altre.
Supponiamo, utilizzando l'esempio precedente, che il cerchio blu, che si trovava in mezzo alle altre immagini, debba apparire in primo piano. Al selettore di identità che lo identifica aggiungeremo l'elemento di stile ed il valore z-index:1 trasformandolo in questo modo:
| #cerchio { position: absolute; left: 300px; top: 150px; z-index:1 } |
Vediamo l'esempio:
Ma esiste un'altra particolarità interessante. Occorre sapere che il piano del testo ha valore 0. Quindi se noi assegnamo all'elemento di stile z-index un valore inferiore allo 0, l'immagine finirà sotto al testo ( vedi l'anteprima ).
Un mio sincero consiglio: Non usare tali stili per le immagini, visto che cambiando la risoluzione del monitor le immagini verrano visualizzate in un'altra posizione da quella da voi fissata inizialmente... Inoltre cercate di inserire le immagini sempre all'interno di tabelle o comunque sia in una loro cella; così eviterete brutti inconvenienti!!!