Discussion :

[lololebricoleur]

Bonjour,

Je suis débutant en HTML et je travail sur la création de modèle de newsletter. Les problèmes de compatibilité du code utilisé en fonction du client mail qui réceptionne, me pose quelques soucis. Par exemple, je ne parviens par à programmer correctement le style des liens hypertext pour qu'ils soient compatible avec tout les clients (gmail, navigateurs...) mais aussi outlook qui, si j'ai bien compris, est un sacré trouble fête.

Concrètement :

Le code mon lien ressemble à cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
		<span style="color: #FFC005;font-family : Verdana, Geneva, Tahoma, sans-serif; font-size: 10pt">
		<a href="mailto:info@anofab.fr">info@anofab.fr</a></span>

Le code de style ressemble à

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a {color: #FFFFFF;}
a:visited {color: #FFFFFF;}
a:active  {color: #FFC000;}
a:hover {color: #FFC000;}

Ce code fonctionne parfaitement quand je le visualise dans mon navigateur mais ne fonctionne absolument pas avec outlook (il semble que la description du style ne lui convienne pas).

Pouvez-vous m'aider svp ?
Merci.

[rodolphebrd]

Bonjour,

je pense qu'il faut écrire les styles en ligne et les doubler dans un span :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" style="color:#FFFFFF"><span style="color:#FFFFFF">blabla stylé ;-) </span></a>

[lololebricoleur]

Je vais tester ta suggestion.

Mais comment reproduire le fait que le lien soit dans une couleur donnée à l'état actif et d'une autre couleur quand il est survolé ?

[rodolphebrd]

Il faut passer par une déclaration CSS que tu peux garder pour les newsletters qui passeront.

Gmail par exemple ne le prendra pas en compte : http://www.campaignmonitor.com/css/

[lololebricoleur]

Donc en dehors des CCS, je ne peux pas gérer cela selon toi ?

Comment analyse tu le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
<!--
 /* Font Definitions */
 @font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin-top:0cm;
        margin-right:0cm;
        margin-bottom:10.0pt;
        margin-left:0cm;
        line-height:115%;
        font-size:11.0pt;
        font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
        {color:blue;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {color:purple;
        text-decoration:underline;}
span.MsoSubtleReference
        {font-variant:small-caps;
        color:#C0504D;
        text-decoration:underline;}
.MsoChpDefault
        {font-family:"Calibri","sans-serif";}
.MsoPapDefault
        {margin-bottom:10.0pt;
        line-height:115%;}
@page WordSection1
        {size:595.3pt 841.9pt;
        margin:70.85pt 70.85pt 70.85pt 70.85pt;}
div.WordSection1
        {page:WordSection1;}
-->
</style>

C'est le code html généré par word pour mémoriser les styles a priori.
En jouant avec ça, je dois pouvoir appliquer les couleurs que je veux non ?
Et y a t'il moyen de l'intégrer à la ligne directement ?