[Résolu] Alignement de liste

Bonjour,

J'ai une page avec une liste d'amis très simple, avec un lien pour ouvrir le profil de l'ami, et une petite icône pour le supprimer. La liste peut contenir de 1 à 200 éléments.

J'aimerais que les petites icônes pour supprimer soient alignées les unes en-dessous des autres, à proximité raisonnable du texte, et je n'y arrive pas.

Je peux modifier le HTML comme je veux, mais l'objectif est si possible de ne pas complexifier le balisage inutilement.
L'objectif n'est pas non plus de spécifier une taille en dur genre 120px, ni même 30em. La longueur des pseudos peut être plus ou moins imprévisible.
Je ne veux pas non plus de <table>.

<ul class="menuList flexV">
<li><a href="...">Alice</a>
<div class="flexH">
[<a href="..."><span class="visually-hidden">Supprimer Alice</span><span aria-hidden="true">&#x1F5F4;</span></a>
</div>
</li>
<li><a href="...">Bob</a>
<div class="flexH">
[<a href="..."><span class="visually-hidden">Supprimer Bob</span><span aria-hidden="true">&#x1F5F4;</span></a>
</div>
</li>
</ul>

.menuList {
list-style-type: none;
}

.flexV {
display: flex;
flex-flow: column wrap;
}

.flexH {
display: flex;
flex-flow: row wrap;
}

JE pensais que le flex layout faisait que la taille horizontale était définie par le plus long élément (le plus long pseudo donc). Mais visiblement pas !
Je ne dois pas avoir compris le concept.

J'ai le sentiment que c'est solvable avec display: grid; mais je ne pige pas comment, sans déclarer le nombre de lignes et de colonnes à l'avance avec leur taille.
Oui parce qu'à terme, il y aura sûrement plusieurs actions possibles: envoyer un message, inviter à une partie...

Si on peut afficher la liste en 2, 3 ou 4 colonnes quand il y en a beaucoup et qu'on a de la place horizontalement (et pas sur téléphone), ce serait du bonus, mais pas indispensable.

Merci pour votre aide !
Modifié par QuentinC (30 Jan 2024 - 22:59)

Hello,

Ce n'est pas des images, mais des caractères unicode. Ici le & # x1F5F4. Ce n'est peut-être pas le meilleur choix pour cette utilisation, mais quoi qu'il en soit, il se trouve que le forum me les a sucrés dans le code. Je ne sais pas pourquoi ni comment corriger autrement qu'en ajoutant des espaces inutiles.

JE n'ai pas plus de code HTML à montrer que ça en fait. J'ai d'autres petites questions du même genre en réserve mais elles n'ont rien à voir avec celle-ci.
A savoir que je suis non-voyant, et que j'ai volontairement choisi de rester simple pour garantir l'accessibilité. C'est un peu ma marque de fabrique. Je fais tout le contraire du reste du monde !
JE cherche juste à améliorer un peu l'aspect visuel de mon jeu pour ceux qui ont leurs yeux, là où je peux sans que ça ne soit pas trop compliqué.

Merci.

Alors, j'ai fait une première version de ce qu'il me semblait être ta demande, mais je ne trouvais pas le résultat final très glorieux car du coup il n'occupait pas tout l'espace disponible.

Donc j'ai fait ça : CodePen.

.friends-list {
  :has(> &) {
    container: friendslist / inline-size;
    width: 100%; /* @note Important si le conteneur n'a pas de largeur définie par défaut. */
  }
  --n: 1;
  @container friendslist (40em < width) {
    --n: 2;
  }
  @container friendslist (60em < width) {
    --n: 3;
  }
  @container friendslist (80em < width) {
    --n: 4;
  }
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(max-content, 1fr)); /* Voici la principale règle impliquée */
  gap: .5em;
  padding-inline-start: 0;
  & a {
    color: #ddd;
    text-decoration: none;
  }
  & li {
    display: flex;
    padding: .5em 1em;
    background-color: #444;
    &:where(:focus,:hover,:active) {
      background-color: #666;
    }
    & :first-child {
      flex-grow: 1; /* une autre règle importante est ici, le pseudo prend tout l'espace disponible */
    }
    & :last-child {
      margin-inline-start: .5em;
      color: orange;
      &:where(:focus,:hover,:active) {
        color: white;
      }
    }
  }
}

/* for demo : */

.visually-hidden { /* Comme je sais à qui j'ai affaire je te mets ma propre solution ".sr-only", tu m'en diras des nouvelles... */
  position: absolute;
  transform: scale(0);
}

body {
  margin: 2em 5em;
  font-family: system-ui, sans-serif;
  background-color: #333;
}

La structure du HTML retenue :

<ul class="friends-list">
  <li>
    <a href="#">QuentinC</a>
    <a href="#"><span class="visually-hidden">Supprimer QuentinC</span><span aria-hidden="true">x</span></a>
  </li>
  <li>
    <a href="#">Olivier C</a>
    <a href="#"><span class="visually-hidden">Supprimer Olivier C</span><span aria-hidden="true">x</span></a>
  </li>
  <!-- etc. -->
</ul>

Alors du coup les Container Queries gomment beaucoup de l'aspect du pseudo long qui impose sa loi.. mais pourtant cela reste le cas. J'ai mis `minmax(max-content, 1fr)`mais tu peux aussi mettre "auto" à la place de "1fr", ce serait peut-être plus proche de ce que tu cherches à faire.
Modifié par Olivier C (01 Feb 2024 - 09:50)

Bonsoir,

J'ai compris différemment et interprété librement

La première chose que j'ai compris, c'est un affichage souhaité colonne par colonne.
Pour passer d'une colonne à une autre, il faut une hauteur , on peut décider d'une hauteur maximale. Pour l'exemple je prend 75vh.

J'utilise grid, pour une approche différente aussi, du coup le nombre de colonnes peut varier en fonction du nombre d'item et de l'espace disponible, alors un overflow deviens nécessaire.

Voici l'idée : https://codepen.io/gc-nomade/pen/NWJYxXP -avec un compteur CSS pour visualiser le sens d'affichage des items , les uns au dessus des autres, puis dans la colonne suivante.

Le CSS peut être simplifier en utilisant les colonnes CSS (column-width:xxx;) et une hauteur maximale au conteneur, mais chaque colonne aura la largeur fixée dans le CSS. Grid permet, en principe, des largeurs flexibles qui s'adaptent au contenus.

Le code CSS proposé mérite d'être optimisé, la c'est juste unPOC mis à la critique.

cdt

Salut gcyrillus,

Si si, t'as raison ça doit être ça. Dans un premier mouvement j'avais bien pensé au colonnes moi aussi, mais je n'avais pas voulu imposer une hauteur.
Modifié par Olivier C (01 Feb 2024 - 04:53)

Bonjour,

Merci. JE vais analyser vos codes pour voir si ça fait ce que je voudrais.

Olivier, par contre après juste une lecture très rapide, il y a plein de trucs que je ne pige pas dans ton code, mes connaissances CSS date d'avant guerre: des blocs imbriqués, &, container, @container, --n1. IL faut que je décortique le machin.

Pour rappel, je n'utilise aucun framework, pas de react, pas d'angular, pas de bootstrap, rien, nada, est-ce que ça va fonctionner ?
Même en php et en JavaScript je suis 100% pur.
C'est un projet perso où je ne vends rien, et donc où je n'ai pas besoin de m'embarrasser de ça.

Merci.
Modifié par QuentinC (01 Feb 2024 - 06:47)

Bonjour,

2023 a été bien riche en nouveautés CSS avec en plus les @scope, les @layer . Fontes j'ai pas suivi mais aussi.

L'imbrication (nesting) est depuis très récemment native en CSS. C'est pas pour ça qu'il faut en abuser ou même l'utiliser mais en tout cas c'est supporté. "Baseline 2023" d'après MDN car Safari 17.2 et à peine plus ancien dans Blink et Firefox : support très récent.

:has() le sélecteur parent (c'est bon mangez-en), support également Baseline 2023. Firefox est le dernier à le supporter, ça fait 6 mois je crois. Il était avant cela bogué, derrière un flag et à moitié implémenté mais maintenant c'est bon

Mmh la 1ère règle, c'est équivalent à *:has(> .laclasse) ou je rate un truc ?

Pour ce qui est de la propriété raccourcie container et de la règle-at @container, ce sont les CSS Container Queries. C'est l'équivalent des Media Queries mais pour un élément et pas le viewport.
Support : encore Baseline 2023 mais plutôt début d'année dernière.
Pour caricaturer, tu lâches un composant dans une page et peux le styler en fonction de sa largeur à lui, de sa hauteur et bientôt des styles qui lui sont appliqués.
Ici Olivier crée un conteneur appelé friendslist qui prendra en compte la largeur de l'élément (pas sa hauteur, ce serait size au lieu d'inline-size). Avec @container, tu peux écrire des "Si l'élément est plus large que 40rem alors je style ses descendants comme ci ou comme ça". Attention cela crée un "containment context" (les mêmes surprises parfois que Block Formatting Context, Transform context, etc) et tu ne peux pas styler le container lui-même (ça créerait des références circulaires).

Merci à Felipe de m'avoir épargné toutes les explications sur mon code

Felipe a écrit :
Mmh la 1ère règle, c'est équivalent à *:has(> .laclasse) ou je rate un truc ?

C'est exactement ça. Et ici ça m'évite de devoir définir le contexte du conteneur en dehors de la classe elle-même. Avec pour objectif de rester dans un codage orienté composant.
Modifié par Olivier C (01 Feb 2024 - 10:33)

Bonjour,

gcyrillus a écrit :
Voici l'idée : https://codepen.io/gc-nomade/pen/NWJYxXP -avec un compteur CSS pour visualiser le sens d'affichage des items , les uns au dessus des autres, puis dans la colonne suivante.

Il me semble qu'on ne peut pas utiliser :

grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));

