Discussion :

[jd_83]

Bonjour à tous,

Désolé si cette discussion ramène au b-a-ba du css (ou du html).

Je butte sur un problème apparemment très simple :
Je voudrais disposer 2 éléments côte à côte :
- celui de gauche contenant uniquement du texte,
- celui de droite contenant entre autre une image.
de sorte que :

1. l'ensemble occupe 100% de la largeur d'un conteneur,
2. l'élément de gauche occupe toute la largeur disponible,
3. mais sans renvoyer l'élément de droite à la ligne, ce qui se produit si je ne limite pas la largeur de l'élément de gauche.

L'emploi de max-width pour l'élément de gauche étant contradictoire avec les points 1 et 2.

Merci pour le coup de pouce.

[darkstar123456]

Bonjour,

Le plus simple est d'utiliser Flexbox. (Un petit guide rapide ici : https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

Voici un exemple que j'ai réalisé : il y a 2 fois exactement le même contenu, le même code HTML mais 2 images de tailles différentes
https://codepen.io/DarkStar123456/pen/NWgzVJB

Par facilité, j'ai utilisé les classes utilisées par Bootstrap
A savoir .col pour prendre un max de largeur, et .col-auto pour prendre la taille minimum (à savoir définie par le contenu)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.row {
  margin-left: -15px;
  margin-right: -15px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
 
.row > .col, 
.row > [class*=col-] {
  padding-left: 15px;
  padding-right: 15px;
}
 
.col {
    flex: 1 0 0%;
}
 
.col-auto {
    flex: 0 0 auto;
    width: auto;
}

EDIT : Par contre, le sujet parle de "cellules d'un tableau" alors que dans la description, ça n'y ressemble pas du tout ^^

[jd_83]

Excellent ; un outil puissant que je maîtrise encore bien mal !

EDIT : Par contre, le sujet parle de "cellules d'un tableau" alors que dans la description, ça n'y ressemble pas du tout ^^

Ça vient de ce que j'avais à l'origine essayé de résoudre le problème en utilisant les bons vieux tableaux html. Mais je peux changer le titre.

Pour le flexgrid, je me suis limité au minimum :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
}
.col {
    flex: 1 0 0%;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
}

J'obtiens bien l'effet voulu.

Sauf que, systématiquement, il se produit une sorte de padding dans le "col-auto" :

(l'image n'atteint pas le bord de son conteneur), qui ne s'explique par aucune propriété (aucun changement si je supprime width: 100%).

J'imagine qu'il est difficile de débugger l'ensemble, mais au cas où tu aurais une idée...

En te remerciant.

[darkstar123456]

Bonjour,

Difficile de dire ce qui ne va pas comme ça.
Mais ce qui est sur, c'est que si l'image n'est pas en width: 100%; ça veut donc dire qu'elle est en width: auto;.
Cela signifie qu'elle aura, au maximum, sa taille à elle et non celle du bloc parent

N'hésite pas à faire un exemple rapide dans Codepen et/ou à montrer précisément la CSS

D'ailleurs, même problème pour le problème sur le screenshot : impossible à dire comme ça d'autant qu'on voit bien la flexbox (en pointillés)
Et vu que le gap est en bleu, j'aurais tendance à penser qu'il s'agit d'un margin-right sur le contenu de la colonne de gauche

[jd_83]

Merci pour ton attention.

Voici le codepen.

Je pensais qu'en élaguant un peu mon code, le pb allait disparaître, mais pas du tout (bande jaune) !


C'est aussi bien, j'aurai ton avis et j'apprendrai d'avantage que si je bricole ici ou là et que j'arrive par hasard à la solution.

[darkstar123456]

Hello,

ATTENTION, ça ne va pas du tout ce que je vois.
Y'a du float qui est mêlé à Flexbox !! Je dois avouer que je ne sais même pas ce que ça donne si on fait ça mais il faut éviter, ce sont 2 méthodes de positionnement complètement différentes.

En plus de ça, tu mets des valeur width et height un peu partout alors que je pensais que le but justement était que tout soit fait automatiquement !!

Sinon pour le problème final, c'est aussi qu'il ne faut pas oublier que tous les navigateurs viennent avec leur propre CSS par défaut.
Il faut donc écraser cette CSS si on ne souhaite pas avoir de soucis. C'est ce qu'on appelle souvent reset.css.

