28172 sujets

CSS et mise en forme, CSS3

[Résolu] Justify-content: center qui tiendrait compte de la largeur as

Salutations,

Je suis en train de tester un menu centré avec cette classe :
.justify-content-center {
  justify-content: center !important;
}

Sous ce menu, j’ai un élément de design (trois div) qui font toute la largeur du viewport :
<div class="row coul align-items-start"><div class="col coul-2"></div><div class="col coul-4"></div><div class="col coul-5"></div></div>
(code Bootstrap 5)
.coul div {
  height: 10px;
  top: -16px;
  position: relative;
}

Et le bug visuel, et sur le papier, c’est que le justify-content: center ne tient pas compte de la largeur de l’ascenseur du navigateur alors que les div de design, si. Ce qui a pour effet de ne pas parfaitement centrer tous ces éléments entre eux.

Comment rattraper ça svp ?

Merci.
Modifié par myself (27 Oct 2022 - 19:05)
Modérateur
Salut,

Un petit codepen ou jsfiiddle pour refaire le soucis pourrait grandement nous aider car il manque beaucoup de données. Notamment : "qui font toute la largeur du viewport" cote a cote ? En flex ? En 100vw ou 100% ?
Bon, je n’arrivais pas à reproduire le bug dans mon codepen.

Finalement, j’ai fini par trouver ^^

html {
  width: 100vw;
}


Du coup, mon menu est bien centré par rapport aux div de couleurs dont je parlais.

Merci et bonne journée.
J’ai créé victoire trop tôt ! Je viens de voir que j’ai un élément flottant à droite, donc s’il s’affiche pour moitié hors de l’affichage.

J’ai ce code pour l’instant :
html {
   width: 100vw;       /* BUG du centrage du menu principal par rapport aux div coul- */
  overflow-x: clip;   /* RAJOUT car règle prédédente */
  /*max-width: 100%; */   /* Correction pour le float right */
}


Du coup, width: 100vw n’est pas bon. Je cherche encore une solution.

Merci de toute aide.
J’ai trouvé une bidouille. Si vous avez plus propre, je veux bien.

Mais en attendant j’ai fait :
.coul {
  width: 100vw;       /* BUG du centrage du menu principal par rapport aux div coul- */
  overflow-x: clip;   /* RAJOUT car règle précédente */
}


J’ai ôté le width: 100vw de l’élément html.
Modérateur
Salut,

Alors comme j'ai dis dans mon premier message il manque plein d'infos... ton flottant c'est lequel, c'est quoi son code etc.

Ensuite, une width a 100vw est une mauvaise idée car elle ne prend pas en compte la barre de scroll. Une width a 100% est une meilleure idée mais c'est déjà la taille par défaut des éléments de type block. Il faut donc regarder ailleurs.

Si tu regardes la doc de bootstrap https://getbootstrap.com/docs/5.2/layout/gutters/#row-columns-gutters , apparament la classe row est faite pour être utilisée dans un .container : https://jsfiddle.net/mzs1ju89/

Bootstrap est un outil qui peut être assez puissant du moment qu'on ne cherche pas a faire autre choses que ce pourquoi il est prévu. Et si on l'utilise car nos connaissances sont limitées en CSS, fixer Bootstrap avec du CSS maison est un gros red flag sur l'utilisation qu'on a fait de Bootstrap Smiley lol

Bonne soirée
Meilleure solution
@_laurent : merci de ta patience et didactisme. Je me suis repenchée sur mon problème, et en effet, j’utilisais déjà width: 100vw dans mon #header

J’ai mis un width 100% sur ce header et tout s’agence à présent comme une fleur en supprimant mes bidouilles.

Code propre ok.

Merci et bon week-end.
Sujet clos
Aller à