Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Les display ? Késako ? Empty Les display ? Késako ?

Lun 20 Mai 2019 - 11:14

Les bases du CSS

Display ? Késako ?

Coucou Smile

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  Smile 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 Smile
-> display: inline => ça n'a pas trop d'utilité de transformer un block en inline, mais on ne sait jamais Smile
-> 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 ^^

Ne t'en fait pas, on va reparler de tout ça en détail Razz

Plongeons-nous dans les display

Nous n'allons pas voir tous les types de display, mais les plus courants Smile 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>
et cette CSS :
Code:
span{
 width:200px;
 height:30px;
 background:orange;
 font: 12px/30px Arial;
 text-align:center;
 margin:0 4px 18px;
 }
Eh bien mes blocs vont se placer côte à côte et leur largeur sera égale à la place dont à besoin le texte. En gros, ma CSS concernant la taille ne sera pas prise en compte :
Les display ? Késako ? Display1_zps5702c041

Maintenant, supposons que j'ajoute un display:inline-block à mes span
Les display ? Késako ? Display2_zpsd5280da3

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>
qui "rend" ceci :
Spoiler:
Les display ? Késako ? Ex-san10

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>
je peux avoir ce rendu plutôt chouette :
Spoiler:
Les display ? Késako ? Ex-d-t10

Idea 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 Smile

Tu trouveras un [tutoriel sur la Tambouille ici ainsi qu'une doc complète [ici ].

Idea 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 Razz Il se trouve ici .




C'est tout pour les display Smile

Si tu as des questions, n'hésite surtout pas à nous les poser ^^ Nous sommes là pour y répondre Wink


Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses