Comment créer une marge dans ma newsletter ?

par Girondin Jeu 7 Aoû 2014 - 23:57

Bonjour à tous

j'expérimente ma première newsletter en html, et je dois dire que ça n'est pas un long fleuve tranquille.

Dans un autre sujet, Neptune (merci à lui) m'a aidé à résoudre un problème lié au fait que mon code html était considéré comme du spam. Le problème a été résolu en enlevant les balises <head> <body> et <html> de mon code.

Conséquence indésirable néanmoins : je ne savais plus comment obtenir un fond d'une couleur déterminée. Neptune à nouveau m'a suggéré d'inclure du code css dans le code html. Mais comme je ne sais pas manier le css, il m'a suggéré d'employer la balise <div> à la place. Ca marche bien effectivement.

Maintenant, pour que ça soit parfait, je voudrais qu'il y ait une marge tout autour de mon texte (droite gauche haut bas)

Je ne sais pas si c'est possible aussi avec la balise div (j'ai un peu cherché sur internet mais je n'ai pas trouvé) ?

Dernier post de Neptune :
.

Neptune- a écrit:Si la modification doit s'appliquer à l'ensemble de la page vous pourriez utiliser
Code:
<div style="background-color: #CCCCCC; propriete1: valeur1; propriete2: valeur2;">

J'en suis là. Serait-il possible d'avoir les expressions de "propriété1" "propriété2" qui correspondent aux marges autour du texte (pour l'instant je n'ai toujours pas trouvé sur internet).

Merci d'avance

par Girondin Ven 8 Aoû 2014 - 8:41

Bon, j'ai continué à chercher un peu et j'y suis arrivé. Mais de manière très empirique (c'est à dire que ça marche mais je ne suis pas sur de bien comprendre pourquoi) en copiant/collant des lignes de codes trouvées sur internet.

Je m'y suis pris de la manière suivante : deux balises <style> en tête du code de la newsletter, et deux balises <div> pour encadrer ce code.

Ca se présente comme ça

Code:: <style> .marge { margin-top:50px; margin-left:50px; margin-right:50px; margin-bottom:50px; } </style> <style> .background-bleu { background-color: #3366FF; } </style> <div class=background-bleu> <div class=marge> LE CODE HTML DE LA NEWSLETTER </div> </div>

Il reste encore une marge blanche en haut de la page de ma newsletter et je ne sais pas comment m'en débarrasser, mais grosso modo je suis au résultat souhaité.
J'aimerais avoir votre avis sur la manière précédente de résoudre mon problème de marges et de fond coloré (y a-t-il une manière plus élégante et/ou plus optimale de parvenir au même résultat ?)

Deuxièmement, j'ai un nouveau problème maintenant : j'ai l'impression que la newsletter n'a pas été diffusée. J'ai en effet deux pseudos sur mon forum (un pseudo admin et un pseudo visiteur lambda), mais la newsletter n'est arrivée sur aucune des deux boites mail associées. Par ailleurs, j'ai reçu une trentaine de messages d'erreurs 'courrier non distribué' dans ma boite mail "admin".

D'un autre coté, cette newsletter est archivée dans mon "panneau d'administration".

A votre avis, la newsletter a-t-elle été diffusée ou pas ?

Merci d'avance pour les réponses à toutes ces questions

par Scoubifitz Lun 11 Aoû 2014 - 14:48

Girondin a écrit:
Il reste encore une marge blanche en haut de la page de ma newsletter et je ne sais pas comment m'en débarrasser, mais grosso modo je suis au résultat souhaité.
J'aimerais avoir votre avis sur la manière précédente de résoudre mon problème de marges et de fond coloré (y a-t-il une manière plus élégante et/ou plus optimale de parvenir au même résultat ?)

Deuxièmement, j'ai un nouveau problème maintenant : j'ai l'impression que la newsletter n'a pas été diffusée. J'ai en effet deux pseudos sur mon forum (un pseudo admin et un pseudo visiteur lambda), mais la newsletter n'est arrivée sur aucune des deux boites mail associées. Par ailleurs, j'ai reçu une trentaine de messages d'erreurs 'courrier non distribué' dans ma boite mail "admin".

D'un autre coté, cette newsletter est archivée dans mon "panneau d'administration".

A votre avis, la newsletter a-t-elle été diffusée ou pas ?

Merci d'avance pour les réponses à toutes ces questions

bonjour ,

Petite explication sur le code :

- "div" , comme vous avez dù le découvrir , est un cadre qui entoure tout le contenu . Ce cadre reste "invisible" tant que l'on lui donne pas de style (couleur de fond , bordure ...)

- Le style peut être intégré directement à la "div" , comme l'a expliqué Neptune ,
ou indirectement , par une "class" (classification du style) et le style sera entre balises <style> dans l'entête de la page .

- une marge (margin) est définie à l'extérieur d'un cadre , alors qu'un espace (padding) est à l'intérieur d'un cadre .

Code:: <div style="background-color: #3366FF;padding:50px;"> LE CODE HTML DE LA NEWSLETTER </div>

dans ce cadre , tout les cotés ont un espace de 50px .

Code:: <div style="background-color: #FF66FF;padding:10px 50px"> LE CODE HTML DE LA NEWSLETTER </div>

dans ce cadre , le haut et le bas ont 10px et la gauche et la droite ont 50px :

le résultat :
http://jsfiddle.net/q6k6La0o/1/

par Girondin Mar 12 Aoû 2014 - 10:10

Merci Scoubifiz, c'est très clair

je clos le sujet

Comment créer une marge dans ma newsletter ?

Comment créer une marge dans ma newsletter ?

Re: Comment créer une marge dans ma newsletter ?

Re: Comment créer une marge dans ma newsletter ?

Re: Comment créer une marge dans ma newsletter ?