Les bases
Blocs containers
Blocs containers
Le bloc de contenu est un élément central en intégration. C’est un élément rectangulaire qui contient des calques à l’intérieur.
L’élément à gauche est un bloc car rectangulaire. L’élément à droite est une image car non rectangulaire.
Quand il est intégré en HTML/CSS, la hauteur du bloc est dynamique. Si un élément à l’intérieur s’agrandit ou se rétrécit, le bloc changera également de taille.
🚨 Les trois conditions à remplir pour une intégration en HTML :
› Le bloc doit avoir une forme rectangulaire (sinon c’est une image)
› Le bloc ne doit pas être chevauché par un autre calque
› Le bloc ne doit pas avoir d’opacité, de rotation ou de dégradé (non reconnus par les clients mails).
Évitez les formes non rectangulaires
Si vous avez une forme non rectangulaire volontaire, essayer de scinder votre forme en 2 calques distincts mais collés.
Évitez les chevauchements
Idem, si vous avez un chevauchement voulu, essayer de scinder votre forme en deux calques.
Quelques exemples concrets
Voici des cas sur l'organisation des blocs où il faut soit séparer en deux calques un élément qui chevauche le calque, soit séparé en deux le bloc container lui-même.
Exemple 1
Il faut ici séparer l’image de droite en deux pour éviter le chevauchement avec le bloc orange
Exemple 2
À l’opposé, il faut ici scinder le calque orange en deux pour éviter le chevauchement.
Exemple 3
Il faut ici séparer l’image du fruit en deux ainsi que le bloc container. Avec ce découpage, le bloc orange fera au minimum la taille du fruit et augmentera de taille si on ajoute du texte.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.