Il faut une taille "fixe" à la place du max-content dans le minmax. C'est bien dommage d'ailleurs, et si quelqu'un arrive à faire l'effet souhaité d'une autre manière, je suis preneur, ayant buté assez longuement sur ce problème pas plus tard que le mois dernier.

Voir https://developer.mozilla.org/en-US/docs/Web/CSS/repeat et en particulier le paragraphe "If you use auto-fill or auto-fit to set the repeat count, you may only specify track sizes using the <fixed-size> type, not the <track-size> type."

On constate d'ailleurs que si on retire cette ligne de l'exemple du codepen ci-dessus, bah ça change rien !

À confirmer quand même car "c'est compliqué" comme disent les entraineurs de foot !

EDIT: et évidemment, cette ligne serait la clé de voute d'une solution idéale si elle fonctionnait.

Amicalement,
Modifié par parsimonhi (01 Feb 2024 - 16:32)

Hello,

Voici une alternative en utilisant la propiété columns de CSS.

Une autre solution qui implique un autre visuel serait de ne pas se contraindre avec des columns, mais simplement de faire suivre les éléments un à un.

@Yordi Si j'ai bien compris l'idée était que les items d'une colonne puissent s'aligner sur le pseudo le plus long. Faire des colonnes de largeurs égales ne posait pas particulièrement problème à Quentin je pense, d'où sa question.

