Les display ? Késako ?
4 participants
PêpêcheMascotte- Messages : 4428
Les display ? Késako ?
Lun 20 Mai 2019 - 11:14
Les bases du CSS
Display ? Késako ?
Coucou 
Voici donc un nouveau tutoriel pour t'aider à comprendre les bases du HTML & de la CSS.
Pour comprendre ce tutoriel, tu dois avoir lu et compris les explications suivantes :
• Les bases du HTML
• Les principales balises
• Les tableaux
• CSS - Des propriétés structurantes
Comme tu l'as vu dans les tutoriels signalés plus haut, il existe 2 grandes catégories de balises : les blocks et les inline.
Eh bien, figure-toi que la CSS nous permet de nous amuser avec ça Oui, il existe d'autres types de display. Voici les plus courants et utiles :
-> display: block => on peut forcer un élément qui est à la base "en ligne" à devenir "bloc". Cela peut être utile si tu veux que des liens se placent les uns en dessous des autres par exemple : pas besoin de "br", on les mets juste en block
-> display: inline => ça n'a pas trop d'utilité de transformer un block en inline, mais on ne sait jamais
-> display: inline-block => les propriétés du inline et du block mélangées ! Un régal !
-> display: flex => eh bien ça mélange un peu tous les display ! C'est l'outil magique quand tu veux mettre en page des blocs ^^
-> display: grid => transforme l'élément en grille, ce qui permet de positionner ses élements enfants comme on le désire.
Ne t'en fait pas, on va reparler de tout ça en détail
Nous n'allons pas voir tous les types de display, mais les plus courants Allons-y !
Sur un élement "inline", on ne peut pas fixer de taille (largeur/hauteur), ni d'hauteur de texte (line-height). Du coup, supposons que j'ai ce code HTML :
Maintenant, supposons que j'ajoute un display:inline-block à mes span
Cette fois ça fonctionne ! Voilà donc le code que l'on aurait :
Il existe en CSS des display qui s'inspirent/copient les réactions des tableaux. Du coup :
- display:table => l’élément se comportera comme un tableau
- display:table-row => l’élément se comportera comme un tr
- display:table-cell => l’élément se comportera comme un td
Et tu peux appliquer à ces éléments les mêmes propriétés CSS que si l'on travaillait sur un tableau comme par exemple :
-> vertical-align
-> cell-spacing
-> border-spacing
Ici, voici un petit exemple. Supposons que j'ai ce code :
Si j'ajoute des displays liés au table (+ des propriétés qui vont avec) :
comme tu le vois, sur la seconde ligne, je n'ai que 2 div. Eh bien grâce aux display que j'ai renseignés, mes div se comportent comme des cellules du tableau et prenne la place de 2 cellules.
Enfin, il existe un dernier type de display : le display: flex ^^ C'est la solution miracle, et, les navigateurs l'utilisent de plus en plus \o/ C'est un peu un mélange de tous les autres display, et ça, ça change la vie
Tu trouveras un [tutoriel sur la Tambouille ici] ainsi qu'une doc complète [ici].
Le flex est génial quand tu bosses sur des pages web que tu veux en responsive (= qui s'adapte à la taille de ton écran).
Comme c'est parfois un peu complexe à comprendre, tu peux t'amuser à essayer toutes ces propriétés sur un petit jeu de grenouille Il se trouve ici.
Tout comme le display flex, cette propriété CSS peut te sauver la vie pour des mises en page particulière. En effet, elle fait en sorte que l'élement sur lequel tu l'appliques possède une grille sur laquelle tu viendras positionner ses enfants.
Etant donné que c'est un chouilla complexe, un tutoriel dédié à cette propriété CSS est disponible par [ici].
Tout comme pour le flex, le display grid peut être très pratique pour gérer tes affichages responsives.
C'est tout pour les display
Si tu as des questions, n'hésite surtout pas à nous les poser ^^ Nous sommes là pour y répondre
Voici donc un nouveau tutoriel pour t'aider à comprendre les bases du HTML & de la CSS.
Pour comprendre ce tutoriel, tu dois avoir lu et compris les explications suivantes :
• Les bases du HTML
• Les principales balises
• Les tableaux
• CSS - Des propriétés structurantes
Une petite introduction
Comme tu l'as vu dans les tutoriels signalés plus haut, il existe 2 grandes catégories de balises : les blocks et les inline.
Eh bien, figure-toi que la CSS nous permet de nous amuser avec ça
Oui, il existe d'autres types de display. Voici les plus courants et utiles :-> display: block => on peut forcer un élément qui est à la base "en ligne" à devenir "bloc". Cela peut être utile si tu veux que des liens se placent les uns en dessous des autres par exemple : pas besoin de "br", on les mets juste en block
-> display: inline => ça n'a pas trop d'utilité de transformer un block en inline, mais on ne sait jamais
-> display: inline-block => les propriétés du inline et du block mélangées ! Un régal !
-> display: flex => eh bien ça mélange un peu tous les display ! C'est l'outil magique quand tu veux mettre en page des blocs ^^
-> display: grid => transforme l'élément en grille, ce qui permet de positionner ses élements enfants comme on le désire.
Ne t'en fait pas, on va reparler de tout ça en détail
Plongeons-nous dans les display
Nous n'allons pas voir tous les types de display, mais les plus courants
Allons-y !Inline-block
Sur un élement "inline", on ne peut pas fixer de taille (largeur/hauteur), ni d'hauteur de texte (line-height). Du coup, supposons que j'ai ce code HTML :
- Code:
<span>bloc1</span> <span>bloc2</span> <span>bloc3</span>
- Code:
span{
width:200px;
height:30px;
background:orange;
font: 12px/30px Arial;
text-align:center;
margin:0 4px 18px;
}
Maintenant, supposons que j'ajoute un display:inline-block à mes span
Cette fois ça fonctionne ! Voilà donc le code que l'on aurait :
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="description" content="Et voilà la description de ma première page html" />
<title>Display</title>
<style type="text/css">
h1{
background:grey;
color:white;
font: 16px/28px Arial bold;
border:2px solid #666;
padding: 0 24px 0 0;
width:600px;
}
.bloc{
display:inline-block;
width:200px;
height:30px;
background:orange;
font: 12px/30px Arial;
text-align:center;
margin:0 4px 18px;
}
</style>
</head>
<body>
<h1>Mon titre</h1>
<span class="bloc">
Boite 1
</span>
<span class="bloc">
Boite 2
</span>
<span class="bloc">
Boite 3
</span>
</body>
</html>
Table, table-row, table-cell
Il existe en CSS des display qui s'inspirent/copient les réactions des tableaux. Du coup :
- display:table => l’élément se comportera comme un tableau
- display:table-row => l’élément se comportera comme un tr
- display:table-cell => l’élément se comportera comme un td
Et tu peux appliquer à ces éléments les mêmes propriétés CSS que si l'on travaillait sur un tableau comme par exemple :
-> vertical-align
-> cell-spacing
-> border-spacing
Ici, voici un petit exemple. Supposons que j'ai ce code :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<div>
<div>
Un petit titre
</div>
<div>
<div>
<img src="https://2img.net/u/4014/30/77/56/avatars/1-74.png" alt="">
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit odio, sagittis ut condimentum sit amet, dictum dignissim dolor. Phasellus purus lacus, congue vel enim a.
</div>
<div>
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</div>
<div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit odio, sagittis ut condimentum sit amet, dictum dignissim dolor. Phasellus purus lacus, congue vel enim a.
</div>
<div>
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
- Spoiler:
Si j'ajoute des displays liés au table (+ des propriétés qui vont avec) :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.d-table{
border-collapse:separate;
border-spacing:6px;
display:table;
margin: auto;
width: 60%;
}
.d-table .titre-tableau{
caption-side: bottom;
display: table-caption;
font: bold 18px/20px Verdana;
text-align: center;
}
.d-table .d-row{
display: table-row;
}
.d-table .d-row > div{
border: 1px solid #ddd;
display: table-cell;
padding: 8px;
vertical-align: top;
width: 33.3333%;
}
</style>
</head>
<body>
<div class="d-table">
<div class="titre-tableau">
Un petit titre
</div>
<div class="d-row">
<div>
<img src="https://2img.net/u/4014/30/77/56/avatars/1-74.png" alt="">
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit odio, sagittis ut condimentum sit amet, dictum dignissim dolor. Phasellus purus lacus, congue vel enim a.
</div>
<div>
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</div>
<div class="d-row">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit odio, sagittis ut condimentum sit amet, dictum dignissim dolor. Phasellus purus lacus, congue vel enim a.
</div>
<div>
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
- Spoiler:
comme tu le vois, sur la seconde ligne, je n'ai que 2 div. Eh bien grâce aux display que j'ai renseignés, mes div se comportent comme des cellules du tableau et prenne la place de 2 cellules.Flex
Enfin, il existe un dernier type de display : le display: flex ^^ C'est la solution miracle, et, les navigateurs l'utilisent de plus en plus \o/ C'est un peu un mélange de tous les autres display, et ça, ça change la vie
Tu trouveras un [tutoriel sur la Tambouille ici] ainsi qu'une doc complète [ici].
Le flex est génial quand tu bosses sur des pages web que tu veux en responsive (= qui s'adapte à la taille de ton écran). Comme c'est parfois un peu complexe à comprendre, tu peux t'amuser à essayer toutes ces propriétés sur un petit jeu de grenouille
Il se trouve ici.Grid
Tout comme le display flex, cette propriété CSS peut te sauver la vie pour des mises en page particulière. En effet, elle fait en sorte que l'élement sur lequel tu l'appliques possède une grille sur laquelle tu viendras positionner ses enfants.
Etant donné que c'est un chouilla complexe, un tutoriel dédié à cette propriété CSS est disponible par [ici].
Tout comme pour le flex, le display grid peut être très pratique pour gérer tes affichages responsives.C'est tout pour les display
Si tu as des questions, n'hésite surtout pas à nous les poser ^^ Nous sommes là pour y répondre
Padsky- Messages : 454
Re: Les display ? Késako ?
Mar 13 Aoû 2024 - 13:25
Coucou,
Est-ce qu'on peut utiliser cette technique pour des fiches ?
Est-ce qu'on peut utiliser cette technique pour des fiches ?
MävenRâleuse (Admin)- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4099 
Re: Les display ? Késako ?
Mar 13 Aoû 2024 - 17:39
Bonjour @padsky,
Tous les display peuvent s'utiliser sur n'importe quel code
Il suffit de les utiliser correctement.
Si jamais tu as un soucis avec un display n'hésite pas à nous poser des questions
Tous les display peuvent s'utiliser sur n'importe quel code
Il suffit de les utiliser correctement.
Si jamais tu as un soucis avec un display n'hésite pas à nous poser des questions
- Padsky
- Messages : 454
Re: Les display ? Késako ?
Mer 14 Aoû 2024 - 0:00
D'accord ! Merci @Mäven !
Je vais essayer de remplacer mon tableau par un display.
Si j'ai un soucis, je reviendrais vers vous !
Je vais essayer de remplacer mon tableau par un display.
Si j'ai un soucis, je reviendrais vers vous !
MiettesRâleuse (Admin)- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2205
Re: Les display ? Késako ?
Mer 14 Aoû 2024 - 7:00
Coucou @Padsky
Une partie d'auto-formation devrait arriver bientôt pour bien comprendre les display (il ne nous reste que l'exercice finale à rédiger). Cela devrait t'aider d'avantage
Une partie d'auto-formation devrait arriver bientôt pour bien comprendre les display (il ne nous reste que l'exercice finale à rédiger). Cela devrait t'aider d'avantage
- Padsky
- Messages : 454
Re: Les display ? Késako ?
Mer 14 Aoû 2024 - 10:48
Ah oui merci beaucoup les filles !
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum