Propriété DISPLAY : AFFICHAGE DES ELEMENTS
- 1. Cliquer-ici pour regarder la vidéo sur la propriété "Display"
- 2. Modifier votre code pour avoir deux paragraphes qui s'affichent côte à côte dans votre page web.
Exemple:
3. Passer ensuite à la partie "Class-Id". Les personnes intéressées peuvent lire ce qui est en dessous de ce texte avant de passer au chapitre suivant.
Résumé du chapitre:
Il y a plusieurs sortes d'éléments html:
- les éléments de types blocs ( <div>, <p>, <h1>, <h2>, etc..) s'affichent dans une boite rectangulaire de dimensions réglables et se positionnent par défaut les uns en dessous des autres.
- les éléments de types inline blocs ( <img> ) s'affichent dans une boite rectangulaire de dimensions réglables et se positionnent par défaut les uns à côté des autres.
- les éléments de types inline ( <a>, <span> ) se positionnent par défaut les uns à côté des autres.
La propriété display permet de masquer l'affichage d'un élément et de transformer un élément de type block ( boite) en un élément de type inline ( ou l'inverse) . Avec cette propriété on peut afficher les liens (originellement de type inline) sous formes de blocs ce qui crée des zones cliquables.
Exemple: modification d'un lien hyertexte pour en faire un bouton rectangulaire cliquable:
a:link, a:visited {
margin-left: 25%;
margin-right: 25%;
margin-top: 50px;
background-color: hotpink;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
border: 3px solid yellow;
border-radius: 12px;
display: block;
}
Display: none
- Donner la valeur none à la propriété display d'un élément permet de le masquer.
Display: inline-block
La valeur inline-block permet d'afficher les éléments de type bloc ( <p>, <div>, etc..) les uns à la suite des autres et non les uns en dessous des autres (affichage par défaut).
Ce réglage permet de créer des grilles et des colonnes de taille réglables grâce aux propriétés width et height des blocs.
Créé avec HelpNDoc Personal Edition: Créer des documents d'aide PDF facilement