Ok pardon, pas bien lu.

Par contre, ce ne serait pas un faux problème ? Le design est assez important, mais je pense que si il amène trop de contrainte, c'est que ce n'est pas le bon design.

Si on choisi d'afficher les noms en entiers sans les cropper:
- soit on est d'accord de perdre de la place dans 99% des "cellules" car un élément est très long
- on est d'accord d'avoir des colonnes qui ne sont pas de la même largeur (certaines personnes vont être malade de voir des misalignment ), et on aura quand même des colonnes ± remplies
- que ce soit passe-t-il quand même si en réduisant la fenêtre, le nom de mon ami est plus large que la fenêtre, on passe en multi-line/scroll ?

Perso, je favorise le fait de faire suivre les uns après les autres et laissé le flow se créer. Si ce n'est pas assez structuré, alors je tranche en donnant des colonnes fixes (type masonry si multi-line / line-clamp si une seule ligne).


PS : Merci, @QuentinC, pour les commentaires d'accessibilité que tu laisses partout sur le web (entre autre stackoverflow), je suis tombé sur quelques-uns qui m'ont été très utiles.

Bonjour,

Si on ne met qu'un li par ligne, et qu'on souhaite que la largeur de l'ensemble soit limitée à la largeur du plus grand élément de la liste (le besoin initial de QuentinC), alors une grid avec un simple grid-template-columns: max-content; comme le suggérait Olivier C fait l'affaire.

