#html-table #width #html-email
#html-таблица #ширина #html-электронная почта
Вопрос:
Я пытаюсь создать что-то вроде информационного бюллетеня, и этот кусок бычьих испражнений не будет оставаться той ширины, которую я указываю. Я уже установил ширину в 100 разных местах, и всякий раз, когда я просматриваю ее в Outlook, она полностью растягивается до бесконечности.
Здесь у меня есть фрагмент кода «width: 100%», но он находится внутри главного div, а главный div четко определяет ширину, поэтому дочерний элемент должен соответствовать этому размеру при установке его равным 100%. Должно быть относительно родительского элемента.
Это сводит меня с ума. В довершение всего я редактирую это в Joomla 1.5, что, по-видимому, раздражает, как dgwergh. Это даже не позволяет мне создать раздел стилей, и я не могу придумать другого бесплатного способа редактировать и отправлять html-рассылки тысячам людей, бесплатно представляя статистику.
И обновление его до egewg раздражает, потому что сначала мне нужно протестировать его в другом домене, которого у меня нет.
Вот мой код:
<div style="font-family: century gothic;" align="center">
<table style="width: 600px; background-color: #ffffff; display: block;" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tbody>
<tr>
<td rowspan="1" colspan="1" align="center" valign="top">
<table style="width: 600px; height: 0px;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="line-height: 0px;">
<td>
<table style="margin-top: 0;">
<tbody>
<tr style="line-height: 0px;">
<td style="line-height: 0px; height: 83px; margin-top: 0; width: 600px;"><img src="" alt="SEMINARIO-header-14julho2014" width="100%" height="auto" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color: #fff; padding: 2px; width: 600px;" rowspan="1" colspan="1" align="left" valign="top" bgcolor="#000000">
<table style="width: 100%; vertical-align: middle;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0px; width: 600px;" rowspan="1" colspan="1" align="left" valign="top" width="600"></td>
</tr>
<tr>
<td style="background-color: #ffffff; width: 600px;" rowspan="1" colspan="1" align="left" valign="top" bgcolor="#FFFFFF" width="600">
<table style="display: table; width: 100%; font-family: century gothic; vertical-align: middle;" cellspacing="0" cellpadding="3" bgcolor="#888888">
<tbody>
<tr>
<td style="width: 600px; text-align: center; font-family: century gothic; color: #ffffff; vertical-align: middle;" rowspan="1" colspan="1" align="center" valign="top">
<div style="font-family: century gothic; vertical-align: middle;">
<div style="font-family: century gothic; vertical-align: middle;">
<div style="font-family: century gothic; vertical-align: middle;"><span style="font-family: 'century gothic'; font-size: 16pt;"><br /></span></div>
<div style="font-family: century gothic; vertical-align: middle;"><span style="font-family: 'century gothic'; font-size: 16pt;">SEMINÁRIO</span></div>
<p style="font-family: century gothic; font-size: 18pt; color: #eaeff4;"><strong style="color: #ffffff; background-color: transparent;">BIM amp;amp; MODELAÇÃO DE ESTRUTURAS</strong><span style="color: #ffffff; font-size: 14pt; background-color: transparent;"><strong>amp;nbsp;</strong></span><span style="font-size: 16pt; color: #ffffff; background-color: transparent;">amp;nbsp;</span></p>
<p><span style="font-size: 10pt;"> | 14 de Julho de 2014 | 15h30 - 18h30</span></p>
</div>
<div><span style="font-size: 14pt;">amp;nbsp;amp;nbsp;</span></div>
</div>
</td>
</tr>
</tbody>
</table>
<table style="display: table; width: 100%; background-color: #efefef; font-family: century gothic; size: 8pt;" cellspacing="6" cellpadding="1">
<tbody>
<tr>
<td style="width: 600px; text-align: left; color: #000000;" rowspan="1" colspan="1" align="left" valign="top">
<div style="color: #000; font-size: 10.8pt; font-family: century gothic; text-align: justify; padding: 10px;" align="justify">
<p>Caro projectista/engenheiro,<br /><br /> <br />A convida-o a assitir e participar no seminário gratuito de BIM amp;amp; Modelação de Estruturas no dia 14 de Julho, dedicado especialmente a projectistas e engenheiros, cuja preocupação é resolver a crescente necessidade de eficiência no projecto de estruturas, mantendo um elevado controlo nos procedimentos de cálculo e dimensionamento estrutural.</p>
<p>Contamos com uma participação muito significativa de pessoas que utilizam no seu dia-a-dia aplicações de modelação e cálculo de estruturas da CSI, mas também de outras empresas igualmente prestigiadas do mesmo sector. Sabemos que os softwares de cálculo estrutural progridem dia após dia, mas no entanto, muitos engenheiros e projectistas não sentem que isso reflicta directamente em acréscimo de produtividade e eficácia do trabalho.</p>
<p>Gostaríamos de poder contar com a sua presença no seminário, para lhe apresentar as nossas poderosas ferramentas de cálculo, de uso intuitivo e eficaz, as quais acreditamos ser do seu interesse.</p>
<p>As inscrições no seminário BIM amp;amp; Modelação de Estruturas, a ter lugar na Universidade Lusófona do Porto, ainda estão abertas. Gostaríamos de renovar o nosso convite (caso ainda não tenha feito a inscrição), porque acreditamos que no fim, irá dar por bem investido o seu tempo. Pedimos-lhe esse tempo na certeza de que, independentemente dos programas que use, ficará com uma ideia sólida sobre as valências actuais da oferta de software de uma das empresas líderes mundiais em modelação e cálculo estrutural.</p>
<p>Assim, reenviamos o link com o programa do seminário, na expectativa de o encontrar presente neste grande evento, que irá reunir vários projectistas e engenheiros.</p>
</div>
<div style="font-family: century gothic; text-align: justify;" align="justify">amp;nbsp;</div>
amp;nbsp;
<div style="text-align: center;" align="center">amp;nbsp;</div>
<div style="text-align: center;" align="center">amp;nbsp;</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 100%;">
<table style="background-color: #507d90;">
<tbody>
<tr style="padding-bottom: 0px;">
<td style="width: 210px; height: 60px; padding-left: 5px;"><img src="" alt="csi logo" width="140" /></td>
<td style="width: 435px; height: 60px; text-align: right; color: #fff; font-weight: bold; font-size: 7pt;">
<p style="font-family: century gothic; padding-right: 5px;"><br />T: <br />E: <br />W:
</tr>
<tr>
<td style="text-justify: justify; line-height: 11px; font-family: century gothic; width: 640; padding-bottom: 20px; padding-left: 30px; padding-right: 25px; font-size: 7pt; color: #fff;" colspan="2">
<hr />
A mensagem que acabou de receber é um e-mail informativo da CSI Portugal, não devendo ser considerado como SPAM. De acordo com o Artº. 22 do Decreto lei 7/2004 de 7 de Janeiro, se o seu registo foi incluído na nossa lista de envio por erro ou se pretender simplesmente ser removido da mesma, por favor clique {unsubscribe}aqui{/unsubscribe}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Комментарии:
1. Не уверен, потому что не тестировал, но попробуйте использовать html атрибут width (width = «640» в вашем случае, да, без пикселей)
Ответ №1:
Удалите все, что width: 100% у вас есть в вашем коде. Я попробовал это в Outlook, и он отобразил блок шириной 600 пикселей в середине письма, который, я полагаю, является результатом, которого вы хотите достичь.
Кроме того, в ширине вашего нижнего колонтитула отсутствует единица измерения : я это исправил width: 640px .
Смотрите http://jsfiddle.net/w6rHj / за небольшие изменения.
Ответ №2:
Этот код работает у меня, когда я копирую и вставляю его в Outlook (я предполагаю, что вы имеете в виду переименованный Hotmail, а не Outlook Express).
Несколько советов по исправлению ошибок
- Попробуйте отправить его без использования Joomla, чтобы узнать, является ли проблема причиной Joomla или Outlook.
- Попробуйте проверить css элемента wide в Firebug, чтобы увидеть, какие стили он наследует. Стили Outlook могут переопределять ваши стили. Firebug также позволяет отключать стили до тех пор, пока вы не сможете определить проблемный.
- Просмотрите источник электронного письма, когда оно находится в Outlook, и посмотрите, отличается ли оно — изменилось ли оно каким-либо образом.
Кроме того, вы не закрыли свой div, окружающий таблицу в примере выше. Однако сомневаюсь, что это могло бы вызвать это.