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é questa poteva essere richiamata più volte all'interno della stessa pagina, poteva andare benissimo per lo stile di un testo che su una pagina si ripete immancabilmente, ma se si tratta di posizionare qualcosa quel posizionamento va adoperato una sola volta, se infatti venisse richiamata una classe da più di un oggetto questi si sovrapporrebbero l'uno sull'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.

Penso comunque che non possa essere visto come una limitazione, al contrario, credo sia una garanzia che impedisce di commettere errori di questo genere. Si tratta di maggiore versatilità dal momento che si possono richiamare sia classi che ID dallo stesso contenitore. Vi consiglierei di 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: 1300px;
	left: 50px; 
	z-index: 1;
    }
 -->
</style>

Come per le classi, se volessi la certezza di usare il selettore #weblink soltanto con un contenitore di tipo <div> avrei dovuto specificarlo con div#weblink, così facendo qualsiasi altro tag di html che avesse richiamato il selettore #weblink non avrebbe procurato alcun effetto. Assegnamolo al contenitore HTML <div> :

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



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à. I soli browser IE gestiscono anche uno z-index negativo che in questo caso ci avrebbe fatto risparmiare un div ma che non garantiva l'essere visto da tutti.

In HTML non sarebbe stato possibile ottenere nulla di tutto questo, col nostro testo e con le nostre 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 metalinguaggio 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 anche molto saldamente!

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 posizionare gli 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 poi le stesse identiche impostazioni ecco che quello che vedrebbe non sarebbe proprio la stessa cosa che volevate 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 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 Il 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.