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.

Definire l'altezza di un elemento

In questa lezione vedremo in che modo nei CSS si possono impostare le dimensioni verticali di un elemento, quindi l'altezza (height). Un primo concetto fondamentale, che riguarda l'altezza è che questa è determinata dal suo contenuto, nel senso che più testo inseriamo all'interno di in box, in un paragrafo o in una cella di una tabella e più essi saranno estesi in senso verticale.

Le proprietà che vedremo di seguito in questa lezione servono in pratica a fornire un meccanismo in grado di controllare o superare in qualche modo questo comportamento standard.

1- height: Abbiamo detto pocanzi, che con la proprietà height possiamo definire noi stessi l'altezza del contenitore. Non è ereditata e si applica a tutti gli elementi tranne colonne di tabelle e elementi inline non rimpiazzati. Nel codice sottostante abbiamo creato con i CSS un contenitore (div.box) alto 500px:

     div.box {
                height: 500px;
                width: 200px;
                border: 1px solid black;
                background-color: orange;
                }

Guardiamo questo esempio

I valori che si possono quindi applicare a questa proprietà sono:

L'uso della proprietà height va sempre valutato con attenzione, sopratutto nel caso più importante da valutare che è quando il contenuto supera le dimensioni del contenitore. Il comportamento dei vari browser a questo riguardo è notevolmente diverso, infatti Internet Explorer non fà altro che ignorare l'altezza che abbiamo impostato, estendendola, mentre Firefox e Opera rispettano la regola, ma il contenuto eccedente và a sovrapporsi agli elementi vicini o sottostanti. Ricordiamoci una cosa importante però e cioè che l'altezza è indirettamente influenzata anche dalla larghezza di un elemento.


2- overflow: Prima parlavamo della eventualità che il contenuto superi le dimensioni del box contenitore, e in questo caso utilizzando la proprietà overflow possiamo controllare il comportamento del contenuto e porvi rimedio. Si applica a tutti gli elementi blocco e non è ereditata.


     div.box {
                height: 300px;
                width: 650px;
                overflow: scroll;
                }

I valori che possiamo inserire per questa proprietà, sono:

Per capire meglio il codice, guardiamo questa pagina


3- min-height: Con questa proprietà impostiamo un'altezza minima per un elemento e valgono le stesse osservazioni fatte per height relativamente al contenuto. Non è ereditata e non è supportata da Internet Explorer.

     div 6 { min-height: 160 px;}

Visualizziamo l'esempio:

I valori che si possono quindi applicare a questa proprietà sono:


4- max-height: La proprietà max-height serve a impostare l'altezza massima di un elemento e anche per essa valgono le osservazioni già fatte precedentemente per quanto riguarda il contenuto eccedente. Non è ereditata.

     div 7 { max-height: 160 px;}

Visualizziamo l'esempio:

I valori che si possono quindi applicare a questa proprietà sono:

^ 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