Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

CSS : Positionnement et mise en page

Maintenir une position fixe

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Fini l'époque où Internet Explorer demandait une gymnastique complexe pour utiliser une position fixe ! Aujourd'hui, vos menus de navigation ou palette d'outils peuvent rester fixes sur l'espace de votre choix.
05:40

Transcription

Placer une barre de menu sur la partie haute ou la partie basse, peu importe, va être très intéressant d'un point de vue ergonomie mais va disparaitre dès l'instant où l'utilisateur va scroller directement dans le texte et le contenu et donc la barre de menu va partir. Donc pour cela il va être possible de pouvoir lui demander de faire par exemple position et cette fois-ci au lieu d'utiliser un absolute, beaucoup ont confondu à une époque le fait qu'absolute voulait dire par rapport au coin du navigateur en fait c'est position fixed qui va correspondre à cela et donc dès l'instant où on va demander d'avoir une position fixed automatiquement cet élément va sortir, d'une part du flux, et puis d'autre part va pouvoir être positionné sur la partie top un zéro par exemple alors pas besoin de donner une unité, zéro c'est zéro et left:0 Si vous le positionnez à cet endroit-là, vous voyez que l'élément se positionne dans la partie haute. Si maintenant au lieu de top, vous mettez bottom ici, eh bien on va le positionner sur la partie basse à 0 et ici, d'accord, donc ça c'est exactement pareil. Par contre, vous pouvez naviguer il n'y a pas de soucis, vous voyez l'élément va pouvoir rester fixe, seulement comme vous avez vu, il est sorti du flux donc le Lorem ipsum qui était normalement positionné juste en dessous de la barre de navigation se trouve donc directement en zéro, zéro. Alors ici je vais revenir en top ici, voilà ici, vous voyez que je désactive cette partie-là. vous voyez que Lorem ipsum est là et dès qu'on l'active le Lorem ipsum automatiquement reprend sa place. Ce qui veut dire que d'entrée de jeu, il va falloir qu'on demande à cet élément de partir. Alors ne pensez pas qu'en mettant par exemple un padding-bottom ici, sur le nav ici on pourrait très bien placer un padding-bottom cela ne changerait rien, bien entendu il est sorti du flux, il est sorti du flux ça ne l'influera en rien du tout sur le positionnement de Lorem ipsum donc si ici je lui mets un padding-bottom par exemple de 10 pixels effectivement on a une marge blanche de 10 pixels ici, vous voyez. Mais en fait l'élément se trouve quand même placé en arrière. Ce qu'il va falloir c'est donc prendre le container ici, le container on n'en a pas c'est même un immense, 2 immenses paragraphes ici donc ce qu'il va falloir faire c'est dire eh ben je vais prendre le p first-of-type first-of-type le premier de p alors ça pourrait être le premier élément qui suit après vous voyez vous adapterez en fonction de vos besoins si vous avez un container main par exemple qui est juste placé en dessous ça sera le main et vous allez lui mettre un margin-top donc tous les paragraphes n'auront pas ce top, il n'y a que le premier élément qui l'aura et donc ça va le dégager ici margin-top vous allez le mettre de 60 pixels par exemple et ici voilà ça va décaler de 60 pixels ce top. Voilà, maintenant, on peut enregistrer si je défile bien entendu qu'on passe dans cette partie-là. Alors ce qui peut être fait c'est par exemple mettre un background avec un fond transparent. Donc, on va pouvoir aller dans la navigation directement et ajouter un background-image sur ce background-image, on va mettre un gradient directement de couleur qui pourrait partir vers le fond donc du bottom. On va le faire partir d'un lightgrey par exemple à 70% histoire de le positionner non pas au départ du nav mais de le positionner presque vers la fin, n'oubliez pas qu'il a un padding ici, on peut supprimer donc sa couleur blanche ici, qu'il avait au départ et lui placer directement un transparent ce qui fait que maintenant on a les éléments qui peuvent passer dessous, comme ça l'élément. Alors justement, en parlant de dessous ici, je vais remettre quand même le background-color ici background-color, qui avait été mis, qui était white ici, voilà. par contre il vous faut le commenter ici sinon il va s'additionner background-image il va pas être remplacé par l'image et donc de ce fait ne va pas jouer sur cet effet de transparence. Donc en parlant de passer par dessous, on parle de niveau comme ça on pourrait très bien placer un zéro z-index ici à cette navigation en lui disant qu'il a un z-index de niveau 100. Donc on va dire un peu comme s'il était à une hauteur de 100. Maintenant si je passe sur les p alors ici je vais créer une balise p directement, je pourrais très bien dire que les p eux sont à 200 par exemple. Ils pourraient être au-dessus donc. Ici si je dis p z-index:200, il se passe en fait strictement rien. Les p restent toujours dessous simplement parce que les z-index ne peuvent s'appliquer qu'à des éléments qui positionnés, qui sont sortis du flux quelque part. Donc ici il faudrait que je puisse rajouter simplement un position:relative pour lui dire, tout simplement, je te positionne de manière relative donc il restera là où il est relative à toi-même et vous voyez là par exemple le texte passe dessus, donc en fonction des effets sur lesquels vous voulez jouer pensez que ce genre d'éléments qui sont positionnés par la propriété position vont pouvoir eux directement jouer sur des niveaux de profondeur des z-index, donc vous pouvez jouer avec des niveaux n'hent ésitez surtout pas à jouer de 100 en 100 pour vous laisser des niveaux intermédiaires si après avec la programmation en Javascript vous voulez placer des éléments intermédiaires, pensez à ne pas mettre 1,2,3,4,5 parce que sinon vous ne pouvez plus passer entre ça doit forcément du décimal.

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 !