1
Я пишу HTML-код, чтобы сделать html-адрес электронной почты. Я провел некоторое исследование, и я обнаружил, что использование старого школьного html, например таблиц и т. Д., - лучший способ сделать это.HTML-таблица вложенных таблиц HTML
Я не использовал столы в возрасте, но немного обновил свою память, и я думал, что делаю все хорошо. Я разделил макет на четыре вертикальные строки. Оболочка заголовка, главная обертка, calltoaction и нижний колонтитул. Я разместил их все в обертке. Почти все работает, но я не понимаю, почему контент и значки td не выравниваются вместе? Максимальная ширина всего объекта должна быть 600 пикселей, как я уже говорил несколько раз. Я не хочу, чтобы он заканчивался так, как сейчас.
По какой-то причине кажется, что закрывает td, прежде чем я расскажу им, когда я просматриваю страницу с параметром «проверка элемента» в моем браузере. Что мне нужно сделать, чтобы выровнять эти два td друг с другом и сделать максимальную ширину всего 600px?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; }
p { margin:0 0 10px 0; line-height:1.4; clear:right; }
code { font-size:1.2em; }
.headerwrapper { background-color: #000000; margin:0px; padding:0px;}
.header {text-align:center;}
.wrapper {width:600px; background-color: #dbdadb; align:center;}
.fixedwidth {width:600px !important;}
.content {width:340px;}
.icons {width:260px;}
.devices {width:600px; height:310px;}
</style>
<title>email template</title>
</head>
<body>
<table class="wrapper" width="556" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody class="headerwrapper">
<tr class="header">
<td class="fixedwidth">
<img src="http://i49.tinypic.com/347i55g.png" border="0">
</td>
</tr>
<tr class="devices" style="width:600px; height:300px;">
<td>
<img src="http://i47.tinypic.com/nujr9.png">
</td>
</tr>
</tbody>
<tr class="miniwrapper">
<tr class="fixedwidth">
<td class="content" align="left">
tekst
</td>
<td class="icons"align="left">
tekst
</td>
</tr>
</tr>
<tr>
<td>
calltoaction
</td>
</tr>
<tr>
<td>
footer
</td>
</tr>
</table>
</body>
</html>
Итак, после всей вашей помощи я начал работать над остальными и делает макет легко читать на мобильных устройствах, это то, что у меня сейчас;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="format-detection" content="telephone=yes">
<style>
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
p { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:0.9em;}
.contact {margin-left:5px; margin-top:15px; width:170px; font-size:0.9em; text-align:center;}
h1 { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:1.1em; font-weight:normal;}
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;}
a img {border:none;}
.headerwrapper {width:600px; background-color: #000000; margin:0px; padding:0px;}
.header {text-align:center;}
.wrapper {width:600px; background-color: #dbdadb; align:center;}
.fixedwidth {width:600px !important;}
.content {width:340px;}
.icons {width:260px;}
.devices {width:600px; height:310px;}
.miniwrapper {width:600px;}
.footer { background-image: url(http://i49.tinypic.com/54f2ac.png); text-align:center; line-height:1.2; width:320px; font-size:0.9em;}
.footermobile {display:none;}
.actiemobile {display:none;}
.iconwrapper {margin:0; line-height:1.2; font-size:0.9em;}
.iconwrapper p {margin-left: 0px; margin-bottom:10px;}
.headermobile {display:none;}
.devicesmobile {display:none;}
@media all and (max-width: 400px) {
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb;}
p { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:0.9em;}
.contactmobile {margin-left:50%; margin-top:15px; width:170px; font-size:1.1em; text-align:center; line-height:1.2em;}
h1 { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:1.1em; font-weight:normal;}
.headerwrapper {width:600px; background-color: #000000; margin:0px; padding:0px;}
.header {display:none;}
.wrapper {width:100%; background-color: #dbdadb; align:center;}
.fixedwidth {width:100% !important;}
.content {width:340px; display:block;}
.icons {width:260px; display:block;}
.devices {display:none;}
.miniwrapper {width:100%;}
.footer {display:none;}
.actie {display:none;}
.footermobile {display:block; background-image: url(footermobile.png); text-align:center; line-height:1.2; width:320px; height:164px; font-size:0.9em;}
.actiemobile {display:block;}
.headermobile {display:block; text-align:center;}
.devicesmobile {display:block;}
}
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
/* End reset */
</style>
<title>email template</title>
</head>
<body>
<table class="wrapper" width="600" align="center" border="0" cellpadding="0" cellspacing="0" margin="0">
<tbody class="headerwrapper">
<tr class="header">
<td class="fixedwidth" colspan="2">
<img src="http://i49.tinypic.com/347i55g.png" border="0">
</td>
</tr>
<tr class="devices" style="width:600px; height:300px;">
<td colspan="2">
<img src="http://i47.tinypic.com/nujr9.png">
</td>
</tr>
<tr class="headermobile">
<td class="fixedwidth" colspan="2">
<img src="logomobile.png" border="0">
</td>
</tr>
<tr class="devicesmobile">
<td colspan="2">
<img src="devicesmobile.png">
</td>
</tr>
</tbody>
<tr class="miniwrapper">
<tr class="fixedwidth">
<td class="content" align="left">
<h1>Werkt u al met apps?</h1>
<p>Het ontwikkelen van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en
bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>
<p>Mocht u geïnteresseerd zijn in onze service,
van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op.
U bent van harte welkom voor een kop koffie bij ons in de mediaBunker, tijdens een verkennend gesprek of een demonstratie van de
mogelijkheden van mediaBunker als bedrijf.</p>
<p>Alvast bedankt en hopelijk tot ziens.</p>
</p>
</td>
<td class="icons">
<table>
<tr>
<td colspan="2">
No matter what device.<br>
We build natively.
</td>
</tr>
<tr>
<tbody class="iconwrapper">
<tr text-align="center">
<td><img src="apple.png"></td>
<td><p>Apple iOS is the operating<br>
system that powers the <br>
iPhone, iPad and iPod touch.</p>
</td>
</tr>
<tr>
<td><img src="android.png"></td>
<td><p>With partners like Google,<br>
HTC and Motorola, Android is <br>
the fastest growing mobile OS.</p>
</td>
</tr>
<tr>
<td><img src="windows.png"></td>
<td><p>Together Microsoft and Nokia<br>
support conventional users <br>
with Windows Phone.</p>
</td>
</tr>
<tr>
<td><img src="html5.png"></td>
<td><p>Looking for other platforms<br>
like BlackBerry, Samsung <br>
Bada or HTML5 & CSS3?<br>
We can build it!</p>
</td>
</tr>
</tbody>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td class="actie" colspan="2">
<img src="http://i47.tinypic.com/11qi7pw.png">
</td>
<td class="actiemobile" colspan="2">
<img src="actiemobile.png">
</td>
</tr>
<tr>
<td class="footer" colspan="2">
<table>
<tr cellspace="0">
<td width="200px" text-align="center"><p class="contact">Suikersilo-West 23 <br> 1165 MP Halfweg</p></td>
<td width="200px" text-align="center"><p class="contact"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:[email protected]">[email protected]</a></p></td>
<td width="200px" text-align="center"><p class="contact"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></p></td>
</tr>
</table>
</td>
<td class="footermobile" colspan="2">
<table>
<tr cellspace="0">
<td width="200px" text-align="center">
<p class="contactmobile">
Suikersilo-West 23<br>
1165 MP Halfweg<br>
<a href="tel:0031238200140">Tel +31 23 820 0140</a><br>
<a href="mailto:[email protected]">[email protected]</a><br>
<a href="http://mediabunker.com">www.mediabunker.com</a><br>
<a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a><br>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
И вы можете увидеть пример того, чем он является сейчас; http://kellyvuijst.nl/email/email.html (с изображениями и всеми) При масштабировании экрана до менее чем 400 пикселей я хочу, чтобы значки td перемещались под контентом, но я не могу справиться с этим. Я думал, что блок отображения будет делать трюк, но это не так. Кроме того, есть это странное черное/серое пространство, я не знаю, почему он там. Он появился, когда я добавил таблицу, чтобы она каким-то образом конфликтует. Я нахожу таблицы очень запутанными и запутанными, поэтому я надеюсь, что кто-то может понять все для меня.
Что такое желаемого результата? Кроме того, у вас есть TR внутри другого TR –
Итак, я не могу использовать TR внутри другого TR? И ну, нужный эффект, как я могу объяснить это ... это электронный бюллетень с заголовком, изображение под ним, а затем блок контента, разделенный на две части, один из которых содержит изображение и текст, содержащий текст. Под этими двумя строками должно быть все 600 пикселей снова. Я сделал то, что сказал мне mreyeros, который отлично подходит для двух td рядом друг с другом, но теперь я не могу сделать нижние две строки полными, это просто разрывается, когда я добавляю изображение или текст. – Jane
Если вы можете быстро нарисовать его в Paint (просто положением и шириной разных блоков), я буду рад помочь вам разобраться во всех проблемах. Немного сложно понять, как вы ожидаете, что это будет выглядеть. –