Il sito per imparare gratuitamente a fare pagine Web

Posizionare gli Oggetti CSS

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



© www.web-link.it  Guida CSS Fogli di stile - Ver. 4.8.1   

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 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 box e che viene assegnato all'elemento (tag) di html <div>.

I metodi per gestire questi contenitori virtuali ancora una volta sono diversi, ognuno di voi adopererà quello che 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 la sua posizione nello 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é poteva poi essere richiamata più volte all'interno della stessa pagina. La classe va benissimo per lo style applicabile a testi, tabelle, links che su una pagina possono ripetersi in più punti. Dovendo invece posizionare qualcosa questo posizionamento va adoperato una sola volta, provate ad immaginare se la classe con i posizionamenti venisse usata da più di un solo elemento, tutti quelli che ne fanno uso si sovrapporrebbero convogliando nello stesso punto, uno sull'altro dando così origine a qualcosa di molto simile ad un pasticcio visivo.

E' forse questa la spiegazione per il fatto che un selettore ID usato per posizionare può essere adoperato una sola volta all'interno della stessa pagina web?. E' probabile, ma è soltanto una mia supposizione.

Penso comunque che non possa essere visto come una limitazione, al contrario. Credo sia una garanzia per impedire di commettere errori di questo genere. Si tratta di maggiore versatilità dal momento che si possono richiamare sia classi che ID dallo stesso contenitore html.

Adesso provate a creare un selettore ID con questi parametri:

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

Come per le classi, se volessi avere la certezza di usare il selettore #weblink soltanto con un contenitore di tipo <div> dovrei dichiararlo con div#weblink, così facendo qualsiasi altro tag di html diverso da div non avrebbe procurato alcun effetto. Vediamo come richiamarlo da html:

<div id="weblink"> codice html </div>

Oppure è possibile assegnarlo direttamente in line adoperando gli stessi parametri:

<div style="position: absolute; left: 50px; z-index: 1; top: 1300px">...</div>

In entrambi i casi il risultato sarà perfettamente identico, entrambi visualizzeranno quello che si trova all'interno del contenitore <div> </div> rispettando gli attributi di stile impostati. Nel nostro caso usiamo una immagine grafica, questa sotto:

WebLink

che sarà posizionata a 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à degli oggetti così dichiarati. Ho assegnato al div che contiene il testo una profondità 10, al div dell'immagine con sfondo giallo una profondità 5 e al div dell'immagine con sfondo verde una profondità 15. Notate come il testo si trovi sotto o sopra le due immagini a causa del suo valore 10 che è maggiore di 5 ma minore di 15, da questi valori dipende l'ordine di profondità. Il solo browser IE gestisce anche uno z-index negativo che in questo caso ci avrebbe fatto risparmiare un div ma che non garantiva compatibilità e di conseguenza l'essere visto da tutti i browser.

In HTML non sarebbe stato possibile ottenere nulla di tutto questo, col nostro testo e le due immagini avremo potuto soltanto girargli intorno.

A questo punto ogni altro esempio sarebbe superfluo, è fin troppo evidente quali siano le potenzialità ed i vantaggi derivati dall'utilizzo di questa tecnica.

Immagini trasparenti potrebbero essere sovrapposte totalmente o parzialmente dando vita ed effetti speciali. Con l'uso di un linguaggio di script quale JavaScript, si potrebbero nascondere o scoprire questi contenitori dando vita a delle pagine dinamiche, cioè vive, che cambiano a seconda di quello che fa il nostro visitatore, da questo connubio nasce la sigla DHTML (Dynamic HTML). E' grazie alla combinazione di questi due sistemi (CSS e JavaScript) che sono venuti meno quelli che erano considerati i limiti del linguaggio html. Adesso ci sono nuove costruzioni molto più "solide" anche se a sorreggerle resta proprio il buon "vecchio" html che a quanto pare regge, ed io aggiungo che regge molto saldamente!

o passare col cursore del mouse sopra a questa immagine:


css

Come spesso accade non è tutto oro quello che luccica, così anche per questa tecnica che apparentemente sembrerebbe offrire soltanto vantaggi, ci sono invece alcuni problemi. Mi riferisco al posizionamento degli elementi sullo schermo usando coordinate percise.

Chi ne fa uso prende come modello il proprio monitor e la risoluzione grafica su di esso impostata. Ma se il visitatore non ha le stesse identiche impostazioni ecco che quello che vedrebbe non sarebbe proprio la stessa cosa che pensavate di fargli vedere.

Provate ad immaginare di posizionare un qualcosa ad una distanza di 400 px dal bordo superiore, questa misura essendo fissa sarà sempre rispettata da qualsiasi risoluzione video. Il codice rimanente si disporrà nella pagina seguendo le dimensioni della finestra del browser, al variare di questa si ridispone automaticamente mentre quello che avete posizionato con riferimenti assoluti non si sposterebbe di un solo pixel dando così vita ad impaginazioni certamente differenti e non volute.

Fate dunque molta attenzione quando adoperate i posizionamenti assoluti. Per capirli meglio gli ho dedicato una pagina: posizionare il box e vi dico che la soluzione esiste e si chiama Box liquido che permette di adattare il tutto dinamicamente in base alle varie risoluzioni grafiche.

Continua: Il Box Model

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi