2012-11-14 36 views
3

我爲我父親的公司創建一個HTML頁腳有一個很大的問題。他們正在使用OE和Outlook 10.我已經在代碼上工作了很長時間,但仍然存在一些問題。我可以使用外部字體嗎?我應該如何使它工作?如何用寬度定位它:X%?Outlook腳本+ HTML + CSS - 如何做到這一點,它會工作?

我想它看起來就像這樣:

enter image description here

但事實並非如此......

下面的代碼:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>www.k#$#$#$#$#$#$#$.com</title> 
<style> 

@font-face { 
    font-family: times_Sans_Serif; 
    src: url('http://a#$#$#$#$#$#$#$.pl/tem/TIMESS_.ttf'); 
} 

p, a, span { 
    font-family: times_Sans_Serif; 
} 

a { 
    text-decoration:none; 
} 


.header { 
    width:100%; 
    height:5px; 
    display:block; 
    background-color:#6d5759; 
} 

.section li{ 
    float: left; 
    display: inline; 
    list-style-type: none; 
    margin:0% 3%; 
    padding:0; 
    position:relative; 
} 

.section p{ 
    display:block; 
    text-align: left; 
    color:#6d5759; 
} 



.section a{ 
    color: #6d5759; 
} 

#logo { 
    text-decoration:none; 
    text-align: right; 

} 

.footer { 
    clear:both; 
    font-size:11px; 
    width:100%; 
    height:auto; 
    display:block; 
    background-color:#6d5759; 
    color:#FFF; 
    text-align:center; 
    padding: 5px; 
} 

.footer a{ 
    color:#FFF; 
} 

</style> 
</head> 

<body> 
<div class="main"> 
    <div class="header"></div> 

    <ul class="section"> 

     <li id="osoba"> 
       <p> 
<a href="http://k#$#$#$#$#$#$#$.com/o-nas" target="_blank">Marcjusz K#$#$#$#$#$#$#$</a><br> 
       +48 500 000 000<br> 
       [email protected]#$#$#$#$#$#$#$.com 
       </p> 
     </li> 

     <li id="logo"> 
      <a href="http://k#$#$#$#$#$#$#$.com/" target="_blank"><img src="http://#$#$#$#$#$#$#$.pl/tem/image001.png"></a> 
     </li> 


    </ul> 

    <div class="footer"> 
     <span> K#$#$#$#$#$#$#$ Ubezpieczenia Sp.J. &nbsp;|&nbsp; 31-475 Kraków ul. STREET1 &nbsp;|&nbsp; 32-700 Bochnia ul. STREET2 &nbsp;|&nbsp; 32-800 Brzesko ul. STREET 3 &nbsp;|&nbsp; <a href="http://k#$#$#$#$#$#$#$.com/" target="_blank">www.kr#$#$#$#$#$#$#$.com</a></span> 
    </div> 

</div> 
</body> 
</html> 

你能幫我那?我會非常樂於助人!

回答

2

樣式表不被大多數郵件客戶端支持。一些內聯樣式是允許的。通常不支持定位,以防止電子郵件逃離他們的容器 - 想象一個電子郵件試圖欺騙Gmail菜單或類似的東西。

一般:

  • 使用表格佈局
  • 使用內嵌樣式

對於一個好的公會支持什麼,請參閱:

http://www.campaignmonitor.com/css/

+0

好吧!我之前看過那個頁面,但是我不知道它也僅適用於內聯樣式。感謝您的幫助 - 我會再次嘗試。天真我是,試着這樣。 :) 謝謝! – Aleksander

+0

是的,HTML電子郵件是他們自己的一個宇宙。這就像重新編碼1999年一樣。 –

1

電子郵件很奇怪,你幾乎需要使用10年以來的html a去使它正常工作。很多客戶端將頭部中的大部分東西(包括實際的身體標籤)都去掉了。這包括Gmail,雅虎,Hotmail等。他們只保留某些東西。有些保留樣式,但不是全部。

我建議你遠離頭部移動你的風格和使用style =「」屬性內聯它們的標籤內,並使用表(回想一下上世紀90年代)

所以你可能有這樣的事情:

<table width="100%"> 
<tr> 
    <td id="osoba" style="">..Osoba...<td> 
    <td id="logo" style="">..logo..</td> 
</tr> 
<tr> 
    <td id="footer" style="">...footer...</td> 
</tr> 
</table> 

請注意:爲了說明的目的,我將id放在那裏,但由於我們刪除了id,所以不需要。

+0

好的!感謝您的幫助 - 我會再次嘗試。天真我是,試着這樣。 :) 謝謝! – Aleksander

0

我已經做到了!它看起來像我想要的。 ;)使用表格進行佈局對我來說是一種精神上的痛苦,但它起作用! ; P感謝您的幫助!

這是任何人的代碼誰也有類似的問題:

<html> 
<head> 
<meta charset="utf-8"> 
<title>www.#¤#¤#¤#¤#¤#¤#¤#¤#.com</title> 


</head> 

<body> 
<table width="100%" align="center"> 
    <tr> 
     <td colspan="4" style="width:100%; height:5px; background-color:#818285"></td> 
    </tr> 

    <tr style="color: #818285;" align="center"> 

     <td width="20%"></td> 
     <td align="right" width="24%"> 
       <div style="text-align:left; width:180px; right:0%; color:#818285;"> 

       <a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/o-nas" target="_blank">Marcjusz K#¤#¤#¤#¤#¤#¤#¤#¤#</a><br> 
       +48 500 000 000<br> 
       <a style="color:#818285; text-decoration:none;" href="mailto:[email protected]#¤#¤#¤#¤#¤#¤#¤#¤#.com">[email protected]#¤#¤#¤#¤#¤#¤#¤#¤#.com</a> 
       </div> 

     </td>  

     <td align="center" width="4%" style="font-size:2em; color:#818285;"></td> 

     <td align="left" width="52%"> 
      <a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/" target="_blank"><img src="http://#¤#¤#¤#¤#¤#¤#¤#¤#.pl/tem/logo-poziom300.jpg"></a> 
     </td> 

    </tr> 


    <tr><td colspan="4" style="font-size:11px; background-color:#818285; color:#FFF; text-align:center; padding: 5px; "> 
     <span> K#$#$#$#$#$#$#$# Ubezpieczenia Sp.J. &nbsp;|&nbsp; 31-475 Kraków ul. STREET 6a &nbsp;|&nbsp; 32-700 Bochnia ul. STREET 14 &nbsp;|&nbsp; 32-800 Brzesko ul. STREET 3 &nbsp;|&nbsp; <a style="color:#FFF; text-decoration:none;" href="http://k#$#$#$#$#$#$#$#$#.com/" target="_blank">www.k#$#$#$#$#$#$#$#.com</a></span> 
    </td></tr> 
</table> 

</body> 
</html> 
相關問題