28106 sujets

CSS et mise en forme, CSS3

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 :


	.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. Smiley lol 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 Smiley biggol . Ca glande sec chez W3C. Smiley murf
Modifié par CSS-boy (03 Sep 2019 - 15:56)
Bon bah j'ai trouvé ça :

.right { display: block; margin-left: auto; margin-right: 0; }

Ca force à utiliser le mode block, mais ça peut être acceptable vu l'usage occasionnel.
Sujet clos en attendant mieux.