전자 메일 용 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 링크에 문자를 approximatte하는 것입니다.

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>

을 표시 블록을 가져야한다 약간의 패딩 소셜 미디어 아이콘에 대한 테이블을 추가

이것이 해결책 이었는지 알려주세요.

건배