CONTACT

    Hello,

    Dans le dernier article, nous avons vu comment modifier le design du blog Divi pour réduire l'image des articles et la positionner sur la gauche. Inconvénient pour certains (ou pas) : le texte habillait l'image en raison du positionnement float.

    Pour remédier à cela et conserver l'alignement du texte, on ajoute une marge au bloc article !

    CSS blog Divi marge

    Explications

    • padding-left de 40% pour le bloc article : notre marge (on utilise ici un padding pour que les coordonnées d'origine du bloc restent sur le bord gauche de la page car c'est notre référence pour positionner ensuite la date en absolu)
    • largeur de l'image : on veut placer l'image dans un espace de 40% du conteneur, mais la largeur de celui-ci a diminué de 40% à cause de son propre padding, donc il faut calculer la largeur de l'image par rapport à cette nouvelle largeur (60%), soit 66.67% (40% = deux tiers de 60%)
    • marge négative pour l'image de la valeur de sa largeur afin de la déplacer contre le bord gauche de la page, puisque elle était float, mais dans le bloc article dont le bord intérieur gauche a été déplacé à cause de son padding
    • petit padding de 7% pour ne pas coller l'image au bord du texte

    A retenir :
    Le positionnement absolute est relatif aux coordonnées d'origine du premier bloc conteneur positionné, sans tenir compte de la marge (et encore moins du padding).
    Le positionnement float est relatif au padding du bloc conteneur.

    Le code CSS

    Code modifié par rapport à l'article précédent uniquement :

    .blog article, .category article {
      position: relative;
      padding-left: 40%;
    }
    .blog .et_pb_post > a img, .category .et_pb_post > a img {
      float: left;
      max-width: 66.67%;
      margin-left: -66.67%;
      padding: 0 7% 0 0;
    }

    8 commentaires sur cet article

      1. Exact, c'est mieux mais j'arrive pas à faire pareil que toi.

        Toi : https://pavenum.com/blog/
        Moi: https://winovax-intranet.com/blog

        De plus ma date n'est pas la même, toi par exemple tu as "23 Oct", moi j'ai la date entière avec l'année, surement un paramètre de Divi je pense ... Puis quand je clique sur l'article, c'est déformé, je pense qu'on doit pas avoir les même paramètres du blog dans les options du theme sinon moi je n'aurais pas de souci.

        1. Exact, il faut saisir "j M" (sans les guillemets) pour le format de date dans la page principale des options Divi, et il faut afficher uniquement la date dans les meta-données de l'article (onglet Layout / Paramètres généraux).
          Sinon je pense qu'on a la même chose, tu vois d'autres différences ?

          1. Oui tout à fait, par contre dans "layout" puis "modèle d'article" (pour la page d'un article) moi tout est coché -> auteur, dates, catégories et commentaires, si s'affiche que la date c'est ok, mais j'ai besoin de tout afficher ... Je vais essayer de bidouiller mon css.

      1. OK cool ! Mais évidemment si une solution marche pour moi, elle n'est pas forcément adaptée à tous les besoins 😉 Un peu de cambouis ça fait pas de mal, de temps en temps !

    1. Bonjour Julien,
      merci pour l epartage. J'ai fait tout ce que tu as dit et chez moi aucun changement.

    Laisser un commentaire

    Votre adresse IP ne sera pas collectée.
    Vous pouvez renseigner votre prénom ou votre pseudo si vous êtes un humain ;-)