電子メールのHTML - CSSの位置の変更が機能しない

Question

これは私の初めての電子メール用のHTMLコーディングです。私は、私を導くためのチュートリアルを見ましたが、私はそれを修正する方法がわからないという問題があります。基本的に。すべてのコードは<table>の内部にあります。ページの最後には、フッターも<table>です。しかし、それは、私は結果がメール内常にこの位置のためのCSS値をどのように変化するかは問題ではありません。

問題は、このコードである：

<tr> 
    <table id="footer" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="background-color: #fe3a35; opacity: 0.9"> 
    <tr> 
     <td valign="top" align="center"> 
     <p style="font-family: 'Arial'; font-size: 16px; font-weight: 300; text-align: center; position: relative; left: -163px; top: 35px; line-height: 2px; color: white;">&reg; Someone, somewhere 2013</p> 
     <p style="font-family: 'Arial'; text-align: center; font-weight: 300;position: relative; left: -132px; top: 25px;ine-height: 2px; color: white;"><a href="" style="font-family: 'Arial'; color: white;">Unsubscribe</a> to this newsletter instantly</p> 
     <a href="https://twitter.com/realdonaldtrump" target="_blank" style="position: relative; left: 220px; top: -25px;"><img src="https://i.imgur.com/bgssIwP.png" width="30"></a> 
     <a href="https://www.facebook.com/gustavo.olegario" target="_blank" style="position: relative; left: 220px; top: -25px;"><img src="https://i.imgur.com/JQ19LU9.png" width="30"></a> 
     </td> 
    </tr> 
    </table> 
</tr> 

私は何だろう実際には、真ん中のtwitterとfacebookへの文字を近似することです。

Answer 1

電子メールの基本は、開始したとおりにテーブルに表示されます。あなたのコードを修正しましたので、今はすべての電子メールクライアントで動作するはずです。

修正アップ：

• は若干のパディングを使用して、ソーシャルメディアのアイコンのテーブルを追加
• 取り出し位置CSS
• 画像が表示ブロック

<table id="footer" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="background-color: #fe3a35; opacity: 0.9"> 
 
    <tr> 
 
     <td valign="top" align="center"style="font-family: 'Arial'; font-size: 16px; font-weight: 300; text-align: center;color: white;padding:10px 0px;">&reg; Someone, somewhere 2013</td> 
 
    </tr> 
 
    <tr> 
 
     <td valign="top" align="center" style="font-family: 'Arial'; text-align: center; font-weight: 300; color: white;padding:5px 0px 10px 0px;"><a href="" style="font-family: 'Arial'; color: white;">Unsubscribe</a> to this newsletter instantly</td> 
 
    </tr> 
 
    <tr> 
 
     <td valign="top" align="center"> 
 
\t \t 
 
    <table border="0" align="center" cellspacing="0" cellpadding="0">  
 
    <tbody> 
 
    <tr> 
 
     <td style="padding-right:5px;"><a href="https://twitter.com/realdonaldtrump" target="_blank" style=""><img src="https://i.imgur.com/bgssIwP.png" width="30" style="display:block;"></a></td> 
 
     <td style="padding-left:5px;"><a href="https://www.facebook.com/gustavo.olegario" target="_blank" style=""><img src="https://i.imgur.com/JQ19LU9.png" width="30" style="display:block;"></a> 
 
\t \t </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

を持つべきです

これがあなたの後の解決策であるかどうか教えてください。

乾杯