Guida ai CSS

Grafica

Grafica, posizionare gli oggetti   Se avete letto la parte dedicata ai selettori ID vi sarete resi conto che i CSS non servono solo per assegnare stili al testo ma sono quanto di meglio si potesse avere anche per il posizionamento degli oggetti sulla propria pagina web. Per oggetti si intende tutto quello che fa parte di una pagina: immagini, testo, tabelle, forms e qualsiasi altra cosa venga racchiusa in un contenitore virtuale, di solito l'elemento (tag) html <DIV>.

I metodi per creare questi contenitori virtuali ancora una volta sono diversi, per cui ognuno di voi adopererà quello che meglio preferisce, a prima vista sembrerebbe più semplice fare uso di un selettore ID che contenga la posizione del contenitore e associare poi il nome del selettore al contenitore stesso, ma è anche vero che un risultato identico lo si avrebbe specificando in linea lo style, assegnando cioè all'elemento interessato i vari parametri di posizionamento in modo diretto.

Vi ricordate le classi ?
Si creava una classe perchè questa poteva essere richiamata da più parti, adesso invece trattandosi di immagini a dover essere posizionate, non servirebbe a molto usare una classe in quanto se venisse richiamata da più di un oggetto, questi si sovrapporrebbero dando origine a qualcosa simile ad un pasticcio grafico.

Questa (forse) la spiegazione al fatto che un selettore ID può essere adoperato una sola volta all'interno della stessa pagina web.

Questo fatto non credo si possa vedere come una limitazione, anzi credo sia a garanzia che non vengano commessi errori in questo senso, e poi è tutto a vantaggio di maggiore versatilità, visto che si possono richiamare classi e ID dallo stesso unico contenitore, anche se è meglio sperimentare questa cosa solo dopo aver acquisito una certa esperienza e quindi maggiore familiarità. :-)

Adesso, che si crei un selettore ID con questi parametri:

<style type="text/css"> <!-- #weblink { position : absolute; top : 1300 px; left : 50 px; zindex : 1; } --> </style>

E poi lo si richiami dell'elemento (tag) HTML <div> :

<DIV ID="weblink;">nome dell'immagine</div>

Oppure, che si adoperino gli stessi parametri in linea e cioè direttamente

associati all'elemento (tag) HTML <div>:

<DIV STYLE="position : absolute; left : 50px; z-index : 1 ; top : 1300px;">

nome dell'immagine</div>

il risultato sarà perfettamente identico, entrambi infatti visualizzeranno

quello che si troverà contenuto all'interno degli elementi <div></div>

rispettando tutti gli attributi di stile impostati, per cui se abbiamo

inserito un'immagine, quale potrebbe essere questa:  la stessa sarà

posizionata a partire da 1300 pixel dal bordo superiore e 50 pixel dal

bordo laterale sinistro con uno z-index, cioè un livello di profondità,

uguale a 1.

Provate a portarvi in quella zona, dovreste trovare la stessa immagine

ma con una notevole differenza: il testo si troverà sopra all'immagine,

A questo punto ogni altro esempio sarebbe superfluo, è fin troppo evidente quale potenzialità si possa avere dall'utilizzo di questa tecnica. Immagini trasparenti potrebbero essere sovrapposte totalmente o parzialmente, dipende soltanto da voi, gli eventi poi di un linguaggio di script quale JavaScript potrebbero nascondere o scoprire questi contenitori dando vita a delle pagine dinamiche, cioè vive! che cambiano a seconda di quello che fa il visitatore, da qui il nome DHTML; per cui è grazie alla combinazione di questi due sistemi ( CSS e JavaScript) che sono praticamente caduti tutti quei limiti che html poteva avere, adesso è tutto più solido e alla base resta proprio il buon "vecchio" html che a quanto pare regge, ed io dico che regge anche molto saldamente :-))

Come spesso accade però non è tutto oro quello che luccica, così anche per questa tecnica che apparentemente sembrerebbe offrire soltanto vantaggi; esistono invece alcuni problemi, specie nel caso in cui si combinassero dei posizionamenti assoluti combinati a testo e immagini in html normale. Il problema infatti nascerebbe a seconda della risoluzione video del visitatore il quale potrebbe vedere in modo molto diverso da ciò che ci eravamo prefissati.

Provate infatti ad immaginare un'immagine a 1300 pixel dal bordo superiore, questa essendo una misura fissa sarà sempre rispettata, è quello che gli si trova al suo fianco o al di sotto che molto probabilmente si sposterà a seconda delle impostazioni video del nostro visitatore. E non dipende soltanto dalla risoluzione video, ma anche se la navigazione avviene a tutto schermo o in una finestrella ristretta.

Ho volutamente riportato l'esempio sopra, quello delle due immagini affiancate, ho lasciato sotto di esse del normalissimo testo contenuto in una tabella html, tutto questo proprio per permettervi di notare cosa accade se allargate o restringete la finestra del browser.

Fate dunque attenzione quando adoperate i posizionamenti assoluti.

Vi ricordo due indirizzi sui quali reperire ulteriori informazioni: specifiche del W3C , dove troverete tutti gli attributi e i parametri ammessi e supportati dai CSS1 e : specifiche per i nuovi CSS2   dove alcuni di questi non sono ancora supportati da nessun browser, almeno non fino alle versioni 5.5 di IE e 6 di NS.