Comment envoyer une image à envoyer en tant que position absolue avec le texte html

J'essaye d'envoyer l'image en tant que position absolue avec le texte html derrière l'image mais quand je l'envoie à Gmail ou autre email il montre l'image puis en bas le texte html. Le css absolu ne fonctionne pas.Comment envoyer une image à envoyer en tant que position absolue avec le texte html

est Ci-dessous le modèle

<template name="welcome"> 
<html> 
<head> 

</head> 
<body style="font-family: 'Roboto Slab', serif;"> 
<div class='container-fluid'> 
    <img src="http://qa.couchfashion.com/images/mailer.png" style=" position: relative;width: 100%;left: 0;"> 

    <div style="top: -44px;position: absolute;z-index: 999999;"> 
     <div class='mailer-name text-center' > 
      <h3 style=" font-size: 80px;"> Hey {{receiverName}} </h3> 
     </div> 
     <div class="mailer-content" style="margin-top: 120px; 
      text-align: center; 
      text-align: justify; 
      padding-left: 10%; 
      padding-right: 10%;"> 
      <h1 class="text-center"> Welcome to the COUCH </h1> 
      <hr> 
      <h3 class="text-center"> How To use Couch? </h3> 
      <h2 class="text-center"> STEP 1 </h2> 
      <h3 class="text-center"> Browse Products &amp; Articles </h3> 
      <p>Congratulations ladies! You've successfully made it to the first step of Couch. THis step is the 
       easiest 
       step. We are sure you will have great time browsing through our products and articles as we get you 
       the 
       best of them. We make sure best gets the best! </p> 

      <h2 class="text-center"> STEP 2 </h2> 
      <h3 class="text-center"> Collect things you Love </h3> 
      <p> 
       Hello again! So here we are on the second step. Well this is easy too. You just have to click on the 
       love 
       button to collect your favourite products and articles there. And there you go. You have your very 
       own 
       personalized collection. Woo-Hoo! 
      </p> 


      <h2 class="text-center"> STEP 3 </h2> 
      <h3 class="text-center"> Get Appreciation </h3> 
      <p>This is the best step. It will help you flaunt your beautiful talents ladies! People can see your 
       closet 
       and have a glance at your choice. Isn't that cool? You can promote your style and make it popular. 
       Let's 
       get started ladies!</p> 
      <h3 class="text-center"> Thanks for signing up </h3> 
      <h3 class="text-center"> All the Love &amp; Regards </h3> 
      <h4 class="text-center"> Team COUCH </h4> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Source

2017-04-14 Nishant Singh

** 1. ** Vous ne pouvez pas utiliser [position: absolute] (http://blog.rebelmail.com/absolute-positioning-in-email/) dans les courriels. ** 2. ** Vous devriez (re) chercher avant de demander. ** 3. ** (Re) La recherche prend généralement moins de poster la question sur [so] et vous donne également une indépendance complète. ** 4. ** (Re) La recherche vous rend souvent meilleur, donc plus rapide et plus efficace. ** 5. ** Montrer ce que vous avez trouvé dans votre (re) recherche entraîne généralement des questions de qualité améliorées. ** 6. ** Ne pas montrer ce que vous avez (re) cherché dans votre question fait croire aux gens que vous n'avez pas (re) cherché du tout, même quand vous avez. –

CSS position est pas pris en charge dans la plupart des clients de messagerie (à la fois relative et absolute). La meilleure façon d'y parvenir est en faisant l'image une image de fond:

<table role="presentation" aria-hidden="true" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container"> 
    <tr> 
     <td background="http://qa.couchfashion.com/images/mailer.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;"> 
      <div> 
       <table role="presentation" aria-hidden="true" align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
        <tr> 
         <td valign="middle" style="text-align: center; padding: 15%ont-family: sans-serif; font-size: 15px;"> 

          >> Place your text layout in tables instead of divs << 

         </td> 
        </tr> 
       </table> 
      </div> 
     </td> 
    </tr> 
</table>

Il est également encore plus sûr d'utiliser <table> s au lieu de <div> s pour le courrier électronique, à moins que Gmail est le seul client que vous devez soutenir.

Source

2017-04-17 11:46:07

Ted a raison de dire que table est le moyen de structurer le courrier électronique HTML. Sa solution est supposée fonctionner correctement. La raison pour laquelle vous utilisez des tables au lieu de div s est que les moteurs de rendu ont un support limité pour de nombreuses propriétés dans div s. Par exemple. Word Outlook ne prennent pas en charge width et padding sur div éléments sans lesquels il est impossible de définir des dispositions. Cependant, ces propriétés sont bien supportées par les éléments td. C'est pourquoi nous devons utiliser des tables.

Si vous allez sur l'utilisation de cette méthode, il y a quelques bonnes pratiques que vous devez également suivre:

Réglez le cellpadding="0" et cellspacing="0" pour éviter espacements non prévu par certains clients.
Utilisez une seule classe pour un élément HTML. Si vous utilisez plusieurs, seul le premier sera appliqué.
Ne pas utiliser des sélecteurs complexes CSS (par exemple, cela ne fonctionnera pas dans Outlooks base Word:.. .bg-brown td { ### CSS ### } Vous devez en tenir à des définitions de classe simples
Enfin, les images de fond ne fonctionnent que dans Outlooks basé __gVirt_NP_NN_NNPS<__ de mots dans td éléments. , lorsque vous les appliquez avec VML.

Le code ci-dessous est un exemple pour les images de fond avec le texte devant nous utilisons dans notre tutorial about background images.

<table cellpadding="0" cellspacing="0" border="0" width="100%" 
     style="width:100%;min-height:50px; height:50px;border: ### 
     BORDER PROPERTIES ###" background="### SRC of BACKGROUND 
     IMAGE ###"> 
     <tr> 
      <td style="### FONT PROPERTIES ###"> 
      <!--[if gte mso 9]> 
      <v:rect style="width:540px;height:50px;" 
       strokecolor="none"> 
      <v:fill type="tile" color="#363636" 
       src="### SRC of BACKGROUND IMAGE ###" /></v:fill> 
      </v:rect> 
      <v:shape id="NameHere" 
       style="position:absolute;width:540px;height:50px;"> 
      <![endif]--> 
       <p>table background="...." + vml fixed width background</p> 
      <!--[if gte mso 9]> 
      </v:shape> 
      <![endif]--> 
     </td> 
     </tr> 
    </table>

Malheureusement, le positionnement ne sont pas couverts, b Cela peut aider à éviter certains pièges. Vous pouvez utiliser l'outil d'arrière-plan de Campaign Monitor pour générer le code VML ou le créer vous-même, en fonction des didacticiels correspondants.

Source

2017-04-24 13:31:27

Comment envoyer une image à envoyer en tant que position absolue avec le texte html

Répondre

Questions connexes