CSS : Positionnement et mise en page

Présenter des menus en display inline

Testez gratuitement nos 1250 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
La flottaison peut également être utilisée pour générer des barres de menus. Vous pouvez également vous orienter vers un affichage inline-block. Dans ce cas, allez plus loin avec l'espace entre les éléments.
07:48

Transcription

L'emploi de la flotaison au sein d'une barre de menu peut tout à fait être indiqué dans le sens où la balise parent, le ici en l'occurrence prenant un overflow:hidden même s'il n'y a pas besoin de récupérer l'intégralité du bloc pour le colorer par exemple, on sait qu'il va casser la flotaison pour l'élément p qui suit et qui ne va pas se mettre à flotter derrière le menu 5, jusque là c'est parfait. Juste un petit détail à prendre en considération, c'est que c'est la balise a qui doit être en display:block avec les padding, etc, parce que regardez, si on place ici notre balise a, ça fonctionne bien on a nos éléments de menu qui sont récupérés mais si on place tous ces éléments-là ici sur la balise ce qui souvent, enfin ça m'est arrivé plusieurs fois de rencontrer ça dans des productions, eh bien ça fonctionne toujours pareil vous voyez, le menu fonctionne, mais dès que je sors de la balise a je n'ai plus d'interactivité ici sur le côté puisque la balise a n'est pas du tout concernée, elle n'épouse pas, ça reste un inline ça n'épouse pas son container parent, alors que si on place tout ça sur la balise a directement eh bien, elle va devenir block, elle va épouser automatiquement l'intégralité de la balise parent et à ce moment-là on va pouvoir avoir ici de l'interaction. Donc tout du long, voilà. Alors, pourquoi ne pas utiliser d'éléments de type display-inline-block, à la place d'une flotaison ? Effectivement, on pourrait demander ici d'avoir un display-inline-block mais malgré que l'on place une marge à 0 ici on a bien tous nos éléments qui sont espacés d'une certaine petite distance ce qui n'est pas contrôlé ici par cette marge. Alors, quand est-il exactement ? On pourrait essayer de jongler. Et on a plusieurs possibilités, plusieurs alternatives qui vont nous permettre d'en faire fi. Regardez, si je supprime tout simplement les espaces HTML alors là ça n'a rien à voir avec les CSS ça à voir avec la structure HTML et vous avez vu à mesure que je réduis ces espaces ici, que je supprime cette indentation et cette espace qui peut résider entre les éléments de type et , eh bien on réduit l'espace. En fait, c'est ce petit espace qui est pris en compte, comme étant... puisque je suis en display-inline-block, c'est exactement pareil que si j'avais écrit espace-span et entre des span mettre des espaces et bien ce petit espace insécable serait présent et c'est lui que l'on voit ici représenté. Donc, si on supprime ces espaces dans le HTML, on n'a plus d'élément inline qui vont être séparés par des espaces comme s'il s'agissait d'une phrase et donc on va pouvoir le corriger. Le petit souci c'est que ça rend le code pas terrible. Alors là on peut très bien envisager d'avoir une tâche de post-processing qui va pouvoir dire, tu me compactes le HTML, pour des soucis de poids déjà de bande passante, et automatiquement tous ces espaces se retirerons automatiquement, donc si on est en post-processing, pas de souci là-dessus pas besoin de s'en occuper, on fait rien, le display-inline-block ne nous causera pas de souci. Alors pour le post-processing, je vous invite à vous rapprocher de notre catalogue et à regarder une étape spécialement dédiée à cet élément-là et voir tout ce qui peut être fait justement pour optimiser notre flux de travail. Revenons à notre problématique d'espace-display-inline-block on a une autre possibilité qui va être tout simplement de se dire, je vais prendre une marge intérieure ici, pour dire je veux supprimer cette marge gauche. Alors on va rajouter un élément ici. Faites bien attention, ici je vais le faire volontairement sur un li+li ici, je vais dire, tous les éléments de type li+li donc tous les éléments li qui suivent un li on va pouvoir mettre un margin-left de -4 pixels et regardez, ce -4 pixels s'en va. En fait, ce -4 pixels, correspond à la largeur d'un espace qui correspond à 4 pixels. Et ça fonctionne très bien, vous voyez ici mon bloc est aligné là. Si j'enregistre maintenant ici et que je le teste dans un navigateur de type Chromium, voilà ici, et que je joue avec un CTRL+. Vous avez vu avec le CTRL+, dès que je zoome et que je passe à la ligne, on s'aperçoit que celui-ci se décale par rapport au premier. Donc en fait, ici, je vais supprimer cette partie-là, en fait je vais la commenter, comme ça vous pourrez la garder dans le fichier d'exercice. voilà ici, je vais commenter cette partie li+li et donc je vais l'appliquer directement à l'élément et vous avez vu tout seul, il a un peu dégagé ici. J'enregistre, je rebascule dans Chromium ici. Si j'actualise ma page, vous voyez ici il se recale pile poil avec le menu. Bon ça c'est très bien par contre si je visualise dans Firefox, et que dans Firefox je m'assure dans le menu ici de l'affichage, d'avoir un zoom sur le texte seulement ici et que je fais un CTRL+, je zoome, et vous avez vu le petit espace il apparait maintenant entre les éléments, parce que je suis plus dans une taille de 16 pixels par défaut ici, et donc le 4 pixels s'applique mais j'aurai besoin de plus puisque ma taille maintenant peut faire 24, 28, 28 divisé par 4 ça ne fait pas 4. Et donc là, il va falloir corriger cet élément-là. Si je reviens ici sur ma partie et qu'au lieu d'utiliser -4 pixels j'utilise -0,25em c'est-à-dire 1/4 du caractère, vous avez vu que là ils se sont un peu rapprochés et si je bascule dans Firefox ici et que j'actualise ma page ils se recollent tous, parce que justement, ils ont pu s'adapter en temps réel à la taille de la typographie. En parlant de typographie...en fait on va pouvoir aussi jouer sur la typo. Rappelons-nous qu'à l'intérieur du , on a une phrase qui est considérée comme si on avait des spans séparés par des espaces. Si je mets un fontsize à 0, je vois plus rien d'accord mais au moins, je sais que tous les espaces sont mis à 0. Et si maintenant, je vais dire que lui je veux un font size problématique car on peut plus travailler en proportionnelle parce que là le container enfant se retrouve dans un parent à 0 donc si je mets font size 1em, ça fonctionnera pas. Là, je suis obligé de fonctionner en dur mais si je dis je mets un font size 16 pixels, mes 16 pixels reviennent puisque ma font size est à 0 dans le container parent les espaces eux n'ont pas été ré-agencés et donc ils vont automatiquement disparaitre, puisqu'ils existeront toujours mais ils auront une typo de 0. Alors, j'ai une autre possibilité de faire, parce que là c'est bien mais ça nous oblige à passer par une typo en dur. Ce qu'on va pouvoir faire c'est dire, en fait dans le container parent je veux un word-spacing. L'espace entre les mots qui sera de -0,25em on a vu pour cette histoire de proportionnalité sur la typo pour l'utiliser en cours. Je vais dire, je veux un letter-spacing, pareil de -0,25em ici. Ce qui fait que regardez, l'état de mon menu, tout s'est collapsé tout s'est encapsulé les uns dans les autres, parfait. Mais je vais reprendre maintenant ces 2 propriétés ici au niveau du list cette fois-ci, et je vais lui dire, non, tu n'es pas un 0,25, tu es normal. Réadapte ce que tu devrais être normalement, y compris les word-spacing, et les letter-spacing ici. Dès qu'on repasse en normal nos menus reviennent normaux, et on a pu déglinguer comme ça les espaces qui faisaient partie de cette string et qui nous gênaient. Voilà, donc plusieurs manières de pouvoir réemployer le display-inline-block pour nos menus tout en contournant ce petit artefact qui n'est pas un bug qui est un artefact, on va dire, qui cause souci puisqu'on est passé en block en ligne on a des espaces qui sont générés ces espaces sont représentés.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !