Attributo display css. A cosa serve e come utilizzarlo. Proprietà css display.

Utilizzo dell'attributo display css.

ALLWEB free

04 Feb 2012

Home Mappa directory Giochi XXXDirectory Script Forum

UTILITY

GRAFICA

Display:

Prima di iniziare ad elencare i valori dell'attributo display vi rimandiamo a questa pagina, dove potrete leggere quali sono gli elementi HTML definiti TOP-LEVEL, HEAD, BLOCK-LEVEL, LISTS, TABLES, FORMS, INLINE, FONT E FRAMES.

L'attributo display definisce come visualizzare un elemento HTML a video.

L'attributo display può supportare i seguenti valori:

block
inline
none
inline-block NON supportati da IE7, da Firefox2
list-item NON supportati da IE7
run-in NON supportati da IE7, da Firefox2 e Opera9
compact NON supportati da IE7, da Firefox2 e Opera9
table NON supportati da IE7

display:block;

Con il valore block tutti gli elementi agiscono come un blocco, in pratica non si posizionano l'uno a fianco dell'altro, ma uno sopra l'altro. La sequenza non sarà orizzontale ma vericale.

Facciamo un esempio con due tag span:

Risultato:
ciao! ciao a te

L'esempio sottostante è lo stesso codice con l'aggiunta di display:block;

Risultato:
ciao! ciao a te
Il browser reagisce come se avesse trovato due blocchi, e li mette uno sopra l'altro.

display:inline;

Il valore inline significa che un elemento HTML reagisce come un elemento inline.

Facciamo un esempio con due tag <div>:

Risultato:

ciao!

ciao a te

L'esempio sottostante è lo stesso codice con l'aggiunta di display:inline;

Risultato:

ciao!

ciao a te

Il browser reagisce come se avesse trovato due blocchi, e li mette uno sopra l'altro.

display:none;

L'attributo display con valore none rende invisibile il tag che lo contiene.

Molto simile a visibility:hidden; la differenza fra i due sta nel fatto che display:none; non rende visibile il contenuto e non occuperà alcuno spazio nella pagina, mentre visibility:hidden; non rende visibile il contenuto ma occupa lo spazio della pagina come se il box fosse stato scritto.

Il loro utilizzo è molto utile in pagine dinamiche.

display:inline-block;

Il valore inline-block cerca di gestire un blocco mantenendolo sulla stessa linea di ciò che gli sta a fianco.

Ciao io sono <div style="border:1px solid black; display:inline-block; color:green;">del testo</div> di prova

Risultato:
Ciao io sono

del testo

di prova
NON visibile con IE7, no con Firefox 2, si con Opera9.

display:list-item;

Il valore list-item crea un elenco con gli elementi a cui è associato.

Risultato:

ciao!

ciao a te

NON visibile con IE7, si con Firefox2 e Opera9.

display:table;

Il valore table sta ad indicare che i tag si comportano come il tag table HTML.
Per completare la tabella è necessario utilizzare gli attributi display:table-row; per le righe, e display:table-cell; per le colonne.

<div style="border:1px solid black; display:table; padding:5px;">
  <div style="border:1px solid black; display:row; padding:5px;">
    <div style="border:1px solid green; display:table-cell; color:green;"> primo </div>
    <div style="border:1px solid blue; display:table-cell; color:blue;"> secondo </div>
    <div style="border:1px solid red; display:table-cell; color:red;"> terzo </div>
  </div>
  <div style="border:1px solid black; display:row; padding:5px;">
    <div style="border:1px solid red; display:table-cell; color:red;"> primo </div>
    <div style="border:1px solid blue; display:table-cell; color:blue;"> secondo </div>
    <div style="border:1px solid green; display:table-cell; color:green;"> terzo </div>
  </div>
</div>

Risultato:

primo

secondo

terzo

primo

secondo

terzo

Non tutti i browser reagiscono in maniera identica.
NON è supportato da IE7 e precedenti (Se stai utilizzando Internet Explorer 7 quello che vedi NON è corretto, prova con Firefox o con Opera).

<< precedente

successiva >>