Html NewsLetter에서 이미지를 절대적으로 배치

내 html 뉴스 레터의 주 이미지가 있습니다. 특정 위치의 주 이미지 위에 5 개의 이미지 (이미지 단추)를 배치하려고합니다. 만약 내가 절대적으로 그것들을 위치 시키면, 웹 브라우저에 표시 할 때, HTML 페이지를 전자 메일 (Outlook)에 삽입하자마자 이미지가 옆으로 던져진다.Html NewsLetter에서 이미지를 절대적으로 배치

html 뉴스 레터의 경우 가장 좋은 방법은 무엇입니까?

모든 조언을 주시면 감사하겠습니다.

출처

2013-02-21 user1475479

또 다른 옵션은 하나의 큰 이미지를 사용하고 image maps을 사용하는 것입니다.하지만 많은 구독자가 이미지를 켜지는 것이 아니므로 전자 메일은 좋지 않습니다.이 경우 전자 메일은 비어 있으며 사용자의 전자 메일은 보이지 않습니다. 버튼.

가장 좋은 해결책은 큰 이미지를 작은 이미지로 나누고 테이블에 레이아웃하는 것입니다. 그렇게하면 각 이미지에 대해 alt 태그를 할당 할 수 있으므로 구독자가 이미지를로드하지 않으면 여전히 이미지 구조가 유지되고 사람들은 무엇이 무엇이고 어디서 클릭해야하는지 여전히 알 수 있습니다. 주 - display : block을 추가하는 것이 매우 중요합니다. 테이블 셀에 혼자있을 때마다 이미지에 표시됩니다.

@lukeocom - 예를 들어 몇 가지 문제가 있는데 답장을 편집하는 대신 아래에 다시 작성합니다. 이미지에 모두 style="display:block;"이 있어야하며 너비와 높이를 픽셀 단위로 설정하는 것이 좋습니다. 또한 모든 색상을 6 자리 16 진수 코드로 선언해야하며 html 선언에서 px를 포함 할 필요가 없습니다 (CSS에만 필요함).

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#959595"> 
<tr> 
    <td colspan="3" width="600" bgcolor="#757575"> 
     <a href=""><img src="yourHeader.png" alt="Header" style="margin: 0; border: 0; padding: 0; display: block;" height="100" width="600"></a> 
    </td> 
</tr> 
<tr> 
    <td width="50" style="vertical-align: top;background-color:#555555;"> 
     <a href=""><img src="sideBars.png" style="margin: 0; border: 0; padding: 0; display: block;" alt="" height="200" width="50"></a> 
    </td> 
    <td width="500" valign="top" style="padding:20px;"> 
     <font style="font-family: Century Gothic, Avant Garde, sans-serif; font-size: 14px; color: #000000;"> 
     PUT YOUR CONTENT HERE 
     </font> 
    </td> 
    <td width="50" style="vertical-align: top;background-color:#555555;"> 
     <a href=""><img src="sideBars.png" style="margin: 0; border: 0; padding: 0; display: block;" alt="" height="200" width="50"></a> 
    </td> 
</tr> 
<tr> 
    <td colspan="3"> 
     <a href=""><img src="yourFooter.png" alt="Footer" style="margin: 0; border: 0; padding: 0; display: block;" height="100" width="600"></a> 
    </td> 
</tr>

당신이 모든 일이에, 플로트를 중심으로 포장하려는 경우 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title> 
    <style type="text/css">   
    /* Client-specific Styles */ 
    #outlook a {padding:0;} 
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */ 
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */ 
    #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;} 
    table td {border-collapse: collapse;} 
    </style> 
</head> 
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding:30px;"> 

PUT THE ABOVE TABLE IN HERE 

</td></tr></table></td></tr></table></body></html>

을 나는 HTML 대신 XHTML의 엄격한하지만이 같은 뺀 자기 닫는 IMG 작동 사용 태그.

출처

2013-02-22 14:24:09 John

