28133 sujets

CSS et mise en forme, CSS3

Bonjour,

J'utilise deux caractères (triangle pointe droite + triangle pointe bas) pour afficher le statut d'une ligne destinée à cacher/montrer un contenu.

La largeur de l'un n'étant pas égale à celle de l'autre, j'aimerais éliminer ce petit décalage :
• Soit en fixant une largeur à ce pdeuso-élément
• Soit en fixant le début du texte à une position déterminée

Après avoir tenté pas mal de solutions, je dois dire que je sèche.

Dans l'idéal, trouver flèches de largeur parfaitement identique serait parfait, mais je n'ai pas trouvé la bibliothèque de caractères idoine.

Si quelqu'un avait une piste, ou un bout de code, je lui en serais très reconnaissant.

Merci d'avance.
ah zut çà ne passe pas ici

donc triangle vers la droite ▶ et triangle vers le bas ▼
en police courier par ex
Modifié par drphilgood (01 May 2023 - 19:29)
Bonjour,

Plutôt que de changer de caractère sur le pseudo-élément au moment du changement d'état (:focus, :hover, :active...), pourquoi ne pas plutôt lui faire effectuer une rotation ?
.ma-classe:hover::after {
  transform: rotate(-90deg);
}

J'utilise cette solution ici par exemple : Details/Summary.
Olivier C a écrit :
Bonjour,

Plutôt que de changer de caractère sur le pseudo-élément au moment du changement d'état (:focus, :hover, :active...), pourquoi ne pas plutôt lui faire effectuer une rotation ?
.ma-classe:hover::after {
  transform: rotate(-90deg);
}

J'utilise cette solution ici par exemple : Details/Summary.


Merci Olivier C, Quelques lectures m'ont enseigné que 'rotate' n'est pas appliqué par certains navigateurs.

Mais supposons l'utilisation du caractère html ▲ et CSS \25b2 que je place (suivi d'un espace) dans la partie du CSS consacrée au contenu fermé


checked~div{display:block}[id^="obxS"]+label:before{content:"\0025b2\000020"}


Ce que je n'ai pas trouvé, c'est à quel endroit dans ce code j'insère la fonction 'rotate (180deg)' permettant de figurer le statut d'ouvert.
Modifié par mango (01 May 2023 - 20:47)
Modérateur
mango a écrit :


Merci Olivier C, Quelques lectures m'ont enseigné que 'rotate' n'est pas appliqué par certains navigateurs.


Bonjour,

Tu parles probablement de la syntaxe
rotate:180deg;

et pas de
transform:rotate(180deg);

Qui pour les deux syntaxes, requièrent de préférence, un display autre que inline pour s'appliquer. Un pseudo par défaut à un display:inline; que tu peut passé à inline-block, permettant aussi de lui donner une taille .

Cdt
gcyrillus a écrit :


Bonjour,

Tu parles probablement de la syntaxe
rotate:180deg;

et pas de
transform:rotate(180deg);

Qui pour les deux syntaxes, requièrent de préférence, un display autre que inline pour s'appliquer. Un pseudo par défaut à un display:inline; que tu peut passé à inline-block, permettant aussi de lui donner une taille .

Cdt


Merci gcyrillus,

En fait je vois des exemple sortis de leur contexte, qui m'éclairent en partie, mais pas tout à fait.

Pour moi, le pseudo élément 'before' ainsi que le texte qui suit (genre 'cliquer ici pour déployer') se trouvent tous les deux dans un même élément 'label' par défaut display 'block'.

Je ne sais donc pas comment agir seulement sur le 'before' pour le faire tourner.

J'avais testé
transform:rotate(180deg);


Mais pas
rotate:180deg;


Et vais voir ce que cela donne
Modifié par mango (01 May 2023 - 21:34)
transform:rotate() fonctionne à partir de Firefox 3.5, Chrome 4, Edge 12, IE 9, Safari 3.1. En terme de soucis de compatibilité il y a pire...

Pour ce qui est de la sélection, j'ai montré un exemple plus haut. À adapter dans votre contexte bien sûr :
label:hover::before

Modifié par Olivier C (01 May 2023 - 22:21)
Olivier C a écrit :
transform:rotate() fonctionne à partir de Firefox 3.5, Chrome 4, Edge 12, IE 9, Safari 3.1. En terme de soucis de compatibilité il y a pire...

Pour ce qui est de la sélection, j'ai montré un exemple plus haut. À adapter dans votre contexte bien sûr :
label:hover::before


Merci Olivier C,

Je crois avoir compris la syntaxe du code 'rotate' mais dans le code ci-dessous, qui fonctionne, je ne vois pas à quel endroit il me faut ajouter fonction et paramètre 'rotate', c'est là où est mon obstacle.

checked~div{display:block}[id^="obxS"]+label:before{content:"\0025b2\000020"}
Modérateur
mango a écrit :


Merci gcyrillus,

...

Je ne sais donc pas comment agir seulement sur le 'before' pour le faire tourner.

J'avais testé
transform:rotate(180deg);


Mais pas
rotate:180deg;


Et vais voir ce que cela donne

rebonjour,

de rien, mais je me suis mal exprimé.

A. rotate:180deg; est celui qui peut poser probléme car pas compris partout.

B. Si ton label est en display:block; son pseudo est lui toujours en ligne par défaut. tu dois au minimum lui donner un display:inline-block; pour qu'une transformation soit applicable. display n'est pas une valeur héritable.

Quelques exemples qui modifient le contexte de formatage des pseudos pour leur appliquer une transformation (il n'y a pas que inline-block Smiley cligne ). https://codepen.io/gc-nomade/pen/GRYMrOM

Cdt
mango a écrit :
Je crois avoir compris la syntaxe du code 'rotate' mais dans le code ci-dessous, qui fonctionne, je ne vois pas à quel endroit il me faut ajouter fonction et paramètre 'rotate', c'est là où est mon obstacle.

Bon, me voilà connecté à un ordinateur, ça va être beaucoup plus simple pour écrire du code... Donc :
checked~div { /* c'est un custom élément ? on est bien d'accord ? parce que si c'est une classe il manque un point... */
  display:block;
}
[id^="obxS"] + label::before { /* les pseudos éléments s'écrivent avec deux fois un double-point */
  content: '\0025b2\000020';
}
[id^="obxS"] + label:focus::before,
[id^="obxS"] + label:hover::before,
[id^="obxS"] + label:active::before {
  transform:rotate(-90deg); /* Et voilà ! */
}

J'ai bien mis -90deg et non 180deg, en raison de l'énoncé de départ :
mango a écrit :
J'utilise deux caractères (triangle pointe droite + triangle pointe bas) pour afficher le statut d'une ligne destinée à cacher/montrer un contenu.

Après, à vous de peaufiner.
Modifié par Olivier C (02 May 2023 - 00:00)
Olivier C a écrit :
Après, à vous de peaufiner.


Merci beaucoup Olivier C pour le temps passé, et le code réécrit.

C'est la passage du pseudo-élément de display par défaut à display inline-block qui a débloqué mon problème. Avec çà je devrais pouvoir me débrouiller.

Dans votre code, que je n'ai pas encore testé, je ne vois pas intervenir de display entre les {} de la définition du pseudo-élément. Ça fonctionnerait donc sans ?
Meilleure solution