web-dev-qa-db-fra.com

Dans Outlook, le courrier électronique HTML ne fonctionne pas.

Je veux cette mise en page où j'ai une boîte rectangulaire. Et à l'intérieur de la case à gauche, il y a un texte et à droite, une image. Cela a l'air bien dans le navigateur, mais lorsqu'il est envoyé sous forme d'email HTML, dans Outlook, le flottant de droite ne semble pas fonctionner. Il met l'image dans la ligne suivante sous le texte. Des idées sur la façon de faire fonctionner cela? (J'essaie d'éviter d'utiliser des tables.)

<div style="width: 100%;border-style:solid;overflow: hidden;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>
cssoutlook-2007
30
Foo

En ce qui concerne le rendu HTML, la plupart des clients de messagerie sont primitifs et détruisent de nombreux éléments HTML bien formés.

Je recommanderais des ressources en ligne telles que: 

Comment coder les emails HTML: MailChimp

Cette discussion SO peut être utile:

Quelles sont les lignes directrices pour la conception de courrier électronique HTML?

22
Marc Audet

Très tard dans la conversation, mais voici comment "flotter" dans un courrier électronique HTML en utilisant align="" à la place.

Exemple ici

De plus, si vous recherchez des ressources sur les courriels HTML (je suppose que vous êtes comme la réponse que vous avez indiquée correcte est très générale), voici une liste énorme de ressources .

21
John

C’est un très bon guide de Mail Chimp sur le codage d’emails HTML:

http://kb.mailchimp.com/article/how-to-code-html-emails

Quelques conseils de base:

  • Utilisez des tableaux pour la mise en page.
  • Réglez votre table la plus large à 600px maximum.
  • N'essayez pas d'utiliser JavaScript ou Flash
  • N'utilisez pas CSS dans une balise de style, car certains clients de messagerie la supprimeront.
  • Utilisez uniquement des styles CSS en ligne.

En gros, codez vos courriels comme si c’était à peu près 2003.

8
Billy Moat

CampaignMonitor fournit ce guide plutôt brillant à l’ensemble du support CSS sur plusieurs clients de messagerie, également disponible au format pdf ou xls download.

Comme le disent les réponses ci-dessus, la prise en charge de CSS par courrier électronique est très limitée, principalement à cause de la décision de Microsoft d'utiliser Word comme moteur de rendu html .

6
Sinister Beard

J'ai trouvé un moyen d'appliquer float sur Outlook.com .
Juste capitalisez le tag comme Float: left . 

<span style="Float:left;">Content to float</span>

Peut-être devriez-vous utiliser! Important aussi;
.__ Je l'ai testé et cela a fonctionné.

3
Didier Margarido

check out https://www.campaignmonitor.com/css/ ici, il a répertorié toutes les choses prises en charge et non prises en charge par courrier électronique.

Au lieu de float, vous pouvez utiliser une table externe et mettre le contenu que vous souhaitez laisser à la gauche du td gauche de la table externe.

ce n'est pas une réponse élégante mais je l'ai fait de cette façon

2
Pratik

Les images flottantes simples peuvent être comme 

<img src="yourimage" align="left" />

MAIS de cette façon, vous n'obtiendrez pas de résultats solides avec le remplissage entre le texte et l'image, Outlook supprime les marges et le remplissage et votre texte restera collé juste à côté de l'image. Alors essayez ceci:

<div style="text-align:justify;">

...a lot of text here untill you want to insert an image that floats left...

    <table cellpadding="0" cellspacing="0" align="left" style="float: left;">
        <tr>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
            <td width="15">&nbsp;</td>
        </tr>
    </table>

...a lot more text here until you need an image that floats right...

    <table cellpadding="0" cellspacing="0" align="right" style="float: right;">
        <tr>
            <td width="15">&nbsp;</td>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
        </tr>
    </table>

... a lot more text here...

</div>

Vous devez entourer un élément 'table' pour que l'effet de marge de remplissage fonctionne dans Gmail, Outlook (en ligne), Microsoft Outlook (client de bureau), ...

Donnez à la table un attribut align = left ou right. (Modifier la réponse ici: de plus, les solutions de repli pour les autres clients de messagerie donnent également à la table une valeur float, faites donc les deux. Elles se sauvegardent les unes par rapport aux autres. Certains clients comprennent "float", d'autres comprennent "aligner", d'autres les comprennent, ...) Votre table va flotter dans le texte presque comme une image. La seule différence est que, dans Outlook, un tableau génère un saut de ligne automatique dans le texte lorsqu'une image avec aligner à gauche ou à droite ne génère pas de sauts. 

Pour définir la marge, puisque nous travaillons maintenant avec une table, ajoutez un "td" supplémentaire avec une largeur = "15" à gauche ou à droite de la cellule de votre image et un espace insécable à l'intérieur. (ou un gif transparent -> spacer.gif)

&nbsp;

Il vaut mieux ne pas laisser les cellules vides, sinon la largeur de votre cellule ne sera pas respectée dans certains clients de messagerie.

Pour les marges supérieure et inférieure, nous pouvons utiliser l'attribut 'vspace', n'oubliez pas de donner à l'image un attribut align = left ou right. Sinon, le "vspace" ne fonctionnera pas.

2
Julesezaar

Lorsque vous flottez quelque chose à droite de l'élément, l'élément flottant de droite doit toujours apparaître en premier dans le code. Comme ça:

<div style="width: 100%;border-style:solid;overflow: hidden;">
    <img src="someImage"  style="float: right;"/>
    <h3> Your appointment Details</h3>
</div>
0
user301441