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

Positionner à l'aide des propriétés

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une approche du positionnement différente va vous permettre de travailler au pixel près. Tirez parti de cette approche en étudiant un exemple précis.
07:02

Transcription

On peut parfois avoir besoin de générer des positionnements plus précis presque au pixel près on va dire et dans des contextes que la flotaison ou le display ne permettraient pas d'aborder. Alors, ici on va utiliser la propriété position, qui va nous permettre de faire du relatif, de l'absolu et on va voir en quoi cela peut nous aider. Alors, au niveau de la figure ici, on a un élément qui contient 4 images on va dire entre guillemets gratuites, qui sont ces bouts de scotch ici à placer. On a une image, qui elle est l'illustration, la photographie en question et puis un qui va décrire cette figure ici. Alors, ces bouts de scotch n'ont aucun intérêt d'être positionnés en dur dans le HTML, c'est ce qui a été fait pour cet exemple, mais en réalité, imaginez par exemple que vous ayez plusieurs figures comme ça qui se chargerez depuis un fichier json, et automatiquement on va générer l'accrochage de ces 4 éléments ici, à la volée pour les ajouter dans le HTML, et non pas les laisser présents. Alors ceci dit maintenant, pour mettre en forme ces éléments, vous avez compris où on veut en venir, c'est de pouvoir positionner les scotchs sur le bord de la photo. Et on va voir comment on peut s'y prendre en utilisant les positions. Alors ici, la figure on va automatiquement lui donner une marge histoire de la décoller du fond, de 100 pixels par exemple et puis on va lui donner une largeur bloquée de 450 pixels qui correspond plus ou moins à un certain delta en fonction de la taille de la photo par défaut. Voilà, donc ici la figure a été positionnée, voilà. Et ce qu'on va faire c'est rajouter d'entrée de jeu, à cette photo ici donc à la classe photo, pour pouvoir distinguer si vous voulez les différentes classes ici, ruban 1, ruban 2, ruban 4 et photos ici, pour pouvoir les distinguer. On va pouvoir directement plutôt que d'affecter la balise img affecter directement les classes appropriées. Voilà, donc ici la photo, on va lui donner une bordure, on va mettre un border, par contre on va mettre un border de 20 pixels solide, et on va le faire blanc voilà ici, et puis pour pouvoir décoller cet élément-là ce qu'on va pouvoir faire c'est placer un box-shadow directement en 65,65 au niveau du noir 2px, 2px, 1px de décollage, voilà pour pouvoir décoller cette photographie. Voilà, ce qu'on pourrait faire aussi c'est donner rapidement une couleur à l'arrière-plan ici, histoire de pouvoir encore plus décoller cette image et pouvoir travailler dans des conditions plus sympathiques, voilà. donc en mettant un background-color ici en RGBA ça va faire le job. alors, on va cibler tous les éléments de classe qui commencent par le mot ruban Alors, pour cela on va cibler directement toutes les classes qui commencent par ruban ici, on va les positionner en position absolute directement et pour ça, position absolute, voilà. Par contre, la position absolute va se positionner forcément par rapport au premier parent positionné. Donc le premier parent va être figure, il faut que figure soit positionné alors pour ça on va venir rajouter à figure un position cette fois-ci, pour pouvoir le positionner de manière implicite enfin explicite mais sans affecter son positionnement c'est-à-dire qu'il est relative par rapport à lui même. Et donc les rubans vont se positionner par rapport à la figure. Alors maintenant ce qu'il va falloir faire c'est calculer directement les positions de chacun de ces rubans et puis éventuellement de les pivoter sur leur axe de façon à ce qu'ils puissent venir se mettre dans chacun de ces angles comme ça. Donc, ce que je vous propose de faire, c'est le premier. Donc pour cela, il suffit de faire la classe ruban1 de lui mettre un transform: rotate, on va le faire à -45° pour le pivoter, on va mettre sa bordure gauche à -60 pixels donc on va la retirer de 60 pixels ici et son top à 10 pixels. Voilà, ça va permettre de le positionner sur l'angle. On va pouvoir faire exactement la même chose pour chacun des autres rubans. Donc on va faire sur le ruban 2 un transform: rotate de 45° un right de -90px. et un top de 10px. Le 3 on va faire un transform pareil et cette fois-ci on récupère à chaque fois les mêmes axes x,y car à chaque fois on va être positionné sur les mêmes verticales ou horizontales. Voilà, de façon à positionner nos 4 éléments. Vous voyez, les positions relatives vont nous servir à pouvoir positionner ces éléments de manière relative par rapport à leurs parents ce qui fait que maintenant si on déplace une marge de 200pixels au niveau de la figure, on voit bien que la figure part mais les scotchs restent positionnés réellement par rapport à cette figure. Ils nous restent plus maintenant qu'à positionner le fig caption. Alors on peut commencer par jouer sur la typo qu'on va utiliser donc on pourrait utiliser un monospace ici, Consolas par exemple. On va lui donner une typo de 16, ce qui serait la typo de 1em. avec un line-height de 16 pour pouvoir centrer l'élément et surtout le placer dans un contexte défini on va dire. On va lui donner une couleur d'arrière-plan, un gris bien sûr une couleur d'avant-plan pour placer ce contraste on va placer un padding, histoire de décoller cette fameuse. Alors, on aurait pu ne pas utiliser de padding mais avoir un line-heigth plus important et donc ça aurait fait le job sauf qu'on aurait pas eu de padding sur la partie gauche et droite. Voilà, donc ça peut être sympa. En plaçant en inline-block, on va automatiquement replacer cet élément-là sur sa propre distance, c'est-à-dire il va l'occuper comme s'il était un élément de type inline que la longueur nécessaire par rapport à son texte. Voilà, et pourquoi ne pas utiliser un position relative c'est-à-dire lui dire, ta position c'est celle que tu as, mais on va te décaler sans que tu quittes ton flux, donc d'un bottom de 60 pixels, donc par rapport à figure puisque lui aussi est un enfant de figure donc il va monter de 60 pixels par rapport au bottom et on va l'écarter sur le gauche par exemple de 110 pixels, voilà. Donc l'image est là, on pourrait lui apporter une petite rotation aussi histoire de le décaler un petit peu, donc vous voyez avec les positions relatives et absolues on va pouvoir venir jouer comme ça. Maintenant, dernier élément que l'on pourrait faire, c'est de dire à cette figure qu'on va la faire pivoter puisque n'importe comment tous les éléments qui sont placés à l'intérieur vont tous recevoir cette même rotation. Je parle par rapport à leur position relative ou absolue ils vont automatiquement pivoter eux aussi. Et voilà, donc rapidement on peut travailler avec les positions pour affecter un élément et lui apporter une certaine décoration. Alors maintenant, ce qu'il resterait à faire ce serait de récupérer un fichier json qui contiendrait un ensemble d'images et de photographie et puis de leur appliquer un algorithme qui les positionneraient sur un mur, alors de manière un peu aléatoire, jouez avec les z-index, ensuite pour les positionner sur les parties hautes ou basses afin de composer un mur pictural.

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 !