IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2020
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2020
    Messages : 34
    Points : 21
    Points
    21
    Par défaut Pousser vers le bas un élément pour ajustement !
    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 !!

  2. #2
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 284
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 284
    Points : 38 065
    Points
    38 065
    Par défaut
    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;
    }

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2020
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2020
    Messages : 34
    Points : 21
    Points
    21
    Par défaut
    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 !

  4. #4
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 284
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 284
    Points : 38 065
    Points
    38 065
    Par défaut
    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.

  5. #5
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2020
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2020
    Messages : 34
    Points : 21
    Points
    21
    Par défaut
    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;
      }

  6. #6
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 284
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 284
    Points : 38 065
    Points
    38 065
    Par défaut
    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;
    }

  7. #7
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2020
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2020
    Messages : 34
    Points : 21
    Points
    21
    Par défaut
    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 !!

  8. #8
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 284
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 284
    Points : 38 065
    Points
    38 065
    Par défaut
    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 :

    et pendant que j'y suis ce rappel :

  9. #9
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2020
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2020
    Messages : 34
    Points : 21
    Points
    21
    Par défaut
    Merci pour tous ces renseignements, je vais tester tout ça ( comme d'hab) !

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 7
    Dernier message: 09/10/2014, 09h12
  2. [Avis] Swap vers le bas pour réactualiser
    Par PP(Team) dans le forum Android
    Réponses: 8
    Dernier message: 30/08/2012, 09h10
  3. Décalage dynamique d'un élément vers le bas
    Par Nertios dans le forum iReport
    Réponses: 0
    Dernier message: 28/07/2009, 17h14
  4. Réponses: 2
    Dernier message: 05/07/2006, 16h52
  5. [export vers excel] centrage h&v et ajustement taille co
    Par Christophe93250 dans le forum Access
    Réponses: 4
    Dernier message: 20/01/2006, 14h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo