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.
[RÉSOLU] espacement entre la photo et le texte de l'article.
  • J'ai l'impression que dans l'affichage des articles, l'espacement entre la photo et le texte de l'article a été agrandi. J'aimerai pouvoir rapprocher le texte de
    l'image (ex : http://sovietauto.over-blog.com/2015/04/industrie-automobile-polonaise-quelque-chose-a-feter.html) pour avoir le même espacement que sur la page d'accueil (http://sovietauto.over-blog.com/). Cela doit se trouver dans le code, mais où ?

  • Bonjour sovietauto,
    Tu peux essayer ceci

    En mode source, tu peux utiliser les attributs hspace et vspace pour créer une marge

    Ex : <img src="urldetonimage"  hspace="10"> Ton texte

    La valeur "10" indique qu'il y aura 10 pixels entre entre le bord latéral de l'image et le texte.
    Tu peux la modifier à ta guise

    Ou

    ex : <img src="urldetonimage" vspace="10"> Ton texte
    La valeur 10 indique qu'il y aura 10 pixels entre la partie supérieure de l'image et le texte
  • Bonjour. Je comprends que c'est un paramétrage à faire image par image et donc article par article ?
  • bonsoir, oui dans le HTML de l'article
  • Bonsoir,
    pour ne pas être obligé de le faire article par article, il est bien préférable de passer directement par le css.

  • Bonsoir
    test en ajoutant les ligne de code ci-dessous avant la derniere balise </style>  de ton css

    pour te reperer,en dessous de cette balise tu verra "</head>"..et.."<body>"

    </style>
       
        <link href="//assets.over-blog-kiwi.com/themes/jquery/fancybox2.1.2/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    _______________

    ligne a ajouter:

    .ob-section * {
        box-sizing: border-box;
        margin: 8px;
    }

    j'ai ajouté une marge de 8 px..cela réduit un peu l'espace séparant l'image du texte

    oublie pas les balises ouvrante et fermante { }

    rendu avant modification

    image



    aprés


    image



  • j'arrive encore a réduire un peu en séparant les marges (gauche, droite, haute)

    .ob-section * {
        box-sizing: border-box;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 12px;
    }

    rendu
    image


  • Bonjour,

    Oui d'accord pour le CSS, mais le paramètrage sera toujours le même.
  • Oui, mais je pense que c'est ce qu'il veut, toujours le même espacement sans avoir à le faire à chaque article.
    De plus, si un jour il veut modifier cet écartement, il n'aura pas à se retaper tous les articles ^^
     
  • Bonjour,

    Toutes
    les personnalisations étant centralisées avant </style> , il lui sera facile de les supprimer si il le souhaite un jour ;)

    On va d’ailleurs le préciser..ce qui donnera si le dernier code est retenue

      <!-- personnalisation -->
    .ob-section * {
        box-sizing: border-box;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 12px;
    }

  • Bonjour à tous. J'ai appliqué avec succès la manip ci-dessous en modifiant les valeurs pour ce qui me semblait le mieux (c'est subjectif). Je n'arrive pas à vous mettre une photo mais vous pourrez-voir le résultat en recliquant l'article :
     
               {% endif %}
    .ob-section * {
        box-sizing: border-box;
        margin-left: 3px;
        margin-right: 5px;
        margin-top: 8px;
    }

            </style>
        </head>
        <body>
    Merci encore du coup de main !
  • Bonsoir,

    c'est bon...je vois en effet la modification sur ton blog ;)

    http://sovietauto.over-blog.com/2015/04/industrie-automobile-polonaise-quelque-chose-a-feter.html

    je tag donc en "résolu" :)