VML은 패턴 이미지에만 사용됩니다. 틀렸습니까? 조경 이미지와 그 위의 캡션 텍스트는 어떻습니까? – Tilt

@ 기울기 이미지의 크기에 따라 다릅니다. 테이블 셀만큼 크면 반복 할 필요가 없습니다. 그러나 그렇습니다, 그것은 바둑판 식으로 배열 된 이미지입니다. – John

필자는 지난 주 한 통의 이메일을 보냈다. html 이메일에 대한 최상의 접근 방식이 표 레이아웃을 사용하는 것임을 알았습니다. 전자 메일에는 사용할 수없는 태그가 많이 있습니다. 그리고 이메일 클라이언트별로 다르게 렌더링되는 것들이 많이 있습니다. 아웃룩이 가장 싫어!

사용중인 이미지에 링크가 없다면 Photoshop을 사용하여 머리글 및 바닥 글 배너를 만든 다음 테이블 레이아웃을 사용하여 표시하십시오. 때로는 id 나 클래스 이름을 지원하지 않기 때문에 인라인 스타일을 사용하십시오.

|header image| 
|side bar image(optional) | content (can use another table here) | side bar image|(optional) 
|footer image|

을 heres 임시 ..

<table style="font-size:10pt;background-color: #fff; width:600px;max-width:600px;overflow:hidden; margin: 0px auto; padding: 0px;border-collapse:collapse;border:0;"> 
    <tr> 
     <td colspan="3" width="600px"> 
      <img src="yourHeader.png" alt="" style="vertical-align:bottom;" height="100%" 
      width="100%" /> 
     </td> 
    </tr> 
    <tr> 
     <td width="50px" style="vertical-align: top;background-color:#fff;"> 
      <img src="sideBars.png" alt="" height="100%" width="100%" /> 
     </td> 
     <td width="500px" style="background-color:#fff;padding-left:20px;padding-right:20px;">PUT YOUR CONTENT HERE</td> 
     <td width="50px" style="vertical-align: top;background-color:#333399;"> 
      <img src="sideBars.png" alt="right image" height="100%" width="100%" /> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
      <img src="yourFooter.png" alt="Bottom banner image" style="vertical-align:top;" 
      height="100%" width="100%" /> 
     </td> 
    </tr> 
</table>

일부 추가 읽기 ...

: 그것의 더 나은

행에 의해 예를 들어 테이블 레이아웃이 될 것 ... 안전합니다 Outlook CSS 및 태그 지원 - http://msdn.microsoft.com/en-us/library/aa338201.aspx

일반 html 이메일 정보 -이 도움이 27,973,138,

희망 ... 당신은 배경 이미지를 만들 수 VML를 사용하고 내가 아래에있는 예와 같이 표준 테이블 레이아웃을 사용하여 상단에 이미지 버튼을 넣을 수 있습니다 user1475479 @

출처

2013-02-22 01:08:47 lukeocom

답장을 보내 주셔서 감사합니다. @lukeocom, 불행히도 이미지 버튼에는 링크가 있습니다. 이것이 어떻게 지원을하지 않는 것이 미친 것처럼 보이는지, 확실하게 이것을 할 수있는 방법이 있어야만합니까 ?? – user1475479

당신은 이미지 맵을 사용해 볼 수 있습니다, 나는 그것이 지원된다고 생각합니다. 당신은 기본적으로 1998 년에 돌아온 척하고 position :이나 background-image와 같은 거의 모든 유용한 CSS 규칙이 지원되지 않기 때문에 개발해야합니다. 그러나 가장 좋은 방법은 표를 사용하는 것입니다. 각 이미지를 셀에 넣고 단색의 배경색 만 사용하십시오. 쉬운 방법을 찾으면 이드가 듣기 좋다. – lukeocom

@ user1475479 위의 대답에 대한 답변보기 : 이미지 링크 – John

Html NewsLetter에서 이미지를 절대적으로 배치

답변

관련 문제