Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
[EN COURS] Légende de photo : aller à la ligne automatiquent
  • Bonjour Mehdi,


    Tu tombes directement sur l'image concernée : elle n'est pas très grande et la légende est plus longue que sa largeur. Y a-t-il est moyen pour que le texte aille à la ligne ?
    Parce que là en plus c'est comme si l'image n'était pas centrée. mais quand bien même, le texte dépasserai de chaque côté donc, le prob resterai le même.

    Voilà, merci de toi aide.

  • Bonjour,

     j'y arrive a peu prés en "bricolant" le code

    avant style tu ajoute

    @media only screen and (min-width: 970px)
    .ob-section-html, .ob-section-html iframe, .ob-section-html>* {
        max-width: 100%;
        margin-top: 0px;
    }


    @media only screen and (min-width: 970px)
    figure>figcaption {
        width: 75%;
        line-height: 20px;
    }

    ________________

    • j'ai enlevé la marge haute de 5 px actuellement. (margin-top)

    • Puis dans le second code diminué la largeur autorisé  (75%)

    • j'ai aussi modifié le "line-height" c'est à dire l'espace entre les lignes qui était trop grand en passant a la ligne

    Tu peux bien sur affiner toutes les valeurs

    __________________

    Rendu en simulation:

    image




  • sur le second code ajouté, tu peux aussi demandé un centrage du texte de la légende
     en ajoutant:

    text-align:center;


    (cela donnera pour le second code)

    @media only screen and (min-width: 970px)
    figure>figcaption {
        width: 75%;
        line-height: 20px;
    text-align:center;
    }


    ___________________

    Ce qui donnera en simulation (texte de légende centré)


    image




  • Pour le centrage tu m'as devancée ;)
    Pour l'instant l'ensemble ne fonctionne pas. Mais j'ai déjà remarqué que parfois les modifs sur le code ne sont pas tjs instantanées.
    J'ai laissé les codes sans les masquer j'attends de revoir en fin de journée.

    ??? Est-ce néanmoins normal que dans l'éditeur de code iframe (code 1) et figure>figcaption (code 2)  soient en rouge alors qu'on a déjà ajouté des petits codes en amont avec la même syntaxe et qu'ils étaient en vert.


  • tu aurait pas oublié une parenthèse   {    }  ou un  ;



  • pô du tout ☺ sauf si toi oui ;) ce dont je doute. j'ai fait un copié/collé, j'ai qd même relu. il me semble que tout y est.
    image

  • Pourrait tu tester en virant @media et en ajoutant un point avant figure>figcaption {

    .ob-section-html, .ob-section-html iframe, .ob-section-html>* {
        max-width: 100%;
        margin-top: 0px;
    }

    .figure>figcaption {
        width: 75%;
        line-height: 20px;
    }



  • Bon,
    alors oui il fallait supprimer @media...
    Par contre pas de . devant figure et ça marche.... sans marcher. ☺
    c'est le truc que quand tu bouges d'un côté ça déstabilise ailleurs.
    J'ai laissé le code pour que tu vois :

    1 - L'image en haut qui posait probl avec sa légende est "presque" ok ► c'est centré et à la ligne, nikel, mais ça maintient l'écart entre l'image et le texte (tu vois ? la marge est énorme. ça correspond à l'endroit où allait le texte s'il n'était pas renvoyé à la ligne).

    2 - Une intuition m'a poussée à faire un test en mettant aussi une légende sur une image cette fois à droite (tu as tous les exemples dans la même page) : voilà, voilà.... (donc ça ne s'applique que pour la gauche

    2 - ET..... maintenant si tu scrolles, tu arrives sur une image qui est centrée (intégrée via section texte, tjs). La légende est à gauche au lieu d'être centrée. ça ne fait ça que sur les images intégrées via section texte.

    Avant de lâcher l'affaire, je te mets l'ensemble de la successions de petits codes ajoutés concernant les légendes... peut-être y-t-il conflit ? Sinon, on lâchera l'affaire. Mais alors il faudra remonter le truc, si c'est un bug, parce que typiquement ça ressemble à une fonctionnalité un peu défaillante. Et moi je m'arrangerai pour contourner le prob. No soucy

     /* légende image section image Margin = espacement entre légend et image*/
                 
                  .ob-section .ob-desc {
        font-size: .9em;
        margin: -5px auto 0;
        text-align: center;
        font-style: italic;
        color: #262626;
                                    }
                 
                  /* légende image section texte */
                 
                  figure>figcaption {
        font-style: italic;
        display: block;
        font-size: 0.9em;
        margin: 6px auto: 0;
         color: #262626;

    /* retour à la ligne des légendes*/
                 
                        .ob-section-html, .ob-section-html iframe, .ob-section-html>* {
        max-width: 100%;
        margin-top: 0px;
                                    }

                 figure>figcaption {
        width: 80%;
        line-height: 20px;
            text-align:center;
              }