Glli attributi per il
posizionamento dei livelli
Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.
Gli attributi devono essere inseriti all'interno di parentesi graffe { } e laddove in HTML verrebbe usato un "=" (uguale) viene invece usato ":" (due punti). Argomenti consecutivi sono separati da ";" (punto e virgola) invece che da "," (virgola). Inoltre molti argomenti sono divisi da - (trattini) anche se questi fanno parte integrante del nome stesso.
Per i parametri ad essi associabili fare riferimento a
questa tabellina.
Prima di passare in rassegna i vari
attributi di posizionamento è bene ricordare che questi difficilmente saranno adoperati singolarmente, essi infatti fanno parte di un insieme di altri parametri che servono a definire e posizionare un contenitore o livello all'interno di una pagina web.
La creazione di un livello tipo potrebbe essere questa, già vista nella lezione riguardante gli ID:
{
position : absolute;
top : 50 px;
left : 20 px;
zindex : 1;
}
|
position : absolute | relative ; Determina il tipo di posizionamento che dovrà assumere il contenitore creato sullo schermo in uno dei possibili modi.
Absolute o Relative, in entrambi i casi l'attributo ha ragione di esistere se abbinato con gli altri attributi di posizionamanto.
{position:absolute; left:100px; top:50px;}
|
Contenitore o livello posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser.
top : lunghezza | percentuale | auto ; Determina la distanza del margine superiore del contenitore dal margine superiore della finestra del browser. Si possono adoperare tutti i valori ammessi riportati nella
tabella parametri.
{position:absolute; top:50px; left:100px;}
|
Contenitore o livello posizionato in modo assoluto a 50 px dal bordo superiore e 100 px dal lato destro della finestra del browser.
left : lunghezza | percentuale | auto ; Determina la distanza del margine laterale sinistro del contenitore dal margine laterale sinistro della finestra del browser. Si possono adoperare tutti i valori ammessi riportati nella
tabella parametri.
{position:absolute; left:100px; top:50px;}
|
Contenitore o livello posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser.
widht : larghezza ; Determina la larghezza del contenitore se posizionato in modo absolute.
{position:absolute; widht:300px; left:100px; top:50px;}
|
Contenitore o livello con una sua dimensione in larghezza di 300 px posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser.
height : altezza ; Determina l' altezza del contenitore se posizionato in modo absolute.
{position:absolute; height:400px; widht:300px; left:100px; top:50px;}
|
Contenitore o livello con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser.
visibility : visible | hidden | inherit ; Determina la visibilità del contenitore, questo infatti potrebbe sparire se associato al suo attributo hidden.
{position:absolute; visibility:hidden; height:400px; widht:300px; left:100px; top:50px;}
|
Contenitore o livello nascosto, con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser. Se non viene specificato alcun attributo per default il contenitore è visible.
z-index : valore; Determina la priorità di visualizzazione del contenitore rispetto allo sfondo della pagina o rispetto ad altri contenitori posizionati sullo schermo.
{position:absolute; z-index:-1; height:400px; widht:300px; left:100px; top:50px;}
|
Contenitore o livello con priorità negativa (-1) che lo posiziona addirittura sotto lo sfondo; con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser. Se non viene specificato alcun attributo per default il contenitore è visible.
Esempio: Un classico esempio potete vederlo nel menù qui di lato, quando cliccate sopra la voce attributi di style si visualizza un contenitore con dimensioni e posizioni prefissate con visibilità nascosta fino a quel momento.
Il vostro clic ha permesso di cambiare le proprietà di quel piano passandolo da nascosto a visibile, avrtete anche notato come un contenitore possa contenere non solo immagini ma anche codice html normalissimo, in questo caso links.
Vi ricordo due indirizzi sui quali reperire ulteriori informazioni:
specifiche del W3C , dove troverete tutti gli attributi e i parametri ammessi e supportati dai CSS1 e :
specifiche per i nuovi CSS2 dove alcuni di questi non sono ancora supportati da nessun browser, almeno non fino alle versioni 5.5 di IE e 6 di NS.
|