CSS : Positionnement et mise en page

Réviser les menus

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Utilisez les flex afin de réviser le positionnement des éléments enfants. En jouant sur leur direction, vous allez voir qu'il est très simple de présenter des blocs en rangée ou en colonne, en fonction de la largeur de l'écran.
04:51

Transcription

Revisitons la manière de gérer les menus, en utilisant les Flex. Alors, ici on a simplement une barre de navigation qui contient du ul ou du , voilà, tout simplement, pensez au a href qui est à l’intérieur du et c’est lui qui fait le bloc, donc c’est-à-dire que les ne sont pas codés pour l’instant, et on a une disposition de bloc qui utilise 100% de l'espace en largeur et qui s’empile les uns sous les autres, quoi de plus normal. Alors, dès qu’on va placer les flex, il faut se positionner sur le container, donc si on place le flex sur le nav, ça pourrait être très bien, les flex-items seront les ul par exemple qui sont contenus ici. Si on veut affecter en flex-items les , il faut placer le container display flex sur le ul Donc ici on va placer un display : flex. Tout simplement. On enregistre, on actualise, puis la barre de navigation se met toute seule en place. On pourrait très bien envisager, puisque par défaut on a un flex-direction qui est un row, on pourrait très bien envisager d’avoir un row inverse. De ce fait là, dès qu’on actualise la page, notre barre de menu c’est l’équivalent de file track qui se place sur la gauche et qui place nos menus directement à l’inverse. Donc cette partie-là, on va la commenter, on ne va pas l’utiliser pour l’instant, et ce qu’on pourrait aussi envisager d’avoir, c'est de faire un justify-content ici, histoire de pouvoir dire que l’on veut centrer tous ces éléments-là. Donc ici, si j’actualise la page, on se positionne directement à l’intérieur de notre et on se centre directement. On pourrait, si on souhaitait, rajouter une petite marge ici, par exemple un li + li, on pourrait l’ajouter à tous les li c’est à vous de voir ce que vous voulez obtenir, margin-left par exemple, qui serait de 0.875em, CTRL+S, on actualise et on va écarter simplement nos menus et répartir l’espace droite et gauche tout simplement. Donc rapidement on peut mettre une barre de menu en place. Quelle serait la différence maintenant, si on utilisait au lieu d’un flex, alors je vais commenter celui-ci, et au lieu d’utiliser un flex on utilisait un display inline-flex, si on actualise la page telle quelle, on se retrouve en fait avec une barre ul qui va simplement englober de manière inline les enfants, sans avoir à tenir l’intégralité des 100% de l’espace parent. Voilà, c’est uniquement ce genre d’approche que l’on peut avoir. Alors, si on se positionne maintenant sur un menu qui se voudrait responsive. Alors que va-ton avoir de plus ? On va devoir se dire que quand on va être dans une largeur d’écran suffisamment large on souhaite avoir le menu de cette façon, par contre quand on va réduire la largeur de l’écran, on va avoir les menus les uns sous les autres. C’est extrêmement simple à faire. Il suffit simplement de jouer sur le flex-direction. Cette possibilité-là va être faite, par exemple, pour les écrans inférieurs, donc on va dire, quand on est dans un écran avec un maximum width : 30em, à ce moment-là, ce qu’on souhaite faire, c’est avoir un ul qui a un flex : direction qui sera égal à colonne cette fois-ci. C’est-à-dire qu’on veut mettre nos éléments en colonne tout simplement. Et donc ici il me faut juste fermer... cette palette, enregistrer, actualiser ma page, et naviguer. Et regardez, dès que je vais défiler, je bascule tout simplement. Alors là, il faut caler un deuxième élément, c’est cette marge, vous vous rappelez le li + li ici qui a été placé en 0.875, en fait il faudrait lui dire ce 0.875, je le veux que lorsque mon média-screen sera supérieur à 481 donc à 30,0625, on va aller le placer à l’intérieur, on va boucler cette partie-là ici, on va rajouter une petite accolade de fin ici, et on va se retrouver avec cet élément-là. De quoi a-t-on besoin maintenant ? C’est de refaire la même chose, c'est-à-dire de placer le li + li ici, je vais venir copier celui-ci, mais cette fois-ci au lieu d’être affecté sur le margin-left, on va dire qu’on va l’affecter sur le margin-top ici, tout simplement, et voilà on enregistre. Si j’actualise la page, on a bien nos marges qui sont placées ici, et quand je vais revenir, dès l’instant où on repasse, on a mis en place un menu responsive très rapidement, avec deux lignes de code en jouant sur le display : flex, et le flex-direction. Il ne reste plus maintenant qu’à venir apporter la décoration globale à l’intégralité de chacun de ces éléments.

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 !