CSS dans les mail - Habillage de liste

Version imprimable

19/08/2009, 15h02
LeBernie

CSS dans les mail - Habillage de liste
Je dois réaliser des gabarits de mail utilisé dans thunderbird par notre service presse.
Je travaille entre html à l'ancienne et css.

Dans la css, l'habillage des puces d'une liste se fait au moyen d'une image, l'image s'affiche correctement lors de la composition du mail mais n'est pas reçue par les clients mails (ex thunderbird)...
Code:

1 2 3 4 5 6 7 8 9 li { margin-left:25px; margin-right:20px; margin-top:10px; margin-bottom:10px; text-align:left; vertical-align: middle; list-style:disc url(..extras/img_mail/bulle.gif); }
Je pense que cela viens du fait que mon image n'est pas "incorporée" au mail ?

Quelqu'un a-t-il une solution ?
19/08/2009, 15h14
HiRoN

Bonjour,

Sauf erreur de ma part, Thunderbird désactive par défaut les images...

Code:

list-style:disc url(..extras/img_mail/bulle.gif);

À mettre de la forme :

Code:

list-style:disc url(http://www.monsite.com/extras/img_mail/bulle.gif);

(en style en ligne sur le(s) li)

J'ai essayé aussi avec une url complète, mais ça ne s'affiche toujours pas lors de la réception mais bien lors de la composition :
Code:

1 2 3 4 5 6 7 8 9 li { margin-left:25px; margin-right:20px; margin-top:10px; margin-bottom:10px; text-align:left; vertical-align: middle; list-style:disc url(http://monsite/intranet/extras/img_mail/bulle.gif) }

19/08/2009, 15h29
HiRoN

L'url donnée affiche bien l'image ?
Utilises-tu bien des "style en ligne" dans tes balises ?
Sous Thunderbird, l'image s'affiche-t-elle après avoir cliqué sur "Afficher les images distantes" (ou une phrase dans le genre) ?
19/08/2009, 15h43
LeBernie

je vais te paraître ignare, mais que sont les style en ligne ?
19/08/2009, 15h49
HiRoN

Citation:

Envoyé par LeBernie

je vais te paraître ignare, mais que sont les style en ligne ?

Normalement, les clients mails ne respectant pas les normes, la façon la plus simple de faire un email compatible sur un maximum d'entre eux et d'utiliser les styles en ligne dans les balises.

Code:

<div style="border:1px solid red; margin:15px;">Par exemple</div>

Et donc, ne pas utiliser un fichier CSS externe (certains clients mails zappant totalement le code normalement placé avant le <body>).

Il me semble que developpez à un cours / tutoriel CSS traitant du sujet mais je n'arrive pas à remettre la main dessus... :?
19/08/2009, 19h16
12monkeys

Salut

Citation:

Envoyé par HiRoN

Il me semble que developpez à un cours / tuto traitant du sujet mais je n'arrive pas à remettre la main dessus... :?

C'est pas ça que tu cherches ? http://a-pellegrini.developpez.com/tutoriels/css/email/ :mrgreen:
20/08/2009, 11h01
LeBernie

Ok, il fallait mettre le style dans la balise <li> directement (en ligne donc) et placer le fichier sur un serveur web et pas un serveur interne comme j'avais fait la 1° foi.

Merci !

Et merci pour le liens, je connaissait le tableau sur un autre site mais celui-ci est d'enfer !

:ccool:
20/08/2009, 11h29
HiRoN

Citation:

Envoyé par 12monkeys

C'est pas ça que tu cherches ? http://a-pellegrini.developpez.com/tutoriels/css/email/ :mrgreen:

En effet, merci 12monkeys (pas pratique à trouver celui-ci :?)