I'm trying to build a newsletter with table (I have to cause some emailclients ignore div boxes etc ).
The problem that I have is that I would like to have the text " Test test " on the same height beginning like the pic left to it. and the blue button should also be on the same height. I made a pic from the Photoshop layout how it should look like and on js fiddle so you see how it is now.
<tr style="background-color:#deeef4;">
<td width="250" cellpadding="0" colspan="2" valign="top" style="padding:15px 25px;">
<p style="display:inline;color:#00668a;">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span>
</p>
<br>
<img src="http://www.awesom-media.de/linie.png">
</td>
<tr style="background-color:#deeef4;">
<td width="300" style="padding:10px 25px;display:inline;">
<img src="http://www.awesom-media.de/ab1.jpg">
</td>
<td width="400" style="text-align:left">
<p>Test Test</p>
<ul>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
<li>6-Tages-Skipass für die Skiregion Obertauern</li>
</ul><img src="http://www.awesom-media.de/button.png" width="345" height="35" border="0">
</td>
</tr>
</tr>
jsfiddle
I updated your JSFiddle: http://jsfiddle.net/sBaNL/1/
I did two things:
Remove the top margin from the <p> surrounding Test Text
Make the surrounding <td> to vertically align its contents to the top:
.
<td width="400" style="text-align:left; vertical-align: top;">
<p style="margin-top: 0px;">Test Test </p>
...
</td>
To avoid all such uncessary margin, padding etc to all elements, you do the following in the beginning of the css files
*:{margin:0px;padding:0px;...}
This will overright all the browser's default properties.
It is due to p default display:block property which takes some margin by default.
Change it to display:inline and you can also remove the margin-top
p{
display:inline;
margin-top : 0px
}
Js Fiddle Demo
for image button you can add the margin-top style="margin-top:15px"
Related
I have created a header for our companies email templates, luckily I was able to find a basic template on the web and tweak it to our requirements.
I am a real beginner when it comes to HTML so I am sure there are many errors in it too.
I need to figure out how to reduce the blue banner to 42px in height but everything I try ruins it. I have also been told that my 600 wide option is very old school and it should be 1200. I have tried to change this too, but then it loses all of the other formatting and looks terrible.
Its supposed to be responsive, if anyone could make any edit suggestions I would be very grateful.
header.txt
header.html
try changing the padding in the td containing the logo/image. To decrease the height of the blue banner, decrease the padiing at top and bottom of the above mentioned table data.
This helps you but another way is to decrease the logos height.
From looking at the codes, there is no specific "height" that is being assigned to the table containers that you can change to specify to 42px. The most that you can do is to remove the "top" and "bottom" padding from the containers inside to make the header's height smaller.
Here's a sample code with the changes. If you notice, I changed the top and bottom padding to 0px. For the second td, I left 5px for the top padding to add some spaces between the logos and the top edge of the screen. If you want to edit the width, I change the width to 800px but you also need to adjust the widths of the 2 containers inside the table. For example, I changed them from 270px to 370px each.
Lastly, I agree that this "template" that you found seems very complex and it would be better to learn a little bit of basic html and css and what you're trying to do is simple and can be done with much simpler codes. Good luck!
<center>
<table cellspacing="0" cellpadding="0" width="800" class="w320">
<tr>
<td valign="top" width="370" style="background:#2980B9;padding:0px 15px 0px 15px;">
<a href="https://www.hayley-group.co.uk/" style="text-decoration:none;">
<img src="http://hosted.hayley-group.co.uk/shop/hayley_web_logo_white(trans).png" width="110" height="auto" alt="Hayley Group PLC Logo"/>
</a>
</td>
<td valign="top" width="370" style="background:#2980B9;padding:5px 15px 0px 15px">
<table border="0" cellpadding="0" cellspacing="0" class="mobile-center-block" align="right">
<tr>
<td align="right">
<a href="https://www.facebook.com/HayleyGroup/">
<img src="http://hosted.hayley-group.co.uk/shop/social_facebook.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://twitter.com/HayleyGroup">
<img src="http://hosted.hayley-group.co.uk/shop/social_twitter.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://www.linkedin.com/company/hayley-group">
<img src="http://hosted.hayley-group.co.uk/shop/social_linkedin.png" width="30" height="30" alt="social icon"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
I've been screwing around with this for almost 2 hours and still can't get it to render the right way in Microsoft Outlook.
It was enough of a pain to get it to render in Internet Explorer, but I got it:
Still, here's how it looks as an HTML email in Outlook:
Don't worry about the line break for now; the problems I need to fix are
(1) The 1 pixel of white vertical space between the left piece and center piece
(2) The center piece having pixel more height than the left and right pieces
Here's the HTML:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
<td align="left" valign="center" bgcolor="#0a9fda" style="padding: 0 10px;" width="220" height="35">
CLICK HERE TO LEARN MORE
</td>
<td align="left" width="6">
<img src="images/right-button-corner.png" style="display:block;" height="35"/>
</td>
</tr>
</table>
If I can't get it, I'm going to give up and use a single image. Any input much appreciated!
In regard to the height issue.
The height of the middle td is the content height (in this case it is line-height) + padding-top + padding-bottom.
You can remove padding declaration and valign and width attributes to make text vertically aligned to the middle and your button will be scaling horizontally (no breaks). I assume that would be good choice, considering you coded fixed height value of 35px.
Example of the middle <td>:
<td align="center" bgcolor="#0a9fda" style="height: 35px;" height="35">
<a href="http://example.com" style="color: #FFF; font-size: 14px;
font-family: Arial; text-decoration: none;">
CLICK HERE TO LEARN MORE</a>
</td>
Additional Notes
You can control how the call-to-action text should break by using entity. For example CLICK HERE TO LEARN MORE will break after "HERE" if the td width is insufficient to fit the text in one line.
Images should have border: none inline style to prevent uncontrolled gaps.
Also note, that valign attribute value center is incorrect. It can have values of top, bottom, or middle which is default.
There are more issues with your code.
Validate your code with some tool, for example http://validator.w3.org/.
I would try the following.
Try align="right" on the left button image:
<td align="right" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
Hello guys i am trying to send an email with HTML in it, and of course i know that the formatting and alot of CSS is not supported in Outlook, but i was wondering why this simple thing was showing broken, is there any quick fix or a workaround/alternative? look at how the buttons should appear:
http://puu.sh/84ijt.png
But they appear like this:
http://puu.sh/84ijA.png
Here is the code for it:
<tr>
<td style="display:block;min-height:38px;max-height:38px;">
<p style="margin-left:15px;">
<a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;"
href="link here..">Enquire</a>
Full Details
</p>
</div>
</tr>
</td>
There is a bit of mis-information in this thread.
You can use an image for a button, however more advanced designers are trending towards "bulletproof" buttons these days. They display with images turned off. See this link: buttons.cm
Background images are supported in Outlook, but only in the <body> tag OR using VML, see the buttons.cm link above or backgrounds.cm for examples.
Back to your specific example, there are a few ways to accomplish it, but here is how I would do it:
<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;">
<tr>
<td style="padding-top:20px; padding-bottom:10px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Enquire
</td>
<td width="20">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Full Details
</td>
<td width="50">
</td>
</tr>
</table>
</td>
</tr>
</table>
On a side note, you need to use the 6-digit hex colors in html email, and don't waste your time with the following css properties as they have inconsistent support:
margin (use padding instead)
text-align (use align="" instead)
min-height & max-height
float (use align="" instead)
background-color (use bgcolor="" instead)
Also, avoid shorthand like padding:5px 5px 0px 5px;. Unfortunately you need to write it out padding:5px; padding-bottom:0;
As an email marketer I suggest you use an image for your button. Especially if it is a call to action. The one thing you don't want to be broken is that, and the only way you can trust it wont be and that is to use an image within a table cell.
I hope that helps!
Have you tried giving the <td> the background-color? (or another container)
You could also try
<a href="#">
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span>
</a>
I haven't tested in Outlook but it might work.
Using images isn't the best solution, especially since most of the time emails are rendered without images until the user accepts to view images.
The way I do it is a table with in a table, so something like this:
<table width="outside container width here">
<tbody>
<tr>
<table style="apply your styles here, background colors, paddings etc (do not use margins, poorly supported.)" height="height of inner container" width="inner container width here" align="however you want it aligned">
<tbody><tr><td>Your button actually goes here</td></tr></tbody>
</table>
</tr>
</tbody>
</table>
Here is my page structure with three column: 30-40-30
Here is fiddle: http://codepen.io/karimkhan/pen/BDfhJ
Proble is :
I want to position div in right section at particular height with div-height is 200px.
When I put style="height:150px" in right section div, right div remains on top and left and middle section move at 150px height.
Why?
<table border="0" width="100%">
<tr>
<td style="width:30%">
<div class="left">
Hi
</div>
</td>
<td style="width:40%">
<div class="middle">
<input type="text" id="url" width="80%">
<button type="submit" onclick="GetSentiment()" value="Submit">GetSentiment</button>
</div>
</td>
<td style="width:30%">
<div class="right" style="height:150px">
nice
</div>
</td>
</tr>
</table>
This is because the text in the <td> elements is vertically centered by default. If you apply styles to the <div>s in the other <td> elements, they will also behave. Alternatively, you can do <td valign="top"...> for each <td>.
EDIT: I notice that the code you posted above is much simpler than the code you posted on github. There may be other factors, including JavaScript or other styles affecting your production code. Without the production HTML, CSS, and scripts, it's impossible to determine everything that could be affecting the layout.
I have a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.