Déplacer le bouton sans affecter les éléments css ci-dessus dans un tableau

J'essaie de créer un modèle d'e-mail afin que je fasse la chose dans la table uniquement et en ligne CSS. Le problème que je suis confronté avec le style est que je ne suis pas en mesure de déplacer le bouton 40px vers le bas le texte You are a .... some task. sans affecter les 2 <tr> s ci-dessus. J'ai appliqué height à tr via css en ligne mais de toute façon il ne prend pas la hauteur. J'ai aussi essayé de régler la marge, le rembourrage au dernier tr, td mais pas de chance. Faites-moi savoir comment je pourrais y parvenir sans affecter les hauteurs de plus de 2 tr, tds ou une meilleure façon de gérer cela.Déplacer le bouton sans affecter les éléments css ci-dessus dans un tableau

Fiddle - https://jsfiddle.net/qd00shr3/

Code -

<body style="background: #2D2D2D; font-family: arial;"> 
    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="background: green;height: 320px;"> 
     <tr> 
      <td style="text-align: center;"> 
       <img src="http://dummyimage.com/600x400/008000/fff.png" style="width:100px;height:100px;" /> 
      </td> 
     </tr> 
     <tr> 
      <td style="text-align: center;"> 
       <h2 style="margin-top: -55px;color: #ffffff;padding: 0 68px 0 60px;font-weight: normal;font-size: 32px;">You are a good developer waiting for some task.</h2> 
      </td> 
     </tr> 
     <tr style="height: 100px;"> 
      <td style="text-align: center;"> 
       <button style="background: #ff744f; border:none; width: 210px; height: 45px; text-align:center;color: #ffffff;border-radius: 5px;">Check Task</button> 
      </td> 
     </tr> 
    </table> 
    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="background: #ffffff;height: 134px;"> 
     <tr> 
      <td> 
       <p style="font-size: 11px;color: #16325c; text-align: justify;padding: 0 30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. anim id est laborum. 
      </td> 
     </tr> 
    </table> 
</body>

Source

2015-10-27 Tech Solvr

Vous souhaitez déplacer le bouton vers le haut ou vers le bas? Je suis confus –

@FlorinPop Voulez-vous déplacer le bouton, clairement mentionné dans le titre. –

Je ne suis pas sûr que je comprends correctement ... Ceci déplacera votre boutonner:

position:relative;top:-40px;

Source

2015-10-27 18:53:20

Impressionnant .. beaucoup beaucoup :) c'est ce dont j'ai besoin :) –

Que voulez-vous dire you are not able to move the button 40px down the text? Précisez s'il vous plaît.

(désolé que ce soit une « réponse », mais apparemment je ne peux pas commenter sans 50 rep)

Source

2015-10-27 18:25:56 AMACB

En ce qui concerne le texte, il devrait être vers le bas, mais en regardant une fois le bouton devrait être en hausse –

Déplacer le bouton sans affecter les éléments css ci-dessus dans un tableau

Répondre

Questions connexes