Exemple :

ul {
  margin: .5rem;
  padding: 0;
  display: grid;
  grid-template-columns: max-content;
}

li {
  position: relative;
  display: flex;
  gap: 1rem;
  margin: 0 0 .5rem 0;
  padding: .5rem;
  background: #eee;
}

li > a {
  flex: 1;
}

.visually-hidden {
  position: absolute;
  width: 0;
  overflow: hidden;
}

Si l'on veut passer en multi-colonne quand on a assez de place pour le faire, par contre, ça ne me semble pas faisable de pouvoir s'adapter au max-content des li (c'est le problème quelque soit le css qu'on utilise me semble-t-il et j'espère encore découvrir un jour m'être trompé sur ce point). Il faut donner une largeur maximum aux colonnes. Et dans ce cas, la solution de yordi avec les columns couplées avec l'utilisation d'un text-overflow: ellipsis; pour les pseudos me semble pas mal. On n'a par contre pas besoin de media queries pour afficher plusieurs colonnes en fonction de l'espace disponible. Il suffit d'utiliser auto pour spécifier le nombre de colonnes.

Exemple (avec des colonnes limitées à 10rem en largeur) :

ul {
  margin: .5rem;
  padding: 0;
  columns: 10rem auto;
}

li {
  position: relative;
  display: flex;
  gap: 1rem;
  margin: 0 0 .5rem 0;
  padding: .5rem;
  background: #eee;
}

