8/11/14
Observez la suite des items li numérotés du document keepers. Ajoutez des bordures pour les éléments li et ol. Quelle boite contient les éléments li ? Quelle est la largeur apparente de la boite de chaque li : vous voyez que c'est la boite ol qui les contient et que chaque boite li a une largeur presque égale à la largeur de son conteneur indépendamment de son propre contenu.
Ajoutez une règle pour mettre une bordure bleue aux balises a.
Vous voyez ainsi que les boites des a ont une largeur égale à leur contenu et sont disposées successivement sur la même ligne dans le premier paragraphe.
Essayez de modifier la largeur de la boite a (propriété width). Que remarquez-vous : la propriété n'est pas prise en compte.
Essayez des marges et des espacements pour cette boite. Cette fois les propriétés sont prises en compte.
Conclusions : Nous avons vu ci-dessus que les boites d'item (balises li) d'une liste sont placées une sous l'autre (quelle que soit la place disponible). Par contre deux boites a qui ont le même parent (ici une boite p) sont placées une à coté de l'autre si la fenêtre de navigation est assez large, sinon une en dessous de l'autre (testez avec le navigateur).
La différence vient que ces deux éléments n'ont pas le même mode d'affichage. On dit que les boites li sont des boites bloc, les boites a des boites en-ligne. Le mode d'affichage est une propriété CSS nommée : DISPLAY.
Chaque balise HTML a un mode d'affichage par défaut. Par exemple :
Suivant le mode d'affichage, le comportement des propriétés CSS (width par exemple) n'est pas le même.
Nous précisons dans la suite de ce TD le fonctionnement du mode d'affichage BLOC. L'affichage EN-LIGNE sera détaillé au prochain TD.
Remarquez aussi que le numéro de l'élément li est en dehors de la boite li. Pouvez vous trouver une propriété CSS pour changer cela ?