Molti degli esempi di questo tutorial sono compatibili esclusivamente con il browser Internet Explorer, a causa delle conseguenze negative della "guerra dei browser". La corsa alla "tecnologia proprietaria" ha spinto Netscape e Microsoft verso soluzione incompatibili e spesso contrastanti (soprattutto per HTML dinamico non e' raro che demo per explorer creino errore negli script di Netscape e viceversa). I fogli di stile non sono stati risparmiati da questo duello, ma non mancano punti e tecnologie sulle quali e' stato raggiunto un accordo. Le specifiche sul posizionamento dinamico hanno visto l'accordo di Microsoft e Netscape, che attraverso i propri rappresentanti presso il W3C, hanno collaborato alla stesura di una bozza di lavoro chiamata CSS-P (CSS positioning). Grazie a questa collaborazione sia Netscape 4 che Explorer 4 e 5 riconoscono e interpretano correttamente il posizionamento dinamico all'interno della pagina. Ma cosa si intende per posizionamento dinamico?.
I documenti HTML sono posizionati all'interno della pagina attraverso uno schema di flusso dei dati. Questo significa che si parte dal margine alto a sinistra del documento e ogni elemento si posiziona in base al precedente, senza possibilita' di sovrapporre oggetti. Le specifiche dei CSS-P consentono, invece, tre diversi tipi di posizionamento:

  • statico: si tratta del posizionamento predefinito dal browser, cioe' quello tradizionale di HTML, per cui ogni elemento e' posizionato in base al flusso di dati del documento;

  • assoluto: questo tipo di posizionamento consente di astrarre il CSS dal flusso dei dati, consentendo di posizionarlo in qualsiasi punto della pagina, in modo assolutamente indipendente dagli altri elementi, che anzi possono venire sovrapposti o sottoposti.

  • relativo: tale posizionamento non esce dal flusso di dati, ne' produce alcuna modifica rispetto agli elementi posizionati in modo statico. Assume caratteristiche proprie del posizionamento dinamico quando vengono impostate le proprieta' left e right, che spostano l'elemento a sinistra e in alto di quello che lo precede.

    I posizionamenti assoluto e relativo consentono agli sviluppatori di sistemare con precisione elementi nel documento, di sovrapporli e attraverso degli script, di muoverli. In questo modo i webdesigner hanno un controllo sul documento simile a molti strumenti in possesso dei grafici tradizionali.

    La bozza di lavoro dei CSS-P definisce le proprieta' dei fogli di stile relative al posizionamento dinamico. Molte di queste proprieta' sono note gia' da HTML classico (le proprieta' width e height, per esempio), altre invece sono inedite. Per comprendere meglio di cosa stiamo parlando e' bene procedere con qualche esempio pratico e relativo codice. Premettiamo che in questa sede faremo uso di fogli di stile in linea, perche' e' piu' agevole definire il posizionamento per ogni singolo elemento. Nulla vieta che per creare strutture di pagina complesse si possano usare i CSS incorporati o esterni.

    Ecco un esempio di posizionamento assoluto con uso delle proprieta' top e left:

    <DIV STYLE="position:absolute; top:100px; left:100px">
    <IMG SRC="elemento01.gif" border=0>
    </DIV>


    Le misure sono espresse in pixel (px), ma possono essere sostituite con altri valori: punti (pt), centimentri (cm), pollici (in) ecc. Tutte fanno riferimento al margine superiore sinistro.
    L'esempio considerato crea un foglio di stile con posizionamento assoluto (position:absolute) distanziato dal margine superiore e sinistra di 100 pixel. Tutto cio' che si trova all'interno del CSS (l'immagine elemento01.gif) sara' posizionato in questo modo.

    Visualizza l'esempio pratico


    Per comprendere la differenza pratica tra posizionamento assoluto (visto in precedenza) e relativo, procediamo con un altro esempio. Si tratta di un semplice testo privo di qualsiasi formattazione, che il documento interpreta come flusso di elementi. All'interno di questo testo impostiamo un foglio di stile con posizionamento relativo per le parole "web scolastico", con una distanza dall'elemento piu' vicino alla sinistra e in alto di 10 pixel:

    fauser.edu e' il <SPAN STYLE="position:relative; top:10px; left:10px"><B> web scolastico></B></SPAN> dell'Istituto Tecnico Industriale Statale "G.Fauser".

    Abbiamo usato la marcatura SPAN al posto di DIV, perche' quest'ultima e' piu' adatta a quantita' di testo molto ampie, mentre la prima si adatta meglio a frasi brevi come questa. Altra considerazione riguarda il ritorno a capo che DIV impone agli elementi
    Nell'esempio pratico che segue abbiamo usate entrambe con risultati differenti.

    Visualizza l'esempio pratico


    Altri parametri impostabili sono width e height che stabiliscono rispettivamente la larghezza per orizzontale e l'altezza per verticale del foglio di stile. Anche in questo caso possono usarsi indifferentemente le misure consentite dai fogli di stile:

    <DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px">
    fauser.edu e' il web scolastico dell'Istituto Tecnico Industriale Statale "G.Fauser".
    </DIV>


    Il testo viene racchiuso in un foglio di stile di dimensioni pari a 150px di altezza e altrettanti di larghezza. La distanza dal margine superiore sinistro e' quella espressa in precedenza.

    Visualizza l'esempio pratico


    La proprieta' visibility determina la visibilita' di un elemento. Puo' essere impostato su hidden o visible

    <DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px; visibility:hidden">
    <IMG SRC="elemento01.gif" border=0>
    </DIV>


    hidden rende invisibili gli elementi, mentre visible li rende visibili:

    <DIV STYLE="position:absolute; top:100px; left:150px; width:200px; height:150px; visibility:visible">
    <IMG SRC="elemento02.gif" border=0>
    </DIV>


    Visualizza l'esempio pratico


    Si e' detto in apertura che i CSS-P permettono di sovrapporre immagini, testo ed elementi gli uni agli altri. La gerarchia con la quale tali elementi vengono sovrapposti dipende, quando non stabilito diversamente, dalla posizione nel codice HTML. Un elemento posizionato dopo un altro sara' sovrapposto a questo. Come nell'esempio che segue:

    <DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible">
    <IMG SRC="elemento01.gif" border=0>
    </DIV>


    <DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible">
    <IMG SRC="elemento02.gif" border=0>
    </DIV>

    Visualizza l'esempio pratico


    E' possibile modificare l'impostazione di default per cui un elemento scritto successivamente nel codice e' sovrapposto agli elementi precedenti, attraverso la proprieta' z-index. Questa proprieta' definisce l'ordine grafico degli elementi attraverso valori numerici. L'elemento principale va impostato come valore positivo "1", mentre gli altri in posizione sottostante con valore negativo "-1". Ripredendo l'esempio precedente e lasciando inalterato l'ordine gerarchico, e' possibile che il secondo elemento si sovrapposta al primo grazie alla proprieta' z-index:

    <DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible z-index:1">
    <IMG SRC="elemento01.gif" border=0>
    </DIV>


    <DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible z-index:-1">
    <IMG SRC="elemento02.gif" border=0>
    </DIV>

    Visualizza l'esempio pratico


    La proprieta' overflow permette di gestire, attraverso l'uso di scroller, i contenuti degli elementi che eccedono l'area impostata con height e width. Perche' cio' accada e' necessario che la proprieta' overflow sia impostata su "scroll" e non su "hidden". In questo secondo caso, infatti, gli elementi vengono visualizzati limitatamente alla grandezza dell'area di ritaglio ma senza lo scroller laterale:

    <DIV STYLE="position:absolute; overflow:scroll; float:left; top:10px; left:10px; width:150px; height:100px">
    fauser.edu e' il web scolastico dell'Istituto Tecnico Industriale Statale "G.Fauser".
    </DIV>


    <DIV STYLE="position:absolute; overflow:hidden; float:left; top:150px; left:10px; width:150px; height:100px">
    fauser.edu e' il web scolastico dell'Istituto Tecnico Industriale Statale "G.Fauser".
    </DIV>


    Visualizza l'esempio pratico


    Tutti gli elementi supportano il posizionamento statico e relativo, ma solo alcuni quello assoluto. Ecco quali:

  • Applet
  • Button
  • Div
  • Fieldset
  • IFrame
  • IMG
  • Input
  • Object
  • Select
  • Span
  • Table
  • Textarea


  • Sfruttando quanto visto finora per il posizionamento dinamico, possiamo ora esporre un utilizzo pratico di tale tecnologia. Creare titoli con effetto ombreggiato e' possibile in HTML classico esclusivamente con il ricorso a immagini (create con appositi programmi di Webgrafica o fotoritocco). Nulla da eccepire su tale scelta, ma e' ovvio che la presenza di immagini appesantisce la pagina in termini di Kb. Con i CSS-P e' possibile ottenere lo stesso risultato senza usare immagini ma seplice testo. Non si tratta di una procedura molto complessa che anzi per molti versi appare banale. Si crea un testo assegnando uno stile, una grandezza e una certa posizione assoluta nella pagina:

    <DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:10px; left:10px; color:black; z-index:1">
    fauser.edu
    </DIV>


    Per il testo si e' usato il font impact di grandezza pari a 100 pixel e colore nero, distanziato dal margine sinistro e superiore di 10 pixel. La proprieta' z-index e' impostata sul valore positivo 1. Fin qui nulla di particolare, visto che si tratta di un testo nero senza ombreggiatura. Per inserire l'ombra si deve aggiungere questo codice:

    <DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:18px; left:18px; color:yellow; z-index:-1">
    fauser.edu
    </DIV>


    Il testo rimane di uguale grandezza e stile ma cambia il colore (dal black precedente al yellow attuale). La distanza dello stile dal margine superiore e sinistro aumenta rispettivamente di 8 pixel e la proprieta' z-index e' impostata sul valore negativo -1. Tutto questo crea il primo testo sovrapposto al secondo, che essendo distanziato di 8 pixel ma di uguale dimensione crea un effetto ombreggiato.

    Visualizza l'esempio pratico


    Torna indietroAssegnare classi        Controlli del cursoreVai all'argomento successivo