"Comment puis-je utiliser CSS pour créer des bordures de largeur adaptée aux dimensions de ce qu'elles encadrent ?"
(16/11/2005)
Par défaut,
les éléments conteneurs CSS prennent 100% de l'espace offert par leur élément
contenant (jusqu'à la racine, le navigateur lui-même). Il est possible de modifier
la propriété width d'un conteneur pour lui assigner
un pourcentage de cet espace, ou pour indiquer une largeur précise en pixels.
Il peut cependant arriver un cas où l'on préférera que le conteneur prenne une
largeur en fonction de son contenu (texte, image...), par exemple pour afficher
une bulle d'information avec des bordures. Par défaut, ce comportement n'est
pas prévu par CSS. Il faut donc tricher.
L'une des méthodes consiste à enfermer le contenu textuel dans un élément span,
et à définir la bordure par rapport à ce span.
En effet, les hauteur et largeur d'un span dépendent
de celles du texte qu'il contient. Le div conteneur
du span aura donc beau prendre 100% de l'espace,
le span n'encadrera que le texte, et non de l'espace
vide.
Bienvenue sur notre site.
Vous n'êtes pas connecté.
Cependant, cela ne permet pas de placer une image : span ne prend en compte que
la hauteur du texte, et donc une image plus grande que ce dernier sortira du cadre.
Une autre solution existe alors, sans span : utiliser
display: table. Cette propriété
précise que l'élément ciblé sera affiché comme
s'il s'agissait d'un tableau.
Bienvenue sur notre site.
Vous n'êtes pas connecté.
Bienvenue sur notre site.