li > a {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visually-hidden {
  position: absolute;
  width: 0;
  overflow: hidden;
}

Éventuellement, on peut calculer la largeur maxi avec quelques lignes de javascript. Dans ce cas, on peut partir d'un css où on ne spécifie pas la largeur des colonnes et où on donne aux li un max-width: max-content. Il suffit ensuite de faire une boucle sur les li, obtenir la largeur maxi, ajouter un width: 100% aux li, et modifier le columns de l'ul en y ajoutant la largeur maxi calculée.

Exemple :

ul {
  margin: .5rem;
  padding: 0;
  columns: auto;
}

li {
  box-sizing: border-box;
  position: relative;
  display: flex;
  gap: 1rem;
  margin: 0 0 .5rem 0;
  padding: .5rem;
  background: #eee;
  max-width: max-content;
}

li > a {
  flex: 1;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 0;
  overflow: hidden;
}

let ul = document.querySelector(".menuList"),
  w = 0;
for (let k = 0; k < ul.children.length; k++) {
  w = Math.max(w, ul.children[k].offsetWidth);
  ul.children[k].style.minWidth = "100%";
}
ul.style.columns = w + "px  auto";

On aura cependant avec cette solution toutes les colonnes de même largeur. Si on voulait que chaque colonne s'ajuste en largeur au li le plus large qu'elle contient à un instant donné, le code serait sensiblement plus complexe et sans doute consommateur de ressources pour pas grand chose en fin de compte, le résultat n'étant pas si génial que ça visuellement selon moi.

Amicalement,
Modifié par parsimonhi (02 Feb 2024 - 18:37)

Bonjour,

En s'inspirant du code de Xirillus, j'arrive à aligner les icônes de suppression, mais seulement si je fixe le nombre de colonnes en dur.

Mon code HTML est maintenant:

<ul class="gridParent">
<li class="gridItem">
<a href="#">pseudo</a>
< href="#">icône</a>
</li><li class="gridItem">
<a href="#">pseudo</a>
< href="#">icône</a>
</li><li class="gridItem">
<a href="#">pseudo</a>
< href="#">icône</a>
</li>
</ul>

Je me suis débarrassé des div qui ne sont pas vraiment utiles.

Et en CSS j'ai essayé ça:

.gridParent {
display: grid;
grid-template-columns: repeat(5, max-content max-content);
grid-gap: 0.5em;
}

.gridItem {
display: contents;
}

Par contre:

* Si à la place de 5 je mets auto-fill, chaque élément passe à la ligne (donc l'icône de suppression se trouve tout à gauche, en-dessous du pseudo). Pareil avec auto-fit.
* Si je mets grid-auto-flow: column; comme dans vos exemples, tout se met sur la même ligne, et ce même si je mets max-width et/ou max-height.
* Ca m'oblige à ajouter des spans vides ou de "griser" les actions qui ne sont pas utilisables sur un pseudo donné, pour garder le nombre de colonnes cohérent; mais c'est pas forcément un mal, ou bien c'est peut-être un moindre mal.

Par contre je me rends compte d'un autre problème. il faut que les icônes d'actions soient alignées sur la droite de chaque pseudo, mais il ne faut pas non plus qu'elles soient trop près de la colonne suivante.
IL faut que ça reste clair quelle icône agit sur qui... si vous voyez ce que je veux dire.
Est-ce qu'on peut définir un grid-gap différent pour chaque colonne ? j'ai voulu essayer grid-column-gap: repeat(5, 0.5em 1em); mais ça ne marche pas.
Sinon, est-ce qu'on peut ajouter une colonnes vides sans ajouter de span vide dans le code HTML ? Ca serait quand même bête de devoir faire ça

Après, bon, si c'est vraiment trop compliqué, je retournerai au bon vieux <table>. Ca a au moins le mérite d'être une valeur sûre, même si c'est un peu lourd.

a écrit :
@Yordi Si j'ai bien compris l'idée était que les items d'une colonne puissent s'aligner sur le pseudo le plus long. Faire des colonnes de largeurs égales ne posait pas particulièrement problème à Quentin je pense, d'où sa question.

Ce serait bien, mais ce n'est effectivement pas nécessaire. C'est déjà assez compliqué comme ça.

a écrit :
Si on choisi d'afficher les noms en entiers sans les cropper:
- soit on est d'accord de perdre de la place dans 99% des "cellules" car un élément est très long
- on est d'accord d'avoir des colonnes qui ne sont pas de la même largeur (certaines personnes vont être malade de voir des misalignment Smiley biggrin ), et on aura quand même des colonnes ± remplies
- que ce soit passe-t-il quand même si en réduisant la fenêtre, le nom de mon ami est plus large que la fenêtre, on passe en multi-line/scroll ?

Je suis d'accord de perdre de la place s'il y a des longs pseudos. Le but est d'avoir les choses qui vont ensemble... ensemble. Mon passé de malvoyant me dit que les trucs trop compactés, c'est pas forcément très bien non plus.

Après, pas besoin d'aller chipoter aussi loin. Mon site a de bien plus gros problèmes de design, de façon générale. ET son concept de base fait qu'il ne pourra probablement jamais être vraiment visuellement attrayant. C'est pas grave, c'est pas l'objectif.
C'est un projet perso, certes qui dure depuis 13 ans, mais je ne vends rien.

Par contre si un expert en CSS a de bonnes idées pour améliorer l'aspect visuel de mon jeu sans devoir révolutionner le concept général, je prends volontiers.

Bonjour,

QuentinC a écrit :
En s'inspirant du code de Xirillus, j'arrive à aligner les icônes de suppression, mais seulement si je fixe le nombre de colonnes en dur.

QuentinC a écrit :
Après, bon, si c'est vraiment trop compliqué, je retournerai au bon vieux <table>. Ca a au moins le mérite d'être une valeur sûre, même si c'est un peu lourd.

Une <table> t'oblige elle-aussi à fixer le nombre de colonnes en dur (mais dans le html au lieu du css). Ça revient donc au même.

Un exemple avec 5 colonnes avec ton nouveau HTML qui simplifie pas mal les choses :

ul.gridParent {
  margin: .5rem;
  padding: 0;
  display: grid;
  grid-gap: .5rem;
  grid-template-columns: repeat(5,1fr);
}

li.gridItem {
  position: relative;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: .5rem;
  background: #eee;
}

li.gridItem > a:first-of-type {
  flex: 1;
}

À la place de :

ul.gridParent {grid-template-columns: repeat(5,1fr);}

tu peux aussi, si tu as une idée acceptable de la largeur d'une colonne (par exemple 10rem), mettre quelque chose comme 

ul.gridParent {grid-template-columns: repeat(auto-fit,minmax(10rem,1fr));}

En d'autres termes, soit tu as une idée du nombre de colonnes, soit tu as une idée de la largeur d'une colonne. Et ça te permet ensuite de déterminer la valeur de la propriété de grid-template-columns.

QuentinC a écrit :
Par contre je me rends compte d'un autre problème. il faut que les icônes d'actions soient alignées sur la droite de chaque pseudo, mais il ne faut pas non plus qu'elles soient trop près de la colonne suivante.

Les éléments de la grid sont les li. Ce qu'il y a à l'intérieur des li ne sont pas des éléments directs de la grid.

Si tu mets un display:flex sur les li comme dans l'exemple que je viens de donner, tu peux ensuite ajouter un margin individuellement à chaque élément contenu dans les li (qui sont des balises <a> dans ton dernier html).

Par exemple, si tu veux styler le lien contenant l'icône en lui-mettant une marge à droite de 1rem :

li.gridItem > a:last-of-type {margin-right: 1rem;}

QuentinC a écrit :
Par contre si un expert en CSS a de bonnes idées pour améliorer l'aspect visuel de mon jeu sans devoir révolutionner le concept général, je prends volontiers.

Tu aurais un lien à nous fournir ?

Amicalement,

Yordi a écrit :
PS : Merci, @QuentinC, pour les commentaires d'accessibilité que tu laisses partout sur le web (entre autre stackoverflow), je suis tombé sur quelques-uns qui m'ont été très utiles.

Idem pour moi, sur Stackoverflow, mais aussi sur Zest de Savoir...

a écrit :

Une <table> t'oblige elle-aussi à fixer le nombre de colonnes en dur (mais dans le html au lieu du css). Ça revient donc au même.

C'est juste ! Sauf que ça ne revient pas au même, c'est pire, en fait...

Entre temps j'ai essayé aussi ta solution multicolumn. C'est presque plus simple. En tout cas c'est plus simple à comprendre pour moi.

A quoi sert le position: relative; par contre ? Je n'ai pas l'impression qu'il est nécessaire ?
Avec ce code ça a l'air de pas trop mal marcher:

<ul class="gridParent">
<li class="gridRow">
<a class="flexGrow">...</a>
<a class="flexNoGrow">...</a>
</li>
</ul>

.gridParent {
columns: 30em auto;
column-gap: 1em;
column-fill: balance;
}

.gridRow {
display: flex;
}

.flexGrow {
flex: 1;
}

.flexNoGrow {
flex: 0;
}

Ca m'ennuie un peu de devoir mettre le 30em en taille explicite, mais c'est comme tu l'as dit, soit je dois choisir une taille, soit je dois choisir le nombre de colonnes, et je suis aussi plus ou moins obligé de le faire si j'utilise une grille. J'ai déterminé le 30em plus ou moins empyriquement, c'est peut-être un peu extrême.
Je devrais pouvoir descendre à 20em, la plupart des pseudos sont quand même assez courts.

Au passage, text-overflow: ellipsis; n'a apparament aucune incidence sur ce que lit le lecteur d'écran, c'est plutôt une bonne nouvelle.

J'hésite encore, mais le multicolumn me parait pas mal du tout.

a écrit :
PS : Merci, @QuentinC, pour les commentaires d'accessibilité que tu laisses partout sur le web (entre autre stackoverflow), je suis tombé sur quelques-uns qui m'ont été très utiles.

a écrit :
Idem pour moi, sur Stackoverflow, mais aussi sur Zest de Savoir...

Merci, avec plaisir !
J'ai la chance d'être à la fois directement concerné et capable d'aider, alors ça me semble important de le faire. J'en bénéficie directement par la suite.

a écrit :
Tu aurais un lien à nous fournir ?

Bien sûr !
Le site officiel est http://qcsalon.net/
JE vous préviens, si vous avez les yeux qui saignent, c'est peut-être normal... j'essaie justement de faire en sorte qu'ils saignent un peu moins.

Mais par contre la version bêta légèrement améliorée et un peu moins inutilisable sur laquelle je travaille est sous mot de passe .htaccess général, donc je ne peux la donner que par MP.

parsimonhi a écrit :
Une <table> t'oblige elle-aussi à fixer le nombre de colonnes en dur (mais dans le html au lieu du css). Ça revient donc au même.

QuentinC a écrit :
C'est juste ! Sauf que ça ne revient pas au même, c'est pire, en fait...

Je n'avais pas osé l'écrire !

QuentinC a écrit :
A quoi sert le position: relative; par contre ? Je n'ai pas l'impression qu'il est nécessaire ?

Je l'avais mis à un moment pour m'assurer que le contenu caché (qui était en position: absolute) reste près de l'icône. S'il n'y a plus du tout de contenu caché, ça ne sert vraiment plus à rien.

QuentinC a écrit :
Avec ce code ça a l'air de pas trop mal marcher...

C'est l'idée. Tu peux aussi utiliser display: grid au lieu de columns d'une manière quasi aussi simple (voir ma dernière proposition d'hier).

QuentinC a écrit :
Ça m'ennuie un peu de devoir mettre le 30em en taille explicite

C'est clair que c'est ennuyant. Tu peux mettre 20em dans ton css au chargement de la page et éventuellement calculer par javascript une meilleure valeur à la volée une fois la page chargée. De toute façon tu as une grosse quantité de scripts dans ta page. Quelques lignes de plus ne changeront pas grand chose à l'affaire. Ceci étant, faire du javascript juste pour ça consternera avec raison les puristes. Tu peux aussi éventuellement creuser l'idée des containers queries (Olivier C en avait donné un exemple un peu plus haut).

QuentinC a écrit :
Le site officiel est http://qcsalon.net/

Voilà qui est extrêmement intéressant. N'étant que peu familier des lecteurs d'écran, je me demande régulièrement de quel genre de commandes on peut disposer quand on est en navigation clavier sans que ce soit la catastrophe par ailleurs. Ton site permet d'avoir des exemples de ce qui marche en de multiples circonstances, et aussi montre de quelle manière on peut fournir les indications à l'internaute. Super !

Amicalement,
Modifié par parsimonhi (03 Feb 2024 - 02:47)