Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

CSS : Positionnement et mise en page

Garder la même hauteur d'élément

Testez gratuitement nos 1338 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Il est parfois nécessaire d'attribuer la même hauteur à des colonnes adjacentes ne possédant pas un contenu équivalent. Explorez diverses techniques vous permettant d'arriver à ce résultat.
11:27

Transcription

Lors de nos mises en pages, on peut dans cet esprit-là, on voit que nos deux colonnes n’ont pas le même contenu et donc forcément n’auront pas la même hauteur. Et cependant on peut avoir besoin, visuellement, d’apporter la même hauteur à ces 2 colonnes. Alors on va voir diverses techniques qui peuvent arriver à ce résultat, en fonction de nos besoins l’une ou l’autre pourra être adapté. Le contenu va être tout simplement un article principal qui contient 3 blocs de type section, qui eux-mêmes contiennent des contenus différents en terme de volume. 3 paragraphes, 1 paragraphe, 2 paragraphes. La première approche qu’on va donner, pour rester dans notre traditionnelle approche le sens classique va être de faire flotter ces éléments. Donc si j’apporte une flottaison gauche ici, nos éléments vont flotter les uns à la suite des autres. On aurait pu faire une flottaison droite, cela aurait pu être pareil, sauf qu’on aurait titre 3 d’abord, puis titre 2 puis titre 1 du fait de leur flottaison, cela inverserait les éléments. Là si on veut les garder dans l’ordre, le mieux c’est de partir sur du left. Rien ne se passe visuellement, c’est normal puisque les blocs font 100% de leur container et donc ils ne laissent pas la place aux suivants de passer. Par contre dès l’instant où on va leur dire que leur largeur ne fait que 33%, tous vont se mettre côte à côte, ce qui est tout à fait normal. Petit soucis, on a d’une part enclenché une flottaison, ce qui veut dire que tous les éléments qui vont suivre vont s’engouffrer dans les trous dès qu’ils vont les trouver. Deuxième problématique, c’est que les hauteurs ne sont pas équivalentes. Alors pour résoudre la problématique de la flottaison pour les éléments suivant, on va simplement faire un overflow hidden, bien que visuellement cela ne va rien à faire dans notre approche dans le cadre dans lequel on travaille, on sait que tous les éléments suivants vont être bloqués par le parent, et donc dans ce moment là ils ne flotterons pas dans ces trous restés ouverts ici. Comment va-t-on faire pour pouvoir boucher les trous ? Un truc très simple à utiliser, si je mets du padding ici en bas, padding bottom, que va-t-il se passer ? Je vais mettre un padding-bottom par exemple de 200 pixels, regardez ce qui se passe. De suite, la partie basse se remplit. Je vais continuer, je vais mettre 300. Il n’y en a pas assez, oui tout à fait, peut être à la limite, on va dire qu’il y en a assez, soyons fou on va mettre 400. Si je mets 400 pixels, je sais que je vais couvrir l’espace qui reste pour cet élément. Petit soucis, c’est que tous les éléments ont eu 400 pixels, et du fait qu’ils ont eu 400 pixels, donc tous se sont agrandis homothétiquement de cette valeur-là. Donc si maintenant je lui mets un margin-bottom, je dis que la marge est basse, je vais la réduire cette marge basse, et je vais la réduire de théoriquement autant, mais je vais la réduire de -390, juste pour qu’on le voit mieux, 390 pixels, regardez, on voit bien que la marge est revenue, elle a mangé l’intérieur, je vais la faire moins importante, je vais la faire de 290. Vous voyez elle est revenue, elle a mangé tout le monde, mais elle va devoir s’arrêter, ce n’est pas parce qu’on a une marge négative qu’on va devoir réduire la hauteur de l’élément. Donc si je mets 390 ici, c’est parfait cela va revenir dans l’ élément mais cela ne rentrera pas dans l’élément. Donc cela va manger notre padding, et de cet élément là on a la possibilité maintenant d’avoir des hauteurs identiques. Alors plutôt que de rester sur 400 parce qu’on ne sait pas la hauteur-là, on peut mettre des trucs hallucinants comme -20 000 et ici – 19 999, on aura le même résultat, et on sait qu’on va couvrir tous les cas de figures, toutes les hauteurs possibles d’éléments. Une autre approche pourrait consister à utiliser le inline-block, je ne peux pas vous le cacher. Si on prend un display inline block, on va pouvoir rajouter cet élément-là, ici. Même topos que tout à l’heure, les éléments passent les uns à la suite des autres parce que lui va utiliser 100% de sa possibilité. Donc, on va leur dire qu’ils n’ont qu’une largeur de 33%. Petit souci entre ce fameux espace, entre ces éléments vous vous rappelez, qui n’est pas du tout le bienvenu mais qui éxiste, on va le supprimer d’un margin-left qui sera de -0,25em. Tout se place bien sauf que comme tout texte, cela s’appuit sur la ligne de base, le texte s’écrit sur la ligne qui est en bas, donc forcément tout est centré vers le bas. Il nous suffit simplement de faire un vertical-align ici, et de lui dire qu’il va se placer sur le top ici tout simplement, et cela va positionner tout le monde. Si on place maintenant un padding à l’intérieur de nos éléments, chose qui serait à peu près cohérente, alors on va utiliser un padding 0 pour la partie haute, mais on va mettre un 0,4em par exemple sur l’horizontal, automatiquement ce padding va faire sortir tout le monde. Alors là ce qu’il nous faut c’est de ne pas réfléchir une seule seconde, mais de placer un élément universel et de lui dire que cet élément universel, je lui mets un box-sizing border-box, il récupère tout le monde, donc le width va tenir compte de ce padding. Ici, si j'enregistre, c’est parfait. Nickel, on a pu mettre au même stade que la flottaison tout à l’heure mais toujours pas à notre hauteur. Bien, à notre hauteur, ce que je vais faire c’est commenter notre couleur ici, je ne la veut pas, par contre je vais appliquer la couleur à l’article. Si j'applique la couleur à l'article, je vais pouvoir dire, je ne vais pas utiliser un background-color, mais je vais utiliser un background-image. Et ce background-image, je vais l’identifier comme étant un linear-gradient. Et ce linear-gradient, c’est-à-dire une couleur dégradée, je vais lui dire qu’il parte de gauche, donc forcément to right, je vais lui mettre to right comme propriété. Et là dans cette propriété to right, je vais commencer à avoir une première couleur qui pourrait être un lightgrey tout simplement, qui fera 33% de large. Si je remets cette même couleur ici, et que je la remets à 33% cette-fois-ci, je vais avoir mon dégradé qui va partir à 33%. Pour le visualiser, je vais le mettre en place ici comme ça. Voilà, cela aidera mieux. Donc ici je sais que je vais partir de gris, à 33% à gris. Donc j'aurai aucun dégradé puisque cela reste à la même couleur, je n’aurai pas d’effets d’opacité, si j’vais mis red par exemple pour mieux comprendre je serai parti de gris à rouge à 33% et forcement après je continue sur du rouge. Donc ici je vais de gris à gris, à 33%. Ce qu’il me faut maintenant, à partir de cette dimension-là, c’est de changer de couleur, et là pour changer de couleur, je vais prendre par exemple un F1D9AB, au hasard, qui est cette sorte de orange, mais cet orange, je vais lui dire que lui va être à 33% également. C'est-a-dire, je vais repartir à mon orange, et je vais repartir avec ce même orange là avec 66% cette-fois ci. Alors là je vais le copier jusqu’à 66%, et maintenant il ne me reste plus qu’à faire la même chose pour du gris ici, qui partira lui jusqu'a la fin. Alors vous allez me dire, mais si on rajoute des marges volontairement entre ces éléments. La meilleure façon de rajouter des marges, c’est de se dire que toutes les sections qui suivent une section ici, vont avoir tout simplement un margin-left de 3% par exemple. En mettant un margin-left de 3%, forcément les width de 33% ne sont pas inclus dans les box-sizing donc automatiquement il va falloir retirer 3 et 3, 6%, 6% divisé par 3 largeur ça fait 2% donc ici il va falloir passer à 31%. Si on passe à 31%, parfait, on revient nickel, sauf que notre dégradé maintenant ne correspond plus. Il suffit de venir l’adapter c’est-à-dire qu’il faut dire je vais parti de 0 à 31 ici, par contre après la couleur de 31, ne va pas repartir directement sur de la couleur pleine, mais on va repartir sur du transparent, pour dire, ici de 31% jusqu’à 34%, puisqu’on a 3% d’écart entre nos éléments, on va être transparent. Et après de 34% à 34 + 31 ce qui fait 65, on va être orange. Après, on va remettre une couche de transparent juste après, et donc ce transparent va partir de 65 exactement jusqu’à 68, et enfin on recontinuera avec notre lightgrey à partir de 68. Donc on va pouvoir comme ça donner une simulation de colonnes identiques en utilisant simplement une couleur de dégradé. Enfin il éxiste une troisième possibilité, qui va consister à dire que simplement le mode d’affichage de notre élément d’articles va être un tableau, donc une table. De ce fait, les sections vont pouvoir bénéficier de faire un display sous forme de table-cell ici, donc de colonnes cellules de tableau, donc vous voyez qu’automatiquement que le gris s’est mis sur tout le monde, donc c’est parfait je n’ai pas besoin de faire la démonstration, la seule chose c’est que si maintenant on va vouloir jouer à l’intérieur de ces éléments, je vais pouvoir lui dire que si je mets un padding ici de 0 en haut et de 0.6em, on va pouvoir le jouer à l’intérieur du tableau, par contre si je veux écarter les colonnes les unes des autres il va falloir que je vienne sur la propriété border-collapse, lui dire que je suis en separate, donc on a une séparation en plus qui correspond au border-spacing de nos tableaux classiques et là on va pouvoir dire un border-spacing qui lui serait de 1em et 0 sur la partie haute ici. Donc on va pouvoir également venir travailler comme ça sur des hauteurs équivalentes en faisant une mise en page d’un tableau. Bien entendu, si vous avez besoin de venir calculer vos sections ici, vos width, vous pouvez le faire au travers d’un calcul entre les fameux 33% qui serait la séparation classique, moins les fameux 1% des bordeur-spacing, mais là puisqu’on est en mode tableau, on n’a jamais vu une cellule quitter sa rangé et passer à l'extérieur, donc ça sera toujours aligné. Donc voilà au travers de quelques exemples diverses approches qui vont nous permettre de pouvoir obtenir des colonnes qui feront toutes la même hauteur.

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 !