IV - Propriété des éléments : display

La propriété CSS display va nous permettre de modifier le type de nos éléments. Nous n’allons pas détailler ici toutes les valeurs possibles, mais nous intéresser à deux d’entre elles : display:block et display:inline .

Dans cet exemple, nous allons créer deux éléments de type “bloc”, en leur affectant la propriété display:inline, et deux éléments de type “en-ligne”, en leur affectant la propriété display:block.

Propriété display : CSS

#bloc1 {

    background-color:#00CCFF; /* bleu ciel */

    display:inline;

}

#bloc2 {

    background-color:#FF6666; /* rouge */

    display:inline;

}

#enligne1 {

    background-color:#00CCFF; /* bleu ciel */

    display:block;

}

#enligne2 {

    background-color:#FF6666; /* rouge */

    display:block;

}

Propriété display : HTML

<div id="bloc1">Mickey</div>

<div id="bloc2">Minnie</div>

<span id="enligne1">Donald</span>

<span id="enligne2">Daisy</span>

Etrange n’est-ce pas... Les éléments de type “bloc” se comportent maintenant comme des éléments de type “en-ligne”, et vice-versa. Imaginez les possibilités offertes par une telle propriété... Un menu sous forme de liste généré dynamiquement pourrait devenir, sur simple changement du style appliqué, un menu horizontal sans pour autant modifier la fonction de base...