Transformez vos éléments avec display
Je vais vous apprendre ici à modifier les lois du CSS (brrr…). Accrochez-vous !
Il existe en CSS une propriété très puissante : display. Elle est capable de transformer n'importe quel élément de votre page d'un type vers un autre. Avec cette propriété magique, je peux par exemple imposer à mes liens (originellement de type inline) d'apparaître sous forme de blocs :
a { display: block; } |
À ce moment-là, les liens vont se positionner les uns en-dessous des autres (comme des blocs normaux) et il devient possible de modifier leurs dimensions !
Voici quelques-unes des principales valeurs que peut prendre la propriété display en CSS (il y en a encore d'autres) :
Valeur |
Exemples |
Description |
inline |
<a>, <em>,<span>… |
Eléments d'une ligne. Se placent les uns à côté des autres. |
block |
<p>, <div>,<section>… |
Eléments en forme de blocs. Se placent les uns en-dessous des autres et peuvent être redimensionnés. |
inline-block |
<select>,<input> |
Eléments positionnés les uns à côté des autres (comme les inlines) mais qui peuvent être redimensionnés (comme les blocs). |
none |
<head> |
Eléments non affichés. |
On peut donc décider de masquer complètement un élément de la page avec cette propriété. Par exemple, si je veux masquer les éléments qui ont la classe « secret », je vais écrire :
.secret { display: none; } |
Pour faire apparaître ces éléments par la suite, vous devrez faire appel à JavaScript. Certains sites web utilisent cette technique pour, par défaut, masquer les sous-menus qui ne s'affichent que lorsqu'on parcourt les menus.
Et quel est ce nouveau type bizarre, inline-block ? C'est un mélange ?
Oui, ce type d'élément est en fait une combinaison des inlines et des blocs. C'est un peu le meilleur des deux mondes : les éléments s'affichent côte à côte et peuvent être redimensionnés.
Peu de balises sont affichées comme cela par défaut, c'est surtout le cas des éléments de formulaire (comme <input>) que nous découvrirons un peu plus tard. Par contre, avec la propriété display, nous allons pouvoir transformer d'autres balises en inline-block, ce qui va nous aider à réaliser notre design.
Créé avec HelpNDoc Personal Edition: Éditeur complet de livres électroniques ePub