4/11/14

Modifier le mode d'affichage d'un élément : propriété DISPLAY

Reprenez Giorgio

exemple

Dans le document nous avons rajouté le menu de navigation en haut (home, about, ...); c'est une liste (balise ul)


  <ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>

Ajoutez ce code au document Giorgio, puis rajoutez des règles CSS pour lui donner les propriétés de base (couleur, police, taille)... les li seront les unes en dessous des autres car les balises li ont par défaut un affichage Block.

On peut changer cela en utilisant la propriété CSS : display. Nous connaissons pour l'instant deux modes d'affichage: inline et block.

La propriété CSS Display permet de modifier l'affichage par défaut :

p {display:...}

b a ba

boites rouges largeur 300

Rouge 1 et 2 : display block

Rouge 3, 4: display inline

Résultat: la largeur 300 n'est plus appliquée sur les boites 3 et 4

b a ba, b a ba, b a ba,

b a ba, b a ba,

b a ba, b a ba, b a ba

b a ba, b a ba

Exercice : Utilisez display:inline pour les li du menu (giorgio). Constatez le résultat. Remarquez que la largeur des li change en fonction du contenu. Vérifiez que la propriété width n'est plus prise en compte pour ces boites.