Cascading Style Sheets Positioning

I Cascading Style Sheets (CSS) sono il fondamento dell'HTML Dinamico sia in Netscape Navigator 4.0 sia and Internet Explorer 4.0. I CSS offrono un metodo per creare un set di "stili" che definiscono come gli elementi della vostra pagina debbano essere mostrati. Il Cascading Style Sheets Positioning (CSS-P) è un'estensione ai CSS che mette in grado gli sviluppatori di controllare pixel per pixel la posizione di qualsiasi oggetto sullo schermo. Poiché ci sono già documentazioni e tutorial sufficientemente esaustivi sull'argomento non perderò tempo in un inutile lavoro di duplicazione, piuttosto cercherò di lavorarci sopra.

I link qui sotto portano a due tutorial-documento che spiegano la sintassi dei CSS e del CSS-P:

Questi siti danno una completa documentazione sui CSS e su come metterli in atto. Per quanto mi riguarda, io  mi limiterò a dare giusto una spolveratina alle parti dei CSS che useremo in questo corso.

Usare le Tag di Tipo DIV:

Quando si usa il CSS-Positioning, i suoi attributi vengono normalmente riferiti alle tag [letteralmente etichette] DIV (divisione) - una tag di tipo DIV è vuota e non strutturante e si abbina meglio ai CSS. Quando si mette testo-HTML in una tag di tipo DIV esso viene usualmente indicato come "DIV block", "DIV element", "CSS-layer", o come io preferisco "layer" e basta. Quando leggiamo qualcosa sull'HTML Dinamico nei siti web o nei newsgroup, se ci si imbatte in questi termini sappiamo che si sta parlando di una parte HTML dentro ad una tag "DIV" posizionata.

La tag vuota DIV non è differente dalle altre e viene annotata allo stesso modo:

<DIV>
Questa è una tag di tipo DIV
</DIV>
La tag DIV dà gli stessi risultati della tag <P></P>

Ma inserendo il CSS nelle DIV tag noi possiamo definire dove sullo schermo la parte HTML verrà posizionata, dove disegnerà aree o linee, o come mostrare il testo che in essa è contenuto. Una ID renderà più semplice riferirsi a quella particolare tag:

<DIV ID="camion">
Questo è un camion
</DIV>

Il nome che viene utilizzato per la DIV è indifferente. Qualsiasi sequenza alfanumerica di caratteri - a patto che inizi con una lettera -; andrà bene.

A questo applichiamo il CSS in due modi:

CSS interno:

E' il più usato. Ed è il modo con cui inizierò a mostrarvi come scrivere un programma DHTML e JavaScript.

<DIV ID="truck" STYLE="lo stile viene inserito qui">
Questo è un camion
</DIV>
La tag STYLE esterna:

Il metodo esterno funziona nello stesso modo, benché ci siano alcuni problemi nello scrivere i CSS, così vi suggerisco di attendere sino alla lezione Layers annidati prima di affrontarlo direttamente. Per il momento date un'occhiata per vedere come si fa...

<STYLE TYPE="text/css">
<!--
#camion {lo stile viene inserito qui}
-->
</STYLE>


<DIV ID="camion">
Questo è un camion
</DIV>

Notate come la ID venga usata nella tag STYLE per assegnare gli stili CSS.

Proprietà Cross-Browser dei CSS:

Poiché l'obbiettivo di questo sito è produrre DHTML che lavori sia in Netscape sia in Internet Explorer, dobbiamo limitarci alle proprietà di stile comuni ai due browser. Generalmente, le seguenti proprietà sono quelle standard come viene definito dal W3C.

position
Definisce come la DIV sarà posizionata - "relative" significa che la tag seguirà il posizionamento di tutte le altre tag dell'HTML, mentre "absolute" indica una DIV posizionata con coordinate specifiche. Il posizionamento assoluto sarà l'argomento principale di questo tutorial.
left
Posizione a sinistra (vale a dire il numero di pixel dal bordo sinistro della pagina).
top
Posizione in alto (numero di pixel dall'alto).
width
Ampiezza della DIV. tutto il testo HTML della tag verrà giustificato seguendo questo valore. Se non viene specificata la ampiezza viene sottinteso che il testo stia su una sola riga.

Importante:
Quando utilizzate i layer per le animazioni dovreste sempre definire l'ampiezza. Questo perché in difetto del dato IE utilizza l'intera ampiezza dello schermo. Se muovete il layer fuori dal limite dello schermo apparirà una scrollbar fastidiosa che oltretutto ha l'effetto di rallentare l'animazione.

height
Altezza della DIV. Questa proprietà è raramente necessaria a meno che voi non vogliate anche tagliare il layer.
clip
Definisce il rettangolo di taglio del layer. Costringe la DIV in un campo definito con precisione. Gli attributi di clip sono i quattro:

clip:rect(top,right,bottom,left);
visibility
Determina lo stato della DIV e sarà  "visible", "hidden", or "inherit" (quest'ultimo attributo è normalmente acquisito per difetto, in tal caso la DIV erediterà l'attributo da quanto la precede).
z-index
L'ordine in cui vengono appoggiate una sull'altra le DIV.
background-color
E' il colore di sfondo della DIV. Su Netscape questa proprietà si applica solamente al colore di sfondo del testo. Quando volete disegnare aree con i CSS dovete anche definire con lo stesso valore il layer-background-color.
layer-background-color
Colore di sfondo della DIV per Netscape.
background-image
Immagine di background per Internet Explorer. Su Netscape questa; proprietà si applica solamente al testo.
layer-background-image
Immagine di background per la DIV di Netscape.
La sintassi per i CSS differisce da quella dell'HTML, si usano i due punti per separare gli attributi e i loro valori, e il punto e virgola per separare le differenti proprietà:
position: absolute;
left: 50px;
top: 100px;
width: 200px;
height: 100px;
clip: rect(0px 200px 100px 0px);
visiblity: visible;
z-index: 1;
background-color:#FF0000;
layer-background-color:#FF0000;
background-image:URL(filename.gif);
layer-background-image:URL(filename.gif);

Avete un po' di flessibilità nell'assegnare le proprietà dei CSS. Non dovete definirli tutti. Lo spazio bianco viene ignorato in modo tale che possiate o scriverli sulla stessa linea o incolonnarli, si possono anche usare i tabulatori etc. Allo stesso modo l'unità, per default, è il pixel, quindi non sarà necessario aggiungere "px" alle misure, sebbene raccomando di farlo sempre.

position:absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); background-color:#FF0000; layer-background-color:#FF0000;
Lo STYLE Interno:
<DIV ID="nomediv" STYLE="position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;">
</DIV>
Lo STYLE Esterno:
<STYLE TYPE="text/css">
<!--
#nomediv {position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;}
-->
</STYLE>

<DIV ID="nomediv">
</DIV>
Un esempio vale mille parole:

Home Prossima Lezione: Il Cross-Browser JavaScript
copyright 1998 Dan Steinman