I Wonder if anyone can help me. I just started working with CSS and was looking to replicated one of the pages of a newsletter I saw. My main problem is that I can't seem to be able to insert the arrow image made with lots of people into the center of the page.
I have used lots of tables and inserting the image in a row breaks the page.
Would really appreciate your help.
Here's my code:
<html>
<head></head>
<body>
<table style="border: 1px solid #223e86;" border="0" width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
---------------------INSERT IMAGE IN THE CENTER OF ONE COLUMN ROW------------------
</tr>
<tr>
<td style="padding-left: 12px; font-family: Verdana,Geneva,sans-serif; font-size: 13px;">
LOT is proud to be launching <i>LOT
Careers</i>. This tailor-made online portal
will provide members and trainees with
free access to browse and apply for the
largest single source of LOT,
jobs worldwide.
<p />
As an LOT member you will be
able to search job vacancies relevant
to your qualification, geographical
location and sector. The site will also
offer comprehensive guidance, advice
and developments in the financial
recruitment process and with your career
management.</td>
<td>
<H2 style="font-family: Verdana,Geneva,sans-serif; font-size: 20px; text-transform:uppercase; color: #B00000; font-weight:bold;">FEATURES:</H2>
<pre style="font-family: Verdana,Geneva,sans-serif; font-size: 13px;">
* Expert careers content (news, videos,
articles, advice and information)
* Find out about the recruitment market
in a destination of your choice
* Search vacancies by job title, skills
required, region or LOT status
* Sign up to receive tailored email alerts
when relevant jobs are posted
* Upload and store your CV
* Apply for jobs with one click
* Debate the latest topics in the
Think Tank with other professionals
in the industry
</pre></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td style="padding-left: 12px; font-family: Verdana,Geneva,sans-serif; font-size: 13px;">
<i>LOT Careers</i> will also provide access to
thousands of LOT qualified jobseekers
for any organisation looking for the best
new talent.
</td>
<td style="padding-right: 12px; font-family: Verdana,Geneva,sans-serif; font-size: 11px; text-transform:uppercase; color: #B00000; font-weight:bold;">
Pre-register today at www.oursite.com
whether you’re interested in making
your next career move, or want to recruit
your next employee
</td>
</tr>
<tr><td> </td></tr>
<!--third one-->
<tr>
<td>
</td>
</tr>
<!--
<tr><td> </td></tr>
<!--forth one-->
<td colspan="7">
<table border="0" width="200" align="center" cellpadding="0" cellspacing="0">
<tr>
</tr>
<table>
<tr>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/MP_Finance_220110_opt.gif" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/RMS_opt.jpeg" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/bbc-120x60_opt.jpeg" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/STATESTREET_opt.jpeg" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/logo_opt.jpeg" alt="Smiley face" />
</td>
</tr>
</table>
<!--Footer-->
<table>
<tr>
<td width="600" bgcolor="#828279" colspan="7" style="padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF; font-size: 23px;">
Pre-register today at <a style="text-decoration:none" href="">www.oursite.com</a>
</span></p>
</td>
</tr>
</table>
</table>
</body>
</html>
Here's the image I want to insert in that column: http://i.stack.imgur.com/DvQ7F.jpg
table rows are not allowed to have content directly, you'll want to enclose the image within a td that has a column span of 2:
<tr>
<td colspan="2">
-----INSERT IMAGE IN THE CENTER OF ONE COLUMN ROW-------
</td>
</tr>
In addition, take care with your comments. Here you have an unclosed comment that will likely make the display of the code following this block unpredictable:
<!--
<tr><td> </td></tr>
<!--forth one-->
Related
I am creating HTML table in Outlook email to make it look like a template example like this,
However the one I created isn't match like it should be. There are 3 issues,
first Manage Information Technology at top right is shift down instead of suppose to be equal position as black box logo like an example template from above.
Second, ServiceNow - Release Notes aligned on left instead of center even though I already have align="center" in <td>.
Third, the black border line locate below orange banner disappear but the snippet code and the outlook preview is showing it but the actual outlook is not.
Here is 2 images of incorrect outlook display,
<table style="height: 643px;" width="772" cellspacing="0" cellpadding="0">
<tbody>
<tr style="border-style: none none solid none;">
<td colspan="2"><span style="font-family: 'times new roman', times;"><img id="logo" style="float: left;" title="" src="toolbar-logo.png" alt="" width="127" height="44" /></span></td>
<td colspan="2">
<p style="text-align: right;"><font face="calibri, times"><span style="font-size: 18.6667px;"><font color="red"><strong>Manage Information Technology</strong></font></span>
</font>
</p>
</td>
</tr>
<tr style="border-style: none none solid none;">
<td colspan="4" align="center"><font size="7" face="calibri"><strong>ServiceNow - Release Notes</strong></font></td>
</tr>
<tr style="border-style: none none solid none;">
<td colspan="4" align="center"><img id="dss-banner" src="DSSbanner.png" alt="" width="100%" height="161" /></td>
</tr>
<tr>
<td style="background: none; border-bottom: 4px solid #000000; height: 2px; width: 100%; margin: 0px 0px 0px 0px;" colspan="4"><span style="font-family: 'times new roman', times;"> </span></td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: 'calibri', times;">Team,</span></td>
</tr>
<tr>
<td colspan="4"><span style="font-family: 'calibri', times;"><span style="font-size: 12pt;">The following capabilities and improvements have successfully been promoted to the production ServiceNow instance through "${short_description}" on ${mail_script:release.stories.email.date}.<br />The release notes have also been added in the Release Notes Knowledge Article per standard process.</span></span>
</td>
</tr>
<tr>
<td>${mail_script:release.stories.email}</td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: 'calibri', times;">Thank you,<br />Service Management</span></td>
</tr>
</tbody>
</table>
Can anyone point where where possible reason why it didn't match correctly?
I have created this email layout below, and cannot for the life of me figure out why Gmail renders it correctly, but Inbox renders it horribly.
Upon inspection, it is for some reason separating a bunch of stuff into their own table elements. Anyone see something I'm missing. I'm very new to html for email, and am constantly shocked at how bad it can be.
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="center"><span style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;">shift</span><span style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;">Swap</span></td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td>
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="padding: 35px;">
<h3>
Welcome <span style="text-decoration: none;"><%= #email %></span>!
</h3>
<div>
<span style="display: block;">You can confirm your account email through the link below:</span>
<br>
Confirm your account
<br>
<span style="display: block;">Or paste the following into the address bar: <%= confirmation_url(#resource, confirmation_token: #token) %></span>
<h3 style="padding-top: 20px;">Thanks for signing up. We're looking forward to seeing you on the site!</h3>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center"><td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td></tr>
</table>
</td>
</tr>
</table>
</body>
Here is what it looks like when Inbox for some reason hides the entire message, which seems to happen when I send a "reconfirm" message:
And Gmail:
I really recommend to take out all non table elements, since even if it is 2016, mail clients are way behind
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="50%" align="right" style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;padding-right: 0">
shift
</td>
<td valign="top" align="left" style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;padding-left: 0">
Swap
</td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td style="padding: 35px;background: #FFF">
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="text-decoration: none; font-size: 22px">
Welcome
# email !
</td>
</tr>
<tr>
<td style="padding-top: 20px; font-size: 22px">
You can confirm your account email through the link below:
</td>
</tr>
<tr>
<td>
Confirm your account
</td>
</tr>
<tr>
<td>
Or paste the following into the address bar:
confirmation_url
</td>
</tr>
<tr>
<td style="padding: 20px 0; font-size: 22px">
Thanks for signing up. We're looking forward to seeing you on the site!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center">
<td style="color: #2b2b2b">Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©
<%=T ime.new.year %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Knowing how "fussy" e-mail clients are, there's one thing that I see that may be causing unpredictable results. It's a long-shot that this will fix anything other than a typing error; but within that line of code, do you see what I see near 'color: 2b2b2b'?
<td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td>
The semi-colon is outside of the style attribute. Prolley just a foul ball, but you never know. ;)
I have a design of an email template, and I am tinkering about the best way to tackle the styling of the following element in HTML/CSS. Note a few things:
Since it's for an HTML email, mainly tables will be used.
Using negative margins will probably not be compatible with different mail clients.
Note the white border around the button
Would you recommend using a background image for this entire block? Or is there an elegant way that will look like this and works across clients.
Here's my set-up: http://jsfiddle.net/ZHkdV/
Here you go - only need a 30x30 image for the top corner:
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1">
<tr>
<td width="30" height="30">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="30" height="30" alt="">
</td>
<td width="240" height="30">
</td>
<td width="30" height="30">
</td>
</tr>
<tr>
<td width="30" height="160">
</td>
<td width="240" height="160" valign="top">
<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
<br>
some text here
</font>
</td>
<td width="30" height="160">
</td>
</tr>
<tr>
<td width="300" height="40" colspan="3" bgcolor="#FFFFFF"><!-- undeclared light gray as Outlook can add spaces at bottom of this td on forwarding (hides unwanted line) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="20" bgcolor="#F1F1F1">
</td>
<a href="" style="color: #757575; font-weight: bold; text-decoration: none;"><!-- css button, you can lose this and put a href'd image in the cell if you prefer. -->
<td width="200" height="40" bgcolor="#CBBCDC" rowspan="2" valign="middle" align="center">
<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
BUTTON
</font>
</td>
</a>
<td width="50" height="20" bgcolor="#F1F1F1">
</td>
</tr>
<tr>
<td width="50" height="20" bgcolor="FFFFFF">
</td>
<td width="50" height="20" bgcolor="FFFFFF">
</td>
</tr>
</table>
</td>
</tr>
</table>
This should hold up in all clients...
For e-mail templates, you don't have to worry about validation, so you can use pretty 'hacky' html. One way round client compatibility is to have every row be a table in and of itself, set inside one main 'wrapper' table.
Then you can set as many divisions as you want in each, remembering to reset the borders on each table, row and cell.
Each cell gets it's own image or slice of an image. For the last row you could simply have one image in an anchor tag. Also remember to keep all styling on elements inline.
The html email Boilerplate is pretty much bulletproof.
http://htmlemailboilerplate.com/
<table> <!- Wrapper ->
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Background images aren't very compatible either:
http://www.campaignmonitor.com/css/
I would just slice the last row into 3 separate images (left, button, right).
If you would rather have one image for the whole row, you can also use an image map to just make the button part a link.
I have a webpage I was trying to develop, but I can't figure out what the problem is with the layout. The page goes all out of shape and out of width when I include the code below.
This particular code comes out well when viewed on a browser, but when I want to add another row BETWEEN the people picture and the RED Footer, everything breaks
<!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" />
<title>Family Hotel</title>
</head>
<body>
<table style="border: 1px solid #223e86; width: 600px;" align="center">
<tr>
<td bgcolor ="#e4322d" valign="top" width="437" style="padding-left: 15px">
<h3><span style="font-family: Verdana,Geneva,sans-serif; color: #FFFFFF;">Why choose Family Hotel in Palmgrove as your holiday home for 2012? </span></h3>
</td>
<td align="left" valign="top" width="14"> </td>
<td valign="top" width="151"><img src="premises.png" alt="" border="0" height="107" width="150" /></td>
</tr>
<tr>
<td align="center" colspan="3" valign="top" style="font-family: Verdana,Geneva,sans-serif; color: #000000; padding-top: 8px; padding-left: 15px; padding-right: 15px;">
<img src="../Robot/Memberslogo-web-images/whitearrow_opt.jpeg">
<p />
</td>
</tr>
<!--I WANT THE COLUMN HERE-->
<tr>
<td bgcolor ="#e4322d" colspan="7" style="padding-left: 15px; padding-right: 15px;" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;">
Family Hotel Ltd - River Lane House - Shore Street - PalmGrove - 76349L
+1 (0) 434 769 789 - www.mywebsite.com<br />
info#mywebsite.com
</span></p>
</td>
</tr>
</table>
</body>
</html>
Here's the code I want to insert in between the People image and the red footer.
<tr>
<td>
<table>
<tr>
<td>
<img src="premises.png" align="center" width="120px" height="128px"/>
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" style="width:460px; padding:35px 0; background: #E4322D; border-radius:14px; text-align:center; font-size:16px; font-family: Verdana,Geneva,sans-serif; color:#FFF;">
<tr>
<td> We are a small family-run hotel, as such you are sure to have a full personal experience. For the last 12 years we have consistently been ranked as one of the best family-run hotels in Palmgrove.
</td>
</tr>
</table>
</td>
</tr>
Here's the images of what they look like:
The last piece of code produces this image - which is what I want to insert in the page between the people picture and the red footer.
Update: Here's what the page looks like - the top column pushes to the left. It should stretch across and not push to one side: (
Try this site. It will tell you what's wrong with your code:
HTML Validator
One problem caught by the validator is that align cannot be "center"
Also, if that didn't work, do you realize that the code will try to stuff the 2 tables into the first 2 columns of your "master table"?
For example, here is what you basically have:
<tr>
<td>
<td>
<td>
<tr>
<td> //3 columns wide
<tr>
<td>
<td>
<tr>
<td> //7 columns wide
So, you are kind of saying, 3 columns then 3 columns then 2 columns then 7 columns.
I tried to do a quick edit. Maybe the following works?
<!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" />
<title>Family Hotel</title>
</head>
<body>
<table style="border: 1px solid #223e86; border-bottom:none; width: 600px;" align="center">
<tbody>
<tr>
<td bgcolor="#e4322d" valign="top" width="937" style="padding-left: 15px">
<h3><span style="font-family: Verdana,Geneva,sans-serif; color: #FFFFFF;">Why choose Family Hotel in Palmgrove as your holiday home for 2012? </span></h3>
</td>
<td valign="top" width="151"><img src="premises.png" border="0" height="107" width="150" /></td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #223e86;border-top:none; width: 600px;" align="center">
<tbody>
<tr>
<td colspan="6" align="center" valign="top" style="font-family: Verdana,Geneva,sans-serif; color: #000000; padding-top: 8px; padding-left: 15px; padding-right: 15px;"><img src="../Robot/Memberslogo-web-images/whitearrow_opt.jpeg" />
<p> </p>
</td>
</tr>
<tr>
<td colspan="3">
<table>
<tbody>
<tr>
<td><img src="premises.png" align="center" width="120px" height="128px" /></td>
</tr>
</tbody>
</table>
</td>
<td colspan="3">
<table cellpadding="0" cellspacing="0" style="width:460px; padding:35px 0; background: #E4322D; border-radius:14px; text-align:center; font-size:16px; font-family: Verdana,Geneva,sans-serif; color:#FFF;">
<tbody>
<tr>
<td>We are a small family-run hotel, as such you are sure to have a full personal experience. For the last 12 years we have consistently been ranked as one of the best family-run hotels in Palmgrove.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6" bgcolor="#e4322d" style="padding-left: 15px; padding-right: 15px;" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;"> Family Hotel Ltd - River Lane House - Shore Street - PalmGrove - 76349L
+1 (0) 434 769 789 - www.mywebsite.com<br /> info#mywebsite.com </span></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This is a limitation of colspan. Even if all the column spans add up to the same for each row, at least one of your rows must consist of individual cells, otherwise you can't specify the widths correctly.
You are using some "old style coding" there ;)
The TR that you are inserting does not have the necessary amount of TD's inside it, thus causing the layout to break... or you forgot a "colspan" somewhere!
I believe that this is enough to cause what you are saying.
(I have not tested this! It's just an analysis by your code).
I have this table and was trying to add rounded corners to it, but nothing happens. Could someone take a look and tell me where I'm going wrong? The size of the corner images are 14px each.
Any help would be appreciated greatly.
<table cellpadding="0" cellspacing="0" >
<tr bgcolor="#e4322d" style="line-height: 0px">
<td width="14px" height="14px"><img src="red1.png" width="14px" height="14px" alt=""></td>
<td width="430" style="font-size: .2em"> </td>
<td width="14px" height="14px"><img src="red2.png" width="14px" height="14px" alt=""></td>
</tr>
<tr bgcolor="#e4322d">
<td width="14px" style="font-size: 1px"> </td>
<td width="430" bgcolor="#e4322d" align="center" style="color: white; font-size: 16px"><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;"><br>Come swim in our latest pool.<br><br></span></td>
<td width="14px" height="14px" style="font-size: 1px;"> </td>
</tr>
<tr bgcolor="#e4322d" style="line-height: 0px">
<td width="14" height="14"><img src="red3.png" width="14" height="14" alt=""></td>
<td width="430" style="font-size: 0px;" height="2"></td>
<td width="14px" height="14"><img src="red4.png" width="14" height="14" alt=""></td>
</tr>
</table>
The real problem is that you are going complete overkill on the HTML for this. You can make the whole thing simply with this HTML:
<div class="banner">Come swim in our latest pool.</div>
And add this CSS which takes care of all the styling:
.banner {
width: 450px;
padding: 35px 0;
background: #E4322D;
border-radius: 14px;
text-align: center;
font-size: 16px;
color: #FFF;
}
It looks like you aren't using CSS, and are using the very old-fashioned and long outdated HTML technique of making everything with tables. There is no need. I would take the time to quickly learn CSS. It will change your life! Start here; it's easy to learn:
http://www.w3.org/wiki/CSS/Training/What_is_CSS
And by using CSS and having a global stylesheet for your site, you will be able to reuse styles without having to write new code for it every time. For example, you could have multiple banners that look the same as your "Come swim in our latest pool" one simply by giving them the same class:
<div class="banner">Come swim in our latest pool.</div>
<div class="banner">Also, check out this!</div>
<div class="banner">Hey, this box looks the same as the other two!</div>