I Fogli di Stile (CSS) di Web-Link: Tutto per la costruzione delle tue pagine web

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 possa avere anche per il posizionamento degli oggetti sulla 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 che prende il nome di layer e che viene assegnato all’elemento (tag) di html <DIV>.

I metodi per creare questi contenitori virtuali ancora una volta sono diversi, 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 ed associare poi il nome del selettore al contenitore stesso, ma è anche vero che un risultato identico lo si avrebbe specificando lo style in linea, 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 più volte all’interno della stessa pagina, adesso invece trattandosi di immagini da dover posizionare sullo schermo non servirebbe a molto usare una classe in quanto se venisse richiamata da più di un oggetto questo si sovrapporrebbe all’altro dando così origine a qualcosa di molto simile ad un pasticcio grafico.

E’ forse questa  la spiegazione al fatto che un selettore ID può essere adoperato una sola volta all’interno della stessa pagina web?. E’ probabile ma è soltanto una mia supposizione.

Credo comunque che non possa essere visto come una limitazione, al contrario credo sia a garanzia che non vengano commessi errori in questo senso, e poi è tutto quanto a vantaggio di maggiore versatilità dal momento che si possono richiamare sia classi che ID dallo stesso unico contenitore, anche se è meglio sperimentare questa cosa soltanto dopo aver acquisito una certa esperienza e quindi maggiore familiarità. 🙂

Adesso provate a creare un selettore ID con questi parametri:

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

Provate ad assegnarlo al contenitore HTML <div> :

<DIV ID=”weblink”>nome dell’immagine</div>

Oppure è possibile adoperare gli stessi parametri in linea e cioè direttamente associati all’elemento contenitore 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 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:

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.

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à.

In HTML nulla di tutto questo, avremo potuto soltanto girargli intorno: a destra, a sinistra o al centro.

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 vostro 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” ed 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 ed immagini in html normale. Il problema infatti nascerebbe a seconda della risoluzione video del visitatore il quale potrebbe vedere il tutto in modo decisamente molto diverso da quello che ci eravamo prefissati.

Provate infatti ad immaginare un’immagine ad una distanza di 400 pixel dal bordo superiore, questa essendo una misura fissa sarà sempre rispettata, risulterà al centro di un monitor con risoluzione 800 x 600 ma  quello che  si trova al suo fianco o al di sotto molto probabilmente si sposterà a seconda delle impostazioni video. Non dipende soltanto dalla risoluzione grafica adoperata, ma anche dal fatto se la navigazione avviene a tutto schermo o in una finestrella ristretta.

Fate dunque attenzione quando adoperate i posizionamenti assoluti.

Continua: I links