Personnalisation CSS du blog Divi #2

16 Sep 2017

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 !

Personnalisation CSS blog Divi 2

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; }