28092 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

Bonjour,

gcyrillus a écrit :
tu peut retirer le white-space et mettre le label en display:block , cela sera plus souple.


C'est fait.

gcyrillus a écrit :
Le centrage et l'alignement providentiel vient de : place-items:center; , revoit le codepen avec les exemples de placement pour visualiser les différents effets Smiley cligne ou voit son effet depuis ton codepen en le retirant en passant la souris sur la deuxième liste : https://codepen.io/gc-nomade/pen/rNPMebr.


Très intéressant.

Puisque le diable est dans le détail je signale un problème du grid en auto-fill sur mon codepen.

Tu diminues la taille de la fenêtre : tout va bien.
Fenêtre la plus petite possible, tu augmentes la taille de la police : sous Firefox cela ne marche plus.
Modérateur
boteha_2 a écrit :
Bonjour,
Puisque le diable est dans le détail je signale un problème du grid en auto-fill sur mon codepen.

Tu diminues la taille de la fenêtre : tout va bien.
Fenêtre la plus petite possible, tu augmentes la taille de la police : sous Firefox cela ne marche plus.


Cela me semble normal.
* la grille est normée à minmax(110px, auto) en auto-fill.
Notes:
auto-fit devient similaire à auto-fill au passage sur plusieurs ligne.
word-break: break-word; ou word-break: break-all; limiteraient les dégâts visuels.

* Les image sont aussi normées.
* le texte est initialement court et proche en largeur a celle des des images.

En grossissant uniquement le texte et en perdant la cohérence initiale de la grille/image/textes, la grille devient logiquement trop petite.
word-break resterait un pansement.
En normant eventuellement la taille des colonnes en em et les hauteurs des images aussi en em, l'ensemble devrait pouvoir mieux s'adapter à un zoom du visiteur.

cdt
Modifié par gcyrillus (04 Nov 2023 - 01:00)
Bonjour gcyrillus,

Encore merci de ton suivi.

J'ai essayé word-break, cela semble sans effet.

Actuellement dans le codepen :

ul.e2 > li {word-break: break-all}


J'ai essayé :

ul.e2 {max-width:  100%}


Sans effet, je suppose que tu comprends pourquoi (moi pas trop).

Une solution n'est-elle pas un media-queries pour passer la grille en une colonne dès que la largeur de la fenêtre est inférieure à deux fois la largeur d'une carte (ce qui est facile à calculer) ?

Associé à un media-container ?
Modifié par boteha_2 (04 Nov 2023 - 14:09)
Modérateur
Bonjour,

Pour l'association à un "media container" , il te faut un conteneur parent (j'en ai ajouté un dans le fork de ton codepen) . body aurait tout aussi bien fait l'affaire, mais une media querie classique suffisait)

le word-break etait à mettre sur ul plutôt que li, mais ce n'est qu'un garde fou au résultat aléatoire sans autre précautions prises. Pour si peu de texte, je ne pense pas non plus qu'il soit justifier d'en faire usage.

le max-width , ou overflow n'auront pas d'effet d’amélioration du comportement. Combinés ils peuvent faire défiler la boite, ce n'est probablement pas l'effet recherché.

Voici ton Codepen forké avec un container querie + un grid-template-columns exprimé en em au lieu de px. (je n'ai pas touché aux tailles d'images)

cdt
gcyrillus a écrit :
Voici ton Codepen forké avec un container querie + un grid-template-columns exprimé en em au lieu de px. (je n'ai pas touché aux tailles d'images)


Pardon gcyrillus; quel est l'URL pour voir ce codepen ?
Modifié par boteha_2 (04 Nov 2023 - 16:50)
Bonjour gcyrillus,

Merci beaucoup pour ton code mais cela devient compliqué sans que le résultat ne soit complétement convaincant.

Une petite pierre dans le jardin d'auto-fit et auto-fill il me semble.

Du coup je me demande s'il ne faut pas explorer la piste d'une flexbox comme tu l'as fait dans ton premier codepen.

J'y reviens plus tard.

PS : je n'ai pas trouvé de lien pour les fork sur mon codepen.
Modifié par boteha_2 (04 Nov 2023 - 22:12)
Modérateur
boteha_2 a écrit :
Bonjour gcyrillus,

Merci beaucoup pour ton code mais cela devient compliqué sans que le résultat ne soit complétement convaincant.

Bonjour, excuse moi si je t'ai perdu Smiley smile , il est très probable que je ne saisisse pas non plus ta problématique et le résultat voulu. Je ne t'ai mis que des exemples en liens et suggérer d'utiliser une simple liste, du coup on a fini par polluer ton souci initial.

Si je récapitule ce que j'ai compris, et soucis sue tu as:

- cette liste est un morceau de formulaire.

- alignement des items et de leurs contenus respectifs dans une grille
- grille instable si le texte est trop gros (... ou trop long)
- fluidité de la grille en fonction de l'espace disponible qui lui est attribué.

Ce que je ne sais pas
- de quel espace dispose cette liste, partage t'elle l'espace horizontal ?
- raisons des tailles d'images et des 110px comme base de colonne.

On a vu flex(1d) et grid (2d) avec leur différence.
On a vu quelques exemples d'alignement avec justify-x,align-x et place-x.
Puis évoquer des dimensions en em suite au défaut de taille de polices.

