PDA

Просмотр полной версии : Надо помощь с созданием HTML письма)

8tomat8
17.02.2012, 13:13
В общем необходимо для компании создать шаблон для отправки писем. Нарисовал макет, порезал и давай его верстать. Вроде все расставил в таблице по местам и все по размерам подходит, но не могу убрать промежутки меджу картинками, что бы они смотрелись слитно.

Вот как оно должно выглядеть и как поделено
http://s.qip.ru/3009XWY.jpg

А вот так получается)
http://s.qip.ru/1009XXo.jpg


Вот код
<table width="637" border="0">
<tr>
<td width="631"><table width="628" border="0">
<tr>
<td width="625" height="17"><img src="01.gif" width="628" height="15"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="27"><table width="634" border="0">
<tr>
<td width="223" height="48"><img src="02.gif" width="223" height="46"></td>
<td width="380">&nbsp;</td>
<td width="17"><img src="04.gif" width="17" height="46"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="634" border="0">
<tr>
<td width="172"><img src="05.gif" width="172" height="59"></td>
<td width="431">&nbsp;</td>
<td width="17"><img src="07.gif" width="17" height="59"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="634" border="0">
<tr>
<td width="67"><img src="08.gif" width="67" height="52"></td>
<td width="536">&nbsp;</td>
<td width="17"><img src="10.gif" width="17" height="52"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="634" border="0">
<tr>
<td width="17"><img src="11.gif" width="17" height="376"></td>
<td width="586">&nbsp;</td>
<td width="17"><img src="13.gif" width="17" height="376"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="27"><table width="634" border="0">
<tr>
<td width="17"><img src="14.gif" width="17" height="10"></td>
<td width="575">&nbsp;</td>
<td width="28"><img src="16.gif" width="28" height="10"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="634" border="0">
<tr>
<td width="17" height="21"><img src="17.gif" width="17" height="13"></td>
<td width="406">&nbsp;</td>
<td width="197"><img src="19.gif" width="197" height="13"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="628" border="0">
<tr>
<td><img src="23.gif" width="628" height="17"></td>
</tr>
</table></td>
</tr>
</table>



Может кто знает что я не так делаю? :)
Morfik
17.02.2012, 13:31
http://seodon.ru/primery/html-css/obshhaja-verstka/kak-ubrat-otstupy-html-elementa.php
8tomat8
17.02.2012, 15:15
http://seodon.ru/primery/html-css/obshhaja-verstka/kak-ubrat-otstupy-html-elementa.php

Теперь код выглядит так, но ничего не поменялось... еще варианты? :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
}
table {
border: 0px #000 solid; /* рамка вокруг таблиц */
border-spacing: 0;
border-collapse:collapse;
}
td {
border: 0px #000 solid; /* рамка вокруг ячеек */
border-spacing: 0;
border-collapse:collapse;
}
</style>

</head>
<td width="631"><table width="628" border="0">
<tr>
<td width="625" height="17"><img src="01.gif" width="628" height="15"></td>
</tr>
</table></td>
<tr>
<td height="27"><table width="634" border="0">
<tr>
<td width="223" height="48"><img src="h02.gif" width="223" height="46"></td>
<td width="380">&nbsp;</td>
<td width="17"><img src="04.gif" width="17" height="46"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="634" border="0" >
<tr>
<td width="172" height="61"><img src="05.gif" width="172" height="59"></td>
<td width="431">&nbsp;</td>
<td width="17"><img src="07.gif" width="17" height="59"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="634" border="0">
<tr>
<td width="67"><img src="08.gif" width="67" height="52"></td>
<td width="536">&nbsp;</td>
<td width="17"><img src="10.gif" width="17" height="52"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="634" border="0">
<tr>
<td width="17"><img src="11.gif" width="17" height="376"></td>
<td width="586">&nbsp;</td>
<td width="17"><img src="13.gif" width="17" height="376"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="27"><table width="634" border="0">
<tr>
<td width="17" height="21"><img src="14.gif" width="17" height="10"></td>
<td width="575">&nbsp;</td>
<td width="28"><img src="16.gif" width="28" height="10"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="634" height="13" border="0">
<tr>
<td width="17" height="13"><img src="17.gif" width="17" height="13"></td>
<td width="406" height="13">&nbsp;</td>
<td width="197" height="13"><img src="19.gif" width="197" height="13"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="628" border="0">
<tr>
<td><img src="23.gif" width="628" height="17"></td>
</tr>
</table></td>
</head>
</html>
TopBox
17.02.2012, 15:19
ну вот например
<td width="625" height="17"><img src="01.gif" width="628" height="15"></td>
высота ячейки 17, высота картинки 15, понятное дело 2 пикселя промежуток.
попробуй просто убрать все height
8tomat8
17.02.2012, 15:50
ну вот например
<td width="625" height="17"><img src="01.gif" width="628" height="15"></td>
высота ячейки 17, высота картинки 15, понятное дело 2 пикселя промежуток.
попробуй просто убрать все height

пробовал уже) эффект тот же)

PS а вот как он видит границы между таблицами если приблизить в DW
http://s.qip.ru/201rDU8.jpg
SeregaZ
17.02.2012, 16:27
мож более подробно для каждого стиль вбить?
body {
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
PADDING-TOP:0px;
margin-top: 0px;
margin-right:0px;
margin-left:0px;
margin-bottom:0px;
PADDING:0px;
margin:0px;
}
table {
border: 0px #000 solid; /* */
border-spacing: 0;
border-collapse:collapse;
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
PADDING-TOP:0px;
margin-top: 0px;
margin-right:0px;
margin-left:0px;
margin-bottom:0px;
PADDING:0px;
margin:0px;
}
td {
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
PADDING-TOP:0px;
margin-top: 0px;
margin-right:0px;
margin-left:0px;
margin-bottom:0px;
PADDING:0px;
margin:0px;
}
tr {
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
PADDING-TOP:0px;
margin-top: 0px;
margin-right:0px;
margin-left:0px;
margin-bottom:0px;
PADDING:0px;
margin:0px;
}

ну и да :) в td на 2 пикселя больше, чем размер картинки. и еще внизу будет не совпадать. из-за размера шрифта. ты там псевдо пробел тыкнул. он по высоте выше, чем 13 пикселов. шрифт того поля сделай маленьким. тогда картинки будут плотно прилегать. типа
<td width="406" height="13" style="FONT-SIZE:5px;">&nbsp;</td>

вот как у меня показывает со всеми этими правками:
http://i32.fastpic.ru/big/2012/0217/9c/416162e48deeac105c5d08450ed7e49c.jpg
controller
21.02.2012, 16:05
как бе решит твою проблему

<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>.....</td>
</tr>
</table>