Posizionamento dinamico

Argomenti trattati: posizionamento relativo e assoluto degli elementi nella pagina HTML attraverso il tag <DIV></DIV>

Nonostante lo scopo di questo sito non sia quello di trattare dettagliatamente l'utilizzo dei CSS (o Fogli di Stile), né le caratteristiche del posizionamento dinamico degli elementi nella pagina HTML, è stato ritenuto opportuno utilizzare degli esempi che ne facessero uso.

Sono presenti nella sezione dei link esterni delle ottime guide, che potranno compensare informazioni e spiegazioni probabilmente necessarie a chi si avvicina per la prima volta a questo interessante argomento.

Quando è necessario ritagliare uno spazio con determinate caratteristiche in un documento HTML, si può ricorrere al tag <DIV></DIV>.

Per richiamare tramite codice questo elemento viene generalmente utilizzato un identificativo ID, che può definire uno stile ad esso associato.

Alcune versioni precedenti di Netscape Navigator utilizzavano il layer, elemento spiegato in una diversa sezione del sito.

Per visualizzare correttamente gli esempi proposti, è necessario disporre di MSIE dalla versione 5 in poi, oppure di una versione di Netscape Navigator che supporti i layer.

L'HTML viene interpretato e visualizzato dall'inizio alla fine, dall'alto verso il basso, da sinistra verso destra. Il posizionamento dinamico invece permette di dichiarare una posizione assoluta, a partire dall'angolo in alto a sinistra della finestra principale, che ha coordinate (0,0).

Per questa ragione è necessario specificare il seguente attributo nel foglio di stile: 
position="absolute";

Le coordinate a loro volta corrispondono rispettivamente agli attributi top e left: modificando il valore di questi attributi l'elemento considerato viene posizionato in un certo punto della finestra. Se non altrimenti specificato, l'unità di misura è il pixel.

<style>
     // definisco lo stile
     #div1{background-color: #339966; position: absolute; width:300; height:30;top: 10; left:50;z-index:-1}
     #div2{background-color: #FFCC33; position: absolute; width:300; height:30;top: 10; left:50;z-index:+1}
     #div3{background-color: #FFFFFF; position: absolute; width:300; height:30;top: 100; left:50}
</style>
 <script language="JavaScript">
<!-- //
function showLayer()
{
     // ricerco un browser che supporti i livelli
     if (document.layers)
     {
          if(document.div1.visibility=='hide')
          { document.div1.visibility='visible'; document.div2.visibility='hidden';}
          else
          { document.div2.visibility='visible'; document.div1.visibility='hidden';}
     }
     else // eseguo lo script supponendo di utilizzare MSIE
     {
          if(document.all["div1"].style.visibility=='hidden')
          { document.all["div2"].style.visibility='hidden';document.all["div1"].style.visibility='visible'; }
          else
          {document.all["div2"].style.visibility='visible'; document.all["div1"].style.visibility='hidden';}
     }
}

// -->
</script>

In questo modo, definiamo 3 stili per gli ID div1, div2 e div3, che definiamo con posizione assoluta (notare che l'ID nel foglio di stile va richiamato facendolo precedere dal simbolo "#"). I primi due elementi <DIV> definiscono una sezione del documento con le seguenti caratteristiche:

Questi elementi sono a loro volta identificati nel codice HTML in questo modo:

<div id="div1">
div1
</div>
<div id="div2">
div2
</div>

Lo script si basa sulla possibilità di rendere visibile e invisibile un elemento, mediante la proprietà visibility, rispettivamente definita visibile (elemento visibile) o hidden (elemento nascosto). In alcune versioni di Netscape Navigator il valore della proprietà visibility viene specificato con show, corrispondente a visible, o hide, corrispondente a hidden.

Se il browser supporta lo script l'esempio si completa con un pulsante.

Si definisce una condizione: se div1 ha visibility hidden, div2 avrà visibility hidden e div1 visibility visible, dunque div1 sarà reso visibile e div2 invisibile.
Se div1 ha visibility visible, div1 avrà visibility hidden e div2 visibility visible, quindi div1 sarà reso invisibile e div2 sarà reso visibile.
Se entrambi i livelli avessero visibilità visible, essendo sovrapposti, sarebbe possibile vedere soltanto div2, che si trova sopra div1, coprendolo perciò alla vista dell'utente.

Questo semplice esempio ha il solo scopo di sottolineare le potenzialità dell' HTML dinamico, o DHTML, senza alcuna pretesa grafica.

Torna all'inizio | Home