Bonjour,
Une question qui me taraude depuis longtemps, et à laquelle je reviens car j'ai fait quelques classes de positionnement pour mon framework SCSS personnel :
Comme vous pouvez le voir, je sèche pour l'alignement direct d'un élément. Par direct, j'entends "sans appliquer la classe sur le parent", comme on peut le faire avec text-align.
Je connais le trick qui permet de "sortir" un élément de son parent et de le mettre en full-width :
, mais impossible de reprendre la logique. Car peut importe comment on joue avec les marges et le positionnement, les pourcentages concernent la largeur de l'élément parent (le bloc), et à un moment, il faut bien avoir l'information de la largeur de l'élément enfant avec lequel on joue (une image, etc) pour affiner la marge ou le décalage. Bref, le serpent qui se mord la queue...
Et dire que ça fait 10 ans que je peste pour qu'ils mettent des variables prédéfinies qui récupéreraient la largeur ou hauteur d'un élément pour qu'on puisse jouer avec et régler ce genre de problème :
par exemple, ou des trucs sympas comme une propriété qui calerait un élément à gauche/au centre/à droite relativement à l'élément parent (en le comprenant automatiquement).
Et non, ne me dite pas :
, car pour ça, il faut d'abord mettre un position: absolute; (sans left ni right) sur l'élément parent si mes souvenirs sont bons (pas re-testé là) pour redéfinir la position référente à l'endroit même de l'élément.
Mais je vais pas foutre ça partout, juste pour permettre d'utiliser une classe .left ou .right occasionnellement.
Pareil pour l'histoire de la variable : rien à voir avec SASS, je parle de variables qui seraient in-modifiables par l'utilisateur, mais contiendraient juste des infos.
Ca se mord la queue, j'vous l'dis
. Ca glande sec chez W3C. 
Modifié par CSS-boy (03 Sep 2019 - 15:56)
Une question qui me taraude depuis longtemps, et à laquelle je reviens car j'ai fait quelques classes de positionnement pour mon framework SCSS personnel :
.left {}
.right {}
.center { display: block; margin: auto; }
.alignleft { text-align: left; }
.alignright { text-align: right; }
.aligncenter { text-align: center; }
.justify { text-align: justify; }
.float_left { float: left; }
.float_right { float: right; }
Comme vous pouvez le voir, je sèche pour l'alignement direct d'un élément. Par direct, j'entends "sans appliquer la classe sur le parent", comme on peut le faire avec text-align.
Je connais le trick qui permet de "sortir" un élément de son parent et de le mettre en full-width :
.fullsize_child {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
, mais impossible de reprendre la logique. Car peut importe comment on joue avec les marges et le positionnement, les pourcentages concernent la largeur de l'élément parent (le bloc), et à un moment, il faut bien avoir l'information de la largeur de l'élément enfant avec lequel on joue (une image, etc) pour affiner la marge ou le décalage. Bref, le serpent qui se mord la queue...
Et dire que ça fait 10 ans que je peste pour qu'ils mettent des variables prédéfinies qui récupéreraient la largeur ou hauteur d'un élément pour qu'on puisse jouer avec et régler ce genre de problème :
position: relative; right: 100%; margin-left: -$el_width;
par exemple, ou des trucs sympas comme une propriété qui calerait un élément à gauche/au centre/à droite relativement à l'élément parent (en le comprenant automatiquement).
Et non, ne me dite pas :
.right {position: absolute; right: 0%;}
, car pour ça, il faut d'abord mettre un position: absolute; (sans left ni right) sur l'élément parent si mes souvenirs sont bons (pas re-testé là) pour redéfinir la position référente à l'endroit même de l'élément.
Mais je vais pas foutre ça partout, juste pour permettre d'utiliser une classe .left ou .right occasionnellement.Pareil pour l'histoire de la variable : rien à voir avec SASS, je parle de variables qui seraient in-modifiables par l'utilisateur, mais contiendraient juste des infos.
Ca se mord la queue, j'vous l'dis
. Ca glande sec chez W3C. Modifié par CSS-boy (03 Sep 2019 - 15:56)