Je te propose en tout cas de passer par des frameworks CSS qui permettent non seulement d'écraser la CSS par défaut des navigateurs mais offrent également plein d'outils pour développer plus facilement et rapidement un site.
Un des plus connus et utilisé est Bootstrap, disponible ici : https://getbootstrap.com/
Et pour la grille "auto" (ce qui va t'intéresser ici), la doc est dispo ici : https://getbootstrap.com/docs/5.1/fo...t/#auto-sizing

En l'occurrence, le problème de l'image (une fois avoir retiré tous les floats et les width/height), c'est donc la CSS de Chrome (dans mon cas) qui écrit ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
figure {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

Voici le correctif en mettant juste : figure { margin: 0; }.
https://codepen.io/DarkStar123456/pen/PojBvNN

[jd_83]

ATTENTION, ça ne va pas du tout ce que je vois.
Y'a du float qui est mêlé à Flexbox !! Je dois avouer que je ne sais même pas ce que ça donne si on fait ça mais il faut éviter, ce sont 2 méthodes de positionnement complètement différentes.
En plus de ça, tu mets des valeur width et height un peu partout alors que je pensais que le but justement était que tout soit fait automatiquement !!

En effet : scories de l'ancien processus. Ça ira toujours mieux sans.

Sinon pour le problème final, c'est aussi qu'il ne faut pas oublier que tous les navigateurs viennent avec leur propre CSS par défaut.
Il faut donc écraser cette CSS si on ne souhaite pas avoir de soucis. C'est ce qu'on appelle souvent reset.css.

Je te propose en tout cas de passer par des frameworks CSS qui permettent non seulement d'écraser la CSS par défaut des navigateurs mais offrent également plein d'outils pour développer plus facilement et rapidement un site.
Un des plus connus et utilisé est Bootstrap, disponible ici : https://getbootstrap.com/
Et pour la grille "auto" (ce qui va t'intéresser ici), la doc est dispo ici : https://getbootstrap.com/docs/5.1/fo...t/#auto-sizing

En l'occurrence, le problème de l'image (une fois avoir retiré tous les floats et les width/height), c'est donc la CSS de Chrome (dans mon cas) qui écrit ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
figure {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

Voici le correctif en mettant juste : figure { margin: 0; }.
https://codepen.io/DarkStar123456/pen/PojBvNN

Le problème urgent est résolu ; j'ai à présent la maîtrise de mes marges.

Je vais maintenant m'intéresser de près à Bootstrap. Merci de m'y inciter.

Une dernière question, qui devrait peut-être faire l'objet d'une nouvelle discussion :
Le problème est un peu le même, mais cette fois j'ai une grille (j'évite d'utiliser le mot tableau) 1 colonne * 2 lignes ; la première avec du texte, l'autre avec une image ; flexgrid permet-il d'ajuster automatiquement la largeur de la grille (de sa 1ère ligne surtout) sur celle de l'image, sans utiliser getImageSize() ?
Utile par exemple justement quand on a une figure et sa légende, un peu longue.

Merci encore.

[darkstar123456]

Bonjour,

Je pense qu'il y a erreur dans la description car un contenu sur 2 lignes n'a même pas besoin de CSS, il suffit de mettre chaque ligne dans un <div /> ^^
Et dans le comportement naturel, le texte ne pourra pas dépasser de sa colonne.

Je pense qu'il faudrait mieux d'abord commencer par se pencher sur la doc Bootstrap et surtout sur le concept de grille.
En effet, si tout est de largeur "auto" il n'est pas possible de dire à un bloc de ne pas dépasser une largeur. En effet, la largeur étant "auto" elle va continuer à s'agrandir. Dans un premier temps en passant à la ligne (si on a 2 colonnes comme dans l'exemple avec le texte) et puis finalement jusqu'aux limites de l'écran.

Je pense également de la description est incomplète et manque de compréhension.
En effet, si le but est d'afficher un cadre autour de l'image et le caption en dessous, il suffit de mettre le bloc (cadre) qui entoure l'image en display: inline-block; mais ça n'a plus rien à voir avec le sujet initial ^^

[jd_83]

Je ne crois pas qu'on se soit bien compris : j'ai repris le même exemple, avec le flexgrid.
Dans la partie droite, toujours le texte et l'image.
J'ai supprimé le <figure> et le <figcaption>.
Comme tu peux le vérifier, le texte ne se limite pas à la largeur de l'image (les deux dans des <div />).

Merci de ton attention.

[darkstar123456]

Bonjour,

C'est exactement ce que j'ai décrit (enfin... en pire ^^)

Tu as retiré figure et maintenant, tu dis que tu souhaiterais que cette colonne soit en largeur "auto" mais tu met du contenu dedans.
Donc voilà, très simple : sans regarder le texte, à quel mot (quelle position) la largeur devrait s'adapter ? Réponse : aucune idée. Si tu ne peux pas imaginer une réponse, le navigateur ne pourra pas non plus l'imaginer.

Il faut donc revoir ton problème à la source.
Est-ce ton problème c'est réellement d'avoir 2 colonnes dont une en largeur en auto ?
Comme décrit plus haut, une largeur auto déprendra toujours du contenu que tu met dedans donc plus tu vas écrire de texte, plus elle va être large.
Normalement ce qu'on fait, c'est qu'on fait des largeurs fixe de colonne et on met l'image à 100% de la colonne. De cette façon, on aura l'impression que le texte est basé sur la largeur de l'image

Je t'invite vraiment à prendre connaissance du fonctionnement des grilles.

PS : Dans ton Codepen, y'a du CSS qui correspond pas à ce que j'ai indiqué.
Heureusement dans ce cas-ci, ça n'a pas eu d'impact mais c'est à éviter sinon tu rajoutes des problèmes sur le problème initial

[jd_83]

Bonjour.

Je pense avoir compris tes explications : effectivement, la largeur de la colonne dépend de son contenu, donc, pour qu'elle corresponde à celle de l'image, celle-ci doit être connue. Ça clôt la question.

Pour le code non conforme à tes indications, c'était le cas hier, mais je progresse dans les essais des flexbox ; j'ai à présent abandonné les solutions de positionnements relatifs ou absolus, et commencé à étudier bootstrap.

Je pense pouvoir placer le sujet comme résolu.

Merci pour ta patience.