I Fogli di Stile (CSS) di Web-Link: Tutto per la costruzione delle tue pagine web

Sharing is caring!

CSSVisita il sito di Web-Link

 
Menù Argomenti
Home Page Web-Link
Introduzione
Sintassi
In Linea
Nella Pagina
Nel Foglio Esterno
Le Classi
I Selettori ID
La Grafica
I Links
Attributi di Testo
Attrib. Carattere
Attrib. Colore Sfondo
Attrib. di Posizione
Parametri
Conclusioni
Forum di supporto

Valid CSS!

Valid HTML 4.01 Transitional

  Rev. 3.0 – Agosto 2005    Ver. 1.0 – Novembre 1999

Gli 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: 50px; left: 20px; 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 sinistro 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 sinistro 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 sinistro e 50 px dal bordo superiore della finestra del browser.


width : larghezza ; Determina la larghezza del contenitore se posizionato in modo absolute.

{position:absolute; width: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 sinistro 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; width: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; width: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 sinistro 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; width:300px; left:100px; top:50px;}

Contenitore o livello con priorità negativa (-1) che lo posiziona addirittura sotto lo sfondo (non tutti i browser lo gestiscono se negativo) con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser. Se non viene specificato alcun attributo per default il contenitore è visible.


Continua: Conclusioni

    Andrea Bianchi 
   

per stampare questa pagina


Potete fare domande e discutere l’argomento sul Forum gratuito di supporto.

© Andrea Bianchi 1997 ~ 2006

Valid CSS!

Valid HTML 4.01 Transitional

shares