Les feuilles de style CSS (7/15) - Flottement et positionnement

Bonjour à tous et bienvenue dans cette nouvelle leçon de CSS. Aujourd'hui, nous allons voir les flottements, le changement de type et le positionnement. Considérons le code HTML suivant. Dans la balise body, nous avons intégré 3 balises div identifiées respectivement par div1, div2, div3. Et pour pouvoir les identifier au sein du navigateur, nous avons mis 3 textes différents. Maintenant jetons un coup d'œil sur le style CSS. Nous avons intégré un style CSS commun grâce au sélecteur div. Dans ce cas ce style va s'appliquer sur les 3 div simultanément. Et pour pouvoir changer la couleur d'arrière-plan nous avons appliqué background-color à chacune des div. Le résultat que l'on obtient sur le navigateur est le suivant. Nous avons 3 div qui sont alignées verticalement, ce qui est tout à fait normal parce que les div ce sont des conteneurs de type bloc. Et du coup ils vont occuper chacune une ligne à part. Maintenant nous avons appliqué le flottement à toutes les divs. Alors ici pour le sélecteur div, nous allons mettre float left. Si on exécute, on va voir que les divs sont alignées d'une manière horizontale. En fait, on appelle ça le flottement. Ça veut dire que les éléments, ils flottent l'une à côté de l'autre et toutes à partir de la gauche. On va changer cet aspect légèrement. Alors on va mettre pour la première div float left, pour la deuxième float left aussi. Et pour la troisième, on va mettre float right. Float est une propriété CSS qui accepte 2 valeurs, soit left ou bien right. Quand on exécute maintenant, on va voir que les 2 premières balises div 1 et div 2 qui ont la valeur float left, ils sont placés à gauche de la page, alors que la troisième div, div 3, elle est placée à droite. On appelle ça le flottement. Bon, maintenant imaginez que j'ai enlevé le flottement de la troisième balise et quand j'exécute, je vais voir que le résultat est un petit peu arbitraire. Bon, ça ne ressemble vraiment à rien. Alors imaginez que je veux conserver le flottement pour la div 1 et la div 2, par contre la div 3, je veux pas qu'il subisse le flottement. Ça veut dire qu'il va descendre à la ligne suivante, ce qui est un rendement par défaut des balises de type bloc. Alors il suffit d'aller sur div 3 et mettre ici clear: Left, ça veut dire je vais annuler le flottement left qui était déclaré juste avant. Quand j'exécute maintenant, ça va donner ceci. Mais en général, la plupart des intégrateurs préfèrent mettre la valeur both. Pourquoi? Parce que c'est possible d'avoir des flottements à gauche, des flottements à droite, et afin de dire que je vais éliminer tous les effets des flottements précédents, il suffit de mettre both. Ça veut dire les deux, gauche et droite. Et du coup, ce que je vais avoir, c'est toujours le même résultat. En fait, les flottements sont très utilisés par les intégrateurs afin de pouvoir aligner les éléments de type bloc un à côté de l'autre pour pouvoir construire leur page web brique par brique. Mais c'est une technique qui est de moins en moins utilisée parce qu'il y a des méthodes qui sont plus avancées actuellement. D'ailleurs, nous allons découvrir une autre méthode qui permet tout simplement de changer le type de balise par défaut. Par exemple, donc on va d'abord éliminer les floats et on va reconstruire le rendu par défaut. Donc ça donne toujours les balises de cette manière. Alors on sait que les div sont des balises de type bloc et du coup elles ont tendance à s'aligner d'une manière verticale les unes en dessous des autres. Si je veux changer le type de balise, ça veut dire je veux les rendre inline, il suffit tout simplement d'aller sur La div ici, bon, ça veut dire ça concerne les 3 divs, et je vais mettre display: inline. Display, c'est une propriété CSS qui permet de changer le type de balise. Par défaut, c'est block. Maintenant, si je mets inline, regardez ce qui va se passer. Les 3 balises sont alignées à droite, mais ce n'est pas la seule remarque. On constate aussi que les dimensions, elles ont été annulées. Et comme je l'ai dit la séance dernière, c'est que les dimensions, elles sont applicables sur les balises block et certaines balises inline, mais la plupart des balises inline n'acceptent pas les propriétés comme width, et height. Mais nous avons quand même pu changer le type de balise. Autrement dit, les spans qui sont par défaut des inline, on peut aussi les rendre des blocs. Les balises sémantiques qui sont des blocs, on peut aussi les rendre des inline, etc. Mais là, imaginez que je voudrais quand même conserver l'aspect des balises div, ça veut dire ce sont des balises redimensionnables, mais en plus ils doivent s'aligner l'une à côté de l'autre. Alors là, comme j'ai dit pour display on peut mettre inline, block. Il y a aussi une troisième propriété, c'est inline-block. Ça veut dire les deux. Tout simplement, les balises vont être alignées sur la même ligne. Ça veut dire que c'est un comportement qui caractérise les balises de type inline. Mais ils sont redimensionnables et c'est ce qui caractérise les balises block. Quand j'exécute maintenant, je vais voir que les 3 balises sont alignées l'une à côté de l'autre. Alors ça ressemble un petit peu aux effets de flottement, mais le flottement des fois il est difficile à maîtriser. C'est pourquoi cette méthode Il est encore mieux. Il y a juste un truc, c'est que parfois il se peut que ces balises soient décalées verticalement. Pour régler ce problème, généralement on va associer à cette propriété quelque chose qui ressemble à ceci. On va mettre vertical-align et là vous mettez une des valeurs possibles, ça veut dire top, bottom ou bien middle. On va mettre par exemple top. Ça veut dire qu'elles seront toutes alignées verticalement à partir de la position supérieure. Toujours avec la propriété CSS display, nous allons essayer de faire disparaître un élément du flux HTML. C'est-à-dire que même si un élément a été déclaré en tant que balise HTML, on peut le faire disparaître avec le CSS comme s'il n'a pas été intégré. On va s'intéresser à la balise div2 et on va essayer de la faire disparaître grâce à display. On va revenir sur le code, on va éliminer maintenant les 2 propriétés que nous avons intégrées. On exécute déjà pour rétablir le rendu par défaut. Alors on obtient ça. Et maintenant nous allons nous intéresser à la balise div 2. Voilà, comme ça. On va mettre display et on va mettre la valeur none. Alors pour display, il peut posséder les valeurs suivantes: inline pour rendre un élément inline, block pour le rendre de type bloc, inline-block pour qu'il puisse réunir les 2 propriétés des inline et des blocs comme on vient de faire, none pour le faire disparaître carrément du flux HTML. Il y a aussi la propriété flex, mais cette dernière on va la voir dans une séance à part. Elle est très pratique et très utilisée en ce moment. Maintenant j'exécute pour voir ce que ça donne. On voit que la balise orange, c'est-à-dire la balise div 2, a disparu. C'est comme s'il n'a pas été intégré et du coup la balise div 3 a occupé sa place. Ça ressemble tout simplement au fait que vous avez supprimé carrément la balise div 2 du contenu HTML. Imaginez que vous voulez juste faire disparaître un élément tout en réservant sa place. Alors au lieu de mettre display none, on va mettre visibility hidden. Visibility peut accepter 2 valeurs, soit visible qui est la valeur par défaut, ou bien hidden, ça veut dire un élément masqué. Dans ce cas, quand j'actualise, je vais voir que l'emplacement de la balise div orange, il est bien là, mais on peut pas la voir. Donc ça veut dire qu'on a juste masqué, mais on n'a pas fait disparaître du flux HTML. Dans la dernière partie de cette vidéo, nous allons nous intéresser au positionnement. Le positionnement permet tout simplement de changer l'emplacement par défaut d'un élément HTML. L'emplacement de cet élément est tout simplement défini par l'ordre de sa déclaration dans le document HTML. Autrement dit, là nous avons bien défini que la balise 1 sera intégrée en premier, puis la balise 2, puis la balise 3. On appelle ça le positionnement par défaut. Mais si on veut changer cet ordre sans toucher au code HTML, Alors on va agir sur le positionnement. Dans le CSS, pour simplifier, nous allons faire disparaître la div 3 carrément. Là encore en HTML. Alors nous n'avons que 2 divs, à savoir div 1 et div 2 qui sont colorées de manière différente. Ça ressemble un petit peu à ceci. Première chose à faire, c'est changer le positionnement de la balise div 2 et aussi la balise div 1. Alors comment on va faire? On va tout simplement mettre position absolute pour les deux. Quand on fait ça ou qu'on exécute, on va voir que le résultat ressemble à ceci. On voit bien que la balise div 1 a disparu. En fait, elle n'a pas disparu, mais elle est tout simplement cachée par la div 2. Ça veut dire qu'elle est en dessous de la div 2. Afin de pouvoir la montrer, on va tout simplement agir sur ses coordonnées sur le navigateur. Le système de coordonnées sur navigateur marche de cette manière: le point en haut à gauche, ça correspond au point 0, 0, c'est l'origine des positionnements. Il suffit maintenant d'agir sur les X et sur les Y afin de pouvoir décaler l'élément selon nos besoins. Le X est identifié en CSS par la propriété left et le Y est identifié par la propriété top. Il y a aussi la propriété right et bottom. Donc maintenant on va tout simplement aller sur les deux, on va mettre là left par exemple 20px, top 20px. Et pour la deuxième div on va mettre left 100px et top 100px. Quand j'exécute, on va voir que la balise div 1 a été démasquée légèrement. Mais la balise div 2 est toujours au-dessus. Imaginez maintenant que je veux changer cet ordre, ça veut dire je veux que la balise div 2 soit derrière et la balise div 1 soit devant. Sans toucher au code HTML, je vais agir sur le troisième axe, c'est l'axe des z, c'est l'axe qui sort de l'écran. C'est un axe virtuel, mais on considère que celui qui va ordonner le positionnement des éléments, ça veut dire qui sera devant et qui sera derrière. On appelle cette propriété z-index. Donc z-index, la div 1 qui était derrière, on va lui donner la valeur 2, et la div qui était par défaut devant, c'est-à-dire la dernière, on va lui donner la valeur 1. Dans ce cas, le z-index, il peut commencer à la valeur 1 et peut atteindre des valeurs qui sont très grandes, mais ça fonctionne tout simplement de la manière suivante: l'élément qui a le z-index le plus grand, c'est lui qui est placé devant. Dans ce cas, c'est la div 1 qui sera placée devant. Quand j'exécute, On va voir que la div 1 est passée devant et la div 2 est passée derrière. Alors ça, c'est le positionnement absolu. Il y a aussi position fixed. Voilà, comme ça pour les deux. Là, rien ne va vraiment changer, bon, parce que fixed, c'est aussi un positionnement spécial et on peut contrôler le positionnement des éléments grâce au système de coordonnées. La seule différence par rapport à absolu, c'est que imaginez que votre page contient beaucoup d'éléments et la barre de défilement est apparue. Avec position fixed, même si vous défilez votre page, les éléments ne changeront pas d'emplacement, ils seront immobiles, alors que tout ce qui est dans la page va défiler avec le scrollbar. Par contre, avec la position absolue, les éléments, ils sont définis dans une position initiale, mais quand vous défilez, ils vont tout simplement accompagner le défilement de la page. Maintenant, nous allons voir une autre position, c'est relative. Bon, la position relative, c'est tout simplement une position qui va dépendre de la position initiale de l'objet. Pour mieux comprendre, on va maintenant commenter relative comme ça, juste pour la première. Donc la deuxième, on va carrément l'éliminer pour simplifier. Alors on conserve juste la div 1, même chose ici, nous avons simplement div 1 avec une position par défaut. Donc maintenant left et top, ils vont pas s'appliquer, z-index aussi. Ces propriétés s'appliquent uniquement si l'élément est positionné, c'est-à-dire si vous lui appliquez la propriété position. On exécute pour voir ce que ça donne. Alors on a dit il va les positionner comme ça, c'est la position initiale. Quand je vais mettre position relative, qu'est-ce qui va se passer? Le left, ça sera 20 par rapport à la position initiale. Même chose pour le top. Autrement dit, ça c'est la position initiale, maintenant avec le nouveau positionnement, il sera tout simplement décalé de 20 pixels par rapport à la position où il était avant. C'est un décalage relatif. Même chose pour le Y. Quand j'exécute, en fait c'est un décalage qui dépend pas de l'origine du navigateur mais de l'emplacement initial ou bien l'emplacement par défaut de l'élément au moment de l'intégration. Notez que la valeur par défaut de position c'est static, c'est-à-dire tous les éléments sont par défaut statiques, à moins que si vous décidez de les rendre positionnés en leur appliquant les valeurs absolues, fixed, ou bien relatives. Mais il y a aussi d'autres valeurs comme par exemple sticky, etc. Donc il y a beaucoup de valeurs que l'on peut appliquer et qui peuvent avoir des effets qui s'avèrent des fois très utiles. Merci pour votre attention et à la vidéo prochaine.