logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Come posizionare gli elementi

La parte dei CCS relativa al posizionamento degli elementi è un argomento complesso, ma molto interessante. È con il posizioanmento infatti, che possiamo sistemare un elemento esattamente dove vogliamo, all'interno della pagina web. Insieme alla proprietà float ci dà la possibilità di creare layouts precisi e avanzati. Affrontremo la questione in due lezioni. Nella prima esamineremo la proprietà position e le diverse modalità di posizionamento. Nella seconda vedremo con quali proprietà è possibile posizionare con precisione gli elementi e gestirne alcuni decisivi aspetti visuali.

Il principio alla base del posizionamento è che possiamo posizionare ciascun box in qualsiasi posto della pagina. Questa proprietà si applica a tutti gli elementi e non è ereditata.

   h1 { position: absolute; }

I valori che si possono inserire per questa proprietà sono:

1- static: È il valore di default, quello predefinito per tutti gli elementi non posizionati secondo un altro metodo. Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento, che in genere è sull'angolo in alto a sinistra della pagina.


2- absolute: Utilizzando questo valore, il box dell'elemento viene rimosso dal flusso normale del documento ed è posizionato in base alle coordinate che noi gli diamo, con le proprietà top, right, bottom e left. Il posizionamento avviene sempre rispetto al box contenitore dell'elemento.

titolo

Se per esempio vogliamo posizionare il titolo che vedete quà sopra, a 100px di distanza dal bordo superiore del documento e a 200px di distanza dal bordo sinistro, dovremmo scrivere il seguente codice CSS:


    h1 {
            position: absolute;
            top: 100px;
            left: 200px;
        }

Il risultato che vedremo sulla nostra pagina sarà questo:

posizione_assoluta

Quindi tra un contenitore posizionato in modo statico e uno posizionato in modo assoluto c'è una certa differenza, che possiamo notare in questa pagina di esempio


3- fixed: Usando questo valore il box dell'elemento viene, come per absolute, sottratto al normale flusso del documento. La differenza stà nel fatto che per fixed il box contenitore è sempre la finestra principale del borwser, ovvero l'area del contenuto. Una cosa molto importante da ricordare, è che un box posizionato con fixed non scorre con il resto del documento, ma rimane, appunto, fisso al suo posto. Purtroppo, il valore non è supportato da Internet Explorer su Windows.

Per capire meglio, guardiamo la solita pagina di esempio


4- relative: La differenza tra il posizionamento assoluto e quello relativo è su come viene calcolata la posizione. La posizione di un elemento posizionato in maniera relativa viene calcolato dalla sua posizione originale nel documento, cioè l'elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l'elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche quì impostata con le proprietà top, right, bottom e left, ma in questo caso, esse non indicano un punto preciso, ma lo spostamento in senso orizzontale e verticale rispetto al box contenitore.

Per capire meglio, guardiamo questa pagina di esempio

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice