|
La Grafica
I css non assegnano
stili unicamente testo ma sono utilissimi anche per il posizionamento
degli oggetti sulla pagina web.
Sono classificabili oggetti tutto ciò che fa parte di una pagina, immagini, testo, tabelle, forms e qualsiasi altra cosa venga racchiusa
in un layer (contenitore virtuale) e che viene assegnato all'elemento (tag) di
html <DIV>.
Diversi sono i metodi per creare questi contenitori virtuali; sembrerebbe più semplice fare uso di un selettore
ID che contenga la posizione associandone successivamente il nome del selettore al contenitore stesso;
lo stesso identico risultato lo si ottiene specificando lo style in linea, assegnando cioè all'elemento interessato i vari parametri di posizionamento in modo diretto.
Proviamo ora ad utilizzare
un ID creato con i seguenti parametri:
<style type="text/css">
<!--
#renato {
position: absolute;
top: 620 px;
left: 520 px;
zindex: 1;
}
-->
</style> |
Provate ad assegnarlo al contenitore HTML
<div> :
<DIV ID="renato">dati
e parametri immagine</div>
Oppure è possibile adoperare gli stessi parametri in linea
cioè direttamente associati all'elemento contenitore HTML <div>:
<DIV STYLE="position: absolute; left: 520px;
z-index: 1 ; top: 620px;">dati e parametri immagine</div>
|
Il risultato sarà perfettamente identico, entrambi infatti visualizzeranno quello che si trova contenuto all'interno degli elementi
<div></div> rispettando tutti gli attributi di stile impostati, per cui se avremo inserito un'immagine, quale potrebbe essere per esempio questa sotto:
Guardate qui sotto cosa è possibile fare giocando sul solo parametro z-index che riguarda la profondità, ho assegnato al div del testo una profondità 10, a quello dell'immagine sullo sfondo giallo una profondità 5 ed a quello dell'immagine sullo sfondo verde una profondità 15, guardate voi stessi come il testo si trovi sotto o sopra le due immagini a seconda della loro profondità, i soli browser IE gestiscono anche uno z-index negativo ed in questo caso non sarebbe stato necessario creare un div per il testo ed assegnargli una certa profondità.
Le potenzialità che derivano da questa tecnica sono fin troppo evidenti ed è
pertanto superfluo ogni altro esempio. Le immagini possono sovrapporsi in
qualsiasi modo dando così vita anche a pagine dinamiche attraverso qualche
script di JavaScipt integrato dai css e dal sempre valido html.
Continua:
I
Links |