Où faut-il reprendre et quel résultat souhaites tu obtenir en final.

Cdt
Bonjour gcyrillus,

Encore merci de ton suivi.

gcyrillus a écrit :
Ce que je ne sais pas
- de quel espace dispose cette liste, partage t'elle l'espace horizontal ?

C'est une grille responsive.

gcyrillus a écrit :
- raisons des tailles d'images et des 110px comme base de colonne.

C'est un choix parce-que c'est bien équilibré avec cette taille, quelle que soit la largeur de la fenêtre (je ne relance pas la discussion avec Olivier C à propos des dimensions relatives).

En fait dans mon codepen la première ligne à base de 5 listes en inline-grid répond à toutes les contraintes.

Ton code plus simple à base d'une seule liste ne présente qu'un seul défaut : le zoom avant est mal géré sur une petite fenêtre.

Nous sommes des perfectionnistes mais nous avons déjà un code non affreux qui fonctionne.

Si tu vois une solution simple pour le problème du zoom avant (flexbox ?) je suis preneur.

Autrement ne te casse pas la tête.

J'espère que mes explications sont claires.
Modérateur
Dans ce cas, en prenant une liste simple le css qu'il te faudrait à partir de flex serait:
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap:10px;
}

img {
  display: block;
  margin: auto;
}

li {
  min-width: 110px;
  text-align: center;
}

Cela semble similaire a ce qui te convient à la base, on s'est perdu à vouloir trop en faire Smiley cligne https://codepen.io/gc-nomade/pen/dyaNzZO
++
Modifié par gcyrillus (06 Nov 2023 - 20:27)
gcyrillus,

Je viens de regarder ton codepen.

Sauf erreur je retrouve le même problème en cas de zoom avant dans une petite fenêtre...
Modérateur
boteha_2 a écrit :
gcyrillus,
Sauf erreur je retrouve le même problème en cas de zoom avant dans une petite fenêtre...


Peut tu faire un screen shot ? et éventuellement indiquer le(s) navigateur(s).
Modifié par gcyrillus (06 Nov 2023 - 21:40)
upload/1699304131-58253-2023-11-06215424-apenbygc-nom.png

Firefox.

1) Je réduis la fenêtre au minimum.
Tout va bien.

2) Je zoome.
Voir capture.
Modifié par boteha_2 (06 Nov 2023 - 21:57)
Modérateur
Bonjour,

Merci pour le screen, je reste perdu là, car je vois tout le codepen qui débordé et pas seulement la vue. As tu le même défaut avec le code seul dans une page html?
Cdt.
Bonjour gcyrillus,

Bien vu, c'est sûrement le codepen qui fout le bazar.

Je fais le test sur une page html dès que j'ai le temps, sans doute en fin de journée, mais je suis quasi certain que cela marchera aussi bien en GRID qu'en FLEX.

Bonne journée.
Modifié par boteha_2 (07 Nov 2023 - 12:17)
Bonjour,

Je viens de faire le test sur une page html et le problème du zoom avant a disparu en GRD comme en FLEX.

C'est une bonne chose à savoir sur le codepen : en affichage hyper gros le bloc des codes devient plus large que la fenêtre ET le bloc de test prend cette même largeur supérieure à celle de la fenêtre.

Dans mon codepen j'ai entré les codes en GRID et en FLEX.
FLEX devrait être un peu amélioré afin que toutes les lignes de légende soient à la même hauteur.
Existe-t-il un équivalent au magique place-items : center ?

Sur un plan théorique un choix est-il meilleur que l'autre ?
Modifié par boteha_2 (08 Nov 2023 - 21:13)
Modérateur
boteha_2 a écrit :
Bonjour,

...

Dans mon codepen j'ai entré les codes en GRID et en FLEX.
FLEX devrait être un peu amélioré afin que toutes les lignes de légende soient à la même hauteur.
Existe-t-il un équivalent au magique place-items : center ?

Pas besoin d'équivalent , il suffit d'en faire usage :

ul.f1 {
  display: flex;
  flex-wrap: wrap;
  place-items:center;
  gap:20px;/* même valeur que pour le grid, pour un test au plus proche */
}

boteha_2 a écrit :

Sur un plan théorique un choix est-il meilleur que l'autre ?


Cela dépend seulement du type de grille que tu veut,
* grid construit une grille en 2d puis va placer les éléments dedans. Tu maitrise le nombre d’élément par ligne/colonne et les dimensions de chaque cellules( ligne/colonne). La grille est définie à partir du conteneur.
* flex construit la grille au fil de l'eau en 1d. Ce sont les enfants qui construisent une nouvelle cellule. Chaque ligne (ou colonne) sont indépendantes.

Je dirais que flex est ... plus flexible Smiley smile et que grid plus rigide, demande un minimum de réglage ...

cdt
Modifié par gcyrillus (09 Nov 2023 - 07:44)
Bonjour gcyrillus,

Bon là je crois que l'on approche du but.

Je pense choisir GRID en production, j'ai entendu dire que cela consomme moins de ressources que FLEX.

Sauf problème inattendu je reviens bientôt pour cocher Résolu.

Encore MERCI.