Utilizzo dell'attributo display css.
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 26 Feb 2017
aggiungi in preferiti  
Home    Mappa directory    Script




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:
<span style="color:green;">ciao!</span><span style="color:green;">ciao a te</span>
Risultato:
ciao! ciao a te

L'esempio sottostante è lo stesso codice con l'aggiunta di display:block;
<span style="display:block; color:green;">ciao!</span><span style="display:block; color:green;">ciao a te</span>
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>:
<div style="border:1px solid black; color:green;">ciao!</div><div style="border:1px solid black; color:green;">ciao a te</div>
Risultato:
ciao!
ciao a te

L'esempio sottostante è lo stesso codice con l'aggiunta di display:inline;
<div style="border:1px solid black; display:inline; color:green;">ciao!</div><div style="border:1px solid black; display:inline; color:green;">ciao a te</div>
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.
<div style="margin-left:20px; border:1px solid black; display:list-item; color:green;">ciao!</div>
<div style="margin-left:20px; border:1px solid black; display:list-item; color:green;">ciao a te</div>
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).