Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème d'affichage de légende d'image

    14 avril 2019 à 19:29:32

    Bonjour à tous !

    Après de multiples essaies (de différentes manières...), je n'arrive pas à mettre une légende à mon gif x)

    Voici un codepen reprenant uniquement les parties de code utiles pour faire ce qui ce je souhaite.

    J'ai essayé d'utiliser les balises <figure> et <figcaption>

    Lien : https://codepen.io/iPom/pen/KYXgXr

    Merci d'avance pour votre aide !

    • Partager sur Facebook
    • Partager sur Twitter
      14 avril 2019 à 23:03:45

      bonjour,

      en fait ton ensemble image devrait être comme ceci :

      .im1{
        max-width: 220px;
      }
      figure {
          border: thin #c0c0c0 solid;
          display: flex;
          flex-flow: column;
          padding: 5px;
          max-width: 220px;
          margin: auto;
      }
      figcaption {
          background-color: #222;
          color: #fff;
          font: italic smaller sans-serif;
          padding: 3px;
          text-align: center;
      }
      <figure>
      <img class="im1" src="https://media.giphy.com/media/HZpCCbcWc0a3u/giphy.gif" alt="" width="241" >  <figcaption> Le battle ? Moment où on échange les coups ! </figcaption>
      </figure>

      En fait tes <p> ne doivent pas faire partie de l'ensemble <figure>


      • Partager sur Facebook
      • Partager sur Twitter

      Compos sui.

        14 avril 2019 à 23:50:05

        Merci !

        Alors je comprends mieux l'idée, en revanche, j'écris une sorte de petit journal. Il y a donc 2 colonnes, avec du texte avant et du texte après (avec la balise <p>), et le problème c'est que  mon gif se place en plein milieu de ma page avec du texte au dessus et en dessous, mais rien autour x)

        Quelqu'un a une idée ?

        • Partager sur Facebook
        • Partager sur Twitter
          16 avril 2019 à 23:17:31

          Je me permets de "UP" le sujet, parce que je n'ai toujours pas trouvé de solution x)
          • Partager sur Facebook
          • Partager sur Twitter
            17 avril 2019 à 21:28:18

            Bonjour,

            dans le css teste :

            figure{
              float: left;
            }

            et dans le HTML tu colle ton ensemble <figure> dans un de tes <p>

            • Partager sur Facebook
            • Partager sur Twitter

            Compos sui.

              20 avril 2019 à 2:09:51

              Re

              Malgré ton apport et mes recherches, je reste bloqué x)

              Voici ce que cela renvoie :

              https://codepen.io/iPom/pen/BExbPP

              Seule la première partie du texte se place comme il faut, à partir du moment où j'insère mon gif (qui n'est pas adapté au texte...) le texte ne suite plus ce qui est demandé )

              Je vais continué à chercher, mais là je suis vraiment à court d'idées !

              • Partager sur Facebook
              • Partager sur Twitter
                21 avril 2019 à 12:25:08

                Bonjour AmbPom,

                Si je me trompes pas figure n'est pas autorisé dans un p

                Du coup le navigateur ferme automatiquement le p avant le figure ouvre automatiquement le p après

                Il faut donc utiliser  un compteur de type span

                En espérant que le résultat est celui attendu

                https://codepen.io/Zonecss/pen/xezWgx

                • Partager sur Facebook
                • Partager sur Twitter
                Découvrez les Css avec la zonecss.fr
                  22 avril 2019 à 16:00:59

                  Re,

                  En fait pour les <p> c’est moi qui me suis mal exprimé.

                  Tu colle ton ensemble<figure>dans tes <P> comme ceci.

                  <p>…</p> <br > <figure> … </figure> <p>… </p> <P>… </p>

                  Vu que tu as rajouté (float :left ;) sur figure tout les paragraphes qui vont être dessus ou dessous vont l’entourer.

                  Pour ton problème tu peux peut-être voir la création de ta page comme ceci.

                  Ton ensemble <header>, en dessous un <container> qui engloberasdeux sous ensembles en colonnes qui viendraient se placer l’un en dessous de l’autre des que tu passe la barre des 768px .

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Compos sui.

                  Problème d'affichage de légende d'image

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  • Editeur
                  • Markdown