Discussion :

[Ushuango]

Bonjour,

j'expose mon souci:


voici le code

Code html :

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

1
2
3
4
5
6
7
8
9
 
<article class="card">
    <figure class="card-img"><img src="image.jpg" alt="une image"></figure>
    <div class="card-text-content"> 
        <h3 class="card-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
        <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
    </div>
    <p class="follow">Voir plus <img src="img/follow-arrow.svg" alt="" aria-hidden="true"></p>
</article>

si j'ai plusieurs articles comme au-dessus dans une section (qui est en display: flex)

lorsque tous mes paragraphes "card-text" sont de la même longueur, tous les boutons "follow" des articles sont alignés en bas !
Jusque là tout va bien!
Mais si dans un article, un paragraphe de texte est plus court que les autres, le paragraphe "voir plus" va remonter et je voudrais que tous mes articles conservent la même hauteur sans leur donner de hauteur !!! le paragraphe voir plus doit s'aligner avec l'article le plus long.

Je ne sais pas si la section en flex aide ? On peut la mettre en grid si ça aide plus, mais je n'ai aucune idée de comment résoudre mon problème
et que ce soit automatique: pousser vers le bas mon paragraphe "voir plus" .

Ce n'est pas un problème grave , mais ça fait moche sur une page !!

[NoSmoking]

Bonjour,

si j'ai plusieurs articles comme au-dessus dans une section (qui est en display: flex)

c'est un bon début et cela signifie également que tu peux facilement arriver à tes fins en ajoutant ce CSS (normalement) :

Code :

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

1
2
3
4
5
6
7
.card {
  display: flex;
  flex-direction: column;
}
.card-text-content {
  flex: 1 0 auto;
}

[Ushuango]

Bonsoir,

désolé, pas beaucoup de temps en ce moment :
j'ai essayé, mais ça ne fait rien du tout, il me reste une card plus petite que les autres !!!

je vais essayé de le tourner dans tous les sens, mais même si j'ai lu que les vaeurs sont:
1 - flex-grow
2 - flex shrink
3 - flex-basis

Je n'ai pas encore eu le temps de savoir à quoi cela correspondait exactement !

[NoSmoking]

j'ai essayé, mais ça ne fait rien du tout,

sur base de ce HTML :

Code html :

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
23
24
25
26
27
28
29
<section class="row">
  <article class="card">
    <figure class="card-img"><img src="image.jpg" alt="une image"></figure>
    <div class="card-text-content">
      <h3 class="card-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
      <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
      <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
    </div>
    <p class="follow">Voir plus <img src="img/follow-arrow.svg" alt="" aria-hidden="true"></p>
  </article>
  <article class="card">
    <figure class="card-img"><img src="image.jpg" alt="une image"></figure>
    <div class="card-text-content">
      <h3 class="card-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
      <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
      <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
      <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
    </div>
    <p class="follow">Voir plus <img src="img/follow-arrow.svg" alt="" aria-hidden="true"></p>
  </article>
  <article class="card">
    <figure class="card-img"><img src="image.jpg" alt="une image"></figure>
    <div class="card-text-content">
      <h3 class="card-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
      <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
    </div>
    <p class="follow">Voir plus <img src="img/follow-arrow.svg" alt="" aria-hidden="true"></p>
  </article>
</section>

et avec le simple CSS suivant :

Code :

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
.row {
  display: flex;
}
.card {
  display: flex;
  flex-direction: column;
  margin: .25em;
  border: 1px solid #CCC;
}
.card-text-content {
  flex: 1;
}
.follow {
  margin: auto 0;
  text-align: right;
  background: #EEE;
}

le résultat me semble satisfaisant.

Attention toutefois si tu utilises BootStrap il peut y avoir des conflits.

[Ushuango]

mince, j'ai oublié des truc! :
après la balise article , il y a une balise lien qui englobe le tout: pour rendre la card cliquable.
Mais j'ai aussi un container qui après la balise section pour une largeur minimale ...
Et puis je ne m'en souvenais plus: il y a une div qui contient les cards, en display grid !!!
Se serait mieux en flex, pour régler mon problème.
Parce que j'ai plein de sections et cards qui ne changent que par le nombre de cards et la largeur des cards, du coup ( en SASS ) je me suis essayé aux mixins
et je n'ai qu'à rentrer la largeur des cards , le nombre de fractions pour mon container et le tour est joué quand au placement sur ma page!!! Reste cependant ce petit détail lorsque les cards ne sont pas toutes
de la même hauteur !!!
du coup j'ai ça:

Code html :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<section class="row">
  <div class="container">
    <div class="cards">
      <article class="card">
        <a href="">
          <figure class="card-img"><img src="image.jpg" alt="une image"></figure>
          <div class="card-text-content">
            <h3 class="card-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
            <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
            <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
          </div>
          <p class="follow">Voir plus <img src="img/follow-arrow.svg" alt="" aria-hidden="true"></p>
        </a>
      </article>
      <article class="card">
        <a href="">
          <figure class="card-img"><img src="image.jpg" alt="une image"></figure>
          <div class="card-text-content">
            <h3 class="card-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
            <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
            <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
            <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
          </div>
          <p class="follow">Voir plus <img src="img/follow-arrow.svg" alt="" aria-hidden="true"></p>
        </a>
      </article>
      <article class="card">
        <a href="">
          <figure class="card-img"><img src="image.jpg" alt="une image"></figure>
          <div class="card-text-content">
            <h3 class="card-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
            <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
          </div>
          <p class="follow">Voir plus <img src="img/follow-arrow.svg" alt="" aria-hidden="true"></p>
        </a>
      </article>
    </div>
 
  </div>   
</section>

et en css ( j'ai laissé ton code, juste rajouté la grille ):

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
 
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
 
.card {
    display: flex;
    flex-direction: column;
    margin: .25em;
    border: 1px solid #CCC;
  }
  .card-text-content {
    flex: 1;
  }
  .follow {
    margin: auto 0;
    text-align: right;
    background: #EEE;
  }

[NoSmoking]

mince, j'ai oublié des truc! :
après la balise article , il y a une balise lien qui englobe le tout: pour rendre la card cliquable.

Ben si tu ne nous dis pas tout où va t-on

Quelle est l'utilité d'un « Voir plus » si tout est cliquable ?

Dans ce cas il te faut déporter sur le conteneur, qui est donc l'élément .card a le display:flex en t'assurant qu'il occupe bien 100% de la hauteur du parent.

Le code CSS modifié deviendrait :

Code :

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
23
24
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card {
/*  display: flex;            /* ne sert plus */
/*  flex-direction: column;   /* ne sert plus */
  margin: .25em;
  border: 1px solid #CCC;
}
/* Ajouter */
.card a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-text-content {
  flex: 1;
}
.follow {
  margin: auto 0;
  text-align: right;
  background: #EEE;
}

[Ushuango]

Merci, ça marche !
Je vais faire mon débriefnig sur ce que j'ai compris ( ou pas )

On commence donc par un conteneur: .cards
Il est en display: grid
il peut être aussi en flex ( j'ai essayé : ça marche ). ses éléments sont du coup stretch, donc ils prennent la hauteur maximale du conteneur,
qui lui prendra la hauteur de la plus grande card !! Nous avons donc tous nos articles de la même hauteur.

Le conteneur qui englobe le contenu des cards .card a doit lui aussi prendre toute la hauteur, donc height: 100%;

On en arrive a vouloir pousser le voir plus vers le bas.
le conteneur est en display: flex; et évidemment flex-direction: column; on ne peut pas trouver un moyen ( sur ce conteneur ) d'ajuster seulement ce qu'on veut:
il n'existe pas de valeur de justify-content pour ça ! ( à moinsque quelqu'un sache comment faire en partant de là !)

On va donc agir sur l'élément juste au -dessus: .car-text-content avec un flex: 1;
un raccourci de

Code css :

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

1
2
3
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;

Donc, ce bloc va occuper l'espace restant dans le conteneur, et pousser le dernier élément vers le bas.

Pour avoir l'élement exactement tout en bas, il faut modifier les marges de ce dernier élément ( .follow): margin: auto 0;

Mais, j'ai mis un margin-bottom: 0; pour voir et ça le fait aussi !! ( alors on choisit quoi ? )
D'ailleurs, dans ma page orignale, j'ai un reset css qui met déjà les marges à 0 pour les paragraphes du coup , pas besoin de margin ici !

En espèrant que j'ai pas trop raconté n'importe quoi.

P.S: y a-t-il un moyen, dans les posts du forum, de mettre les bouts de code dans le texte plutôt que dans des blocks ?
Oui, parce que je l'ai déjà vu , mais je ne sais pas comment !!

[NoSmoking]

Le conteneur qui englobe le contenu des cards .card a doit lui aussi prendre toute la hauteur, donc height: 100%;

Oui

On en arrive a vouloir pousser le voir plus vers le bas.
le conteneur est en display: flex; et évidemment flex-direction: column; on ne peut pas trouver un moyen ( sur ce conteneur ) d'ajuster seulement ce qu'on veut:
il n'existe pas de valeur de justify-content pour ça ! ( à moinsque quelqu'un sache comment faire en partant de là !)

Tu pourrais utiliser un justify-content:space-between, mais dans ce cas tes éléments milieux ne seraient pas alignés.

On va donc agir sur l'élément juste au -dessus: .car-text-content avec un flex: 1;
un raccourci de
...
Donc, ce bloc va occuper l'espace restant dans le conteneur, et pousser le dernier élément vers le bas.

Oui, flex-grow:1 aurait été suffisant, mais plus long à écrire :aie :

Pour avoir l'élement exactement tout en bas, il faut modifier les marges de ce dernier élément ( .follow): margin: auto 0;

Mais, j'ai mis un margin-bottom: 0; pour voir et ça le fait aussi !! ( alors on choisit quoi ? )
D'ailleurs, dans ma page orignale, j'ai un reset css qui met déjà les marges à 0 pour les paragraphes du coup , pas besoin de margin ici !

Oui car dès l’instant où tu mets un flex :1 sur l’élément .car-text-content cela n’est pas utile.

De même si tu mets un margin-top:auto sur l’élément .follow tu n’as pas besoin de mettre un flex:1 sur l’élément précédent.

On pourrait également mettre un margin-bottom: auto; sur l’élément .car-text-content et rien sur l'élément .follow.

Une autre solution serait de mettre un height:100% sur ton élément .car-text-content.

Toutes font le job à toi de choisir la méthode qui te correspond le mieux, que tu trouves la plus lisible.

P.S: y a-t-il un moyen, dans les posts du forum, de mettre les bouts de code dans le texte plutôt que dans des blocks ?
Oui, parce que je l'ai déjà vu , mais je ne sais pas comment !!

Il faut utiliser le BBCODE de la façon suivante : [C]Le code[/C] donnera Le code.

Une liste plus complète :

• Liste des balises BB

et pendant que j'y suis ce rappel :

• Aide sur l'utilisation des boutons.

[Ushuango]

Merci pour tous ces renseignements, je vais tester tout ça ( comme d'hab) !

Je teste déjà le code sur une ligne: display: flex