Not sure how to even ask this, but I'm at a stopping point and cannot go further. I am not a programmer and I only dabble in code infrequently, but I would appreciate any help.
Basically, I have written HTML for standardizing an email signature for myself and fellow educators. What I would like to do is create a form (Google Form) that allows them to input the variables such as name, title, email, and phone numbers in the HTML code...then have it spit back the rendered HTML on the same page for them to copy and then paste into the email signature field of their mail client. Not to go in to too much detail, but AD or LDAP distribution is not an option for us right now, so this seems like a solution that may help all parties...if we can get it going.
What I would ideally want is to have the one webpage where let's say the left half of the page is the form and the right side is what renders when they submit.
How can I start to go about this? Here is the static code I have already:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom:
0px; padding-right: 0px;">
<span style="text-align: left; color: #000000; font-family: Garamond; font-
size: 13pt; font-weight: bold">James McCrary</span><br>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color:
#606060; font-family: Garamond; font-weight: normal; font-size:
10pt;">Academic Technology Coordinator</span><br>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom:
0px; padding-right: 0px;">
<span style="text-align: left; color: #000000; font-family: Garamond; font-
size: 10pt; font-style: normal; font-weight: normal;">3200 Woodland Ridge
Boulevard <font size="1" color=“#000000”></a>|</font> Baton Rouge, LA
70816<br> Phone: 225-753-3180 ext.1352 <font size="1" color=“#000000”>|
</font> Fax: 225-555-5555<br></span>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom:
0px; padding-right: 0px;">
<span style="text-align: left; color: #000000; font-family: Garamond; font-
size: 10pt; font-style: normal; font-weight: normal;">E-Mail:
mccraryj#ehsbr.org <font size="1" color=“#000000”>|
</font>www.episcopalbr.org<br></span>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom:
0px; padding-right: 0px;">
<img src="http://www.episcopalbr.org/uploads/2/9/5/7/29573303/e-mail-
signiture_orig.jpg" nosend="1" border="0" width="148" height=“50”
alt=Episcopal School of Baton Rouge title=“Episcopal School of Baton Rouge”>
</a>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 8px; padding-top: 7px; padding-bottom:
0px; padding-right: 0px;">
<a href=https://www.facebook.com/episcopalbr/><img
src="http://www.episcopalbr.org/uploads/2/9/5/7/29573303/1468419350.png"
alt=Facebook style="width:28px;height:28px;”></a><a
href=https://www.instagram.com/episcopalbr/><img
src="http://www.episcopalbr.org/uploads/2/9/5/7/29573303/1468419163_1.png"
alt=Instagram style="width:28px;height:28px;"><a
href=https://www.instagram.com/episcopalbr/><img
src="http://www.episcopalbr.org/uploads/2/9/5/7/29573303/1468419163_1.png"
alt=Instagram style="width:28px;height:28px;"><a
href=https://twitter.com/EpiscopalBR><img
src="http://www.episcopalbr.org/uploads/2/9/5/7/29573303/1468419364.png"
alt=Twitter style="width:28px;height:28px;"><a
href=https://www.youtube.com/channel/UC_YRWq4LXw4ON07XoKFhxpA><img
src="http://www.episcopalbr.org/uploads/2/9/5/7/29573303/1468419371.png"
alt=Youtube style="width:28px;height:28px;"><a
href=https://plus.google.com/101907942367473945105/posts><img
src="http://www.episcopalbr.org/uploads/2/9/5/7/29573303/1468419380.png"
alt=Google+ style="width:28px;height:28px;">
</td>
</tr>
</tbody>
</table>
</body>
<style>
a {color: #000000;}
</style>
</html>
Related
I am trying to create an Email Signature Generator. I am trying to get the blue line (it can be seen in the program) to stretch all the way down. However, when I do it, it stretches the rest of the items. I believe this may be because it is all inside a table and when one element is sized differently than the others, it tries it equal it out but I am not sure how to change it. Here is my code:
table {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
}
.spacer {
width: 30px;
}
hr {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
}
#fullName {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
}
#job {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-top: 11px;
}
#jobLocationText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 15px;
padding-top: 6px;
}
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
</td>
<td class="spacer"></td>
<td>
<hr>
</td>
<td class="spacer"></td>
</tr>
<tr>
<td>
<center>
<div id="fullName">Billy Staples</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="job"><i>Programmer</i></div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="jobLocationText">at the <b id="jobLocation">HTML hub</b></div>
</center>
</td>
</tr>
</table>
And a working version can be found here.
Again, I am trying to get it so the hr (in the CSS) when the height is changed (to say 300 or something) it doesn't stretch the rest of the table with it. If you have an idea as to how I might be able to do my table differently so that it might be easier or just so that I could fix this problem, suggestions are welcome!
Thanks in advance!
Use rowspan="" to strech <hr> to way down,
<td rowspan="4">
<hr>
</td>
Here's your updated code, https://jsfiddle.net/he84kv8n/10/
<hr> is a horizontal rule (divider), bending it to be a vertical rule (divider) is a use case that will likely be difficult for anyone looking at your code to decipher.
I would suggest using a CSS border attribute on the table cell, that will automatically be the correct size.
Here is my code, between the image of the audi and the grey block of text chrome is adding tags which are not actually in the code? Anyone know why? It seems that chrome is adding a lot of tags which are not actually there too :/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audi MK Advert</title>
<style>
#font-face {
font-family: 'audibold';
font-style: normal;
font-weight: bold;
src: url('helper-files/fonts/AudiBold.otf') format('opentype');
}
#font-face {
font-family: 'audinormal';
font-style: normal;
font-weight: normal;
src: url('helper-files/fonts/AudiNormal.otf') format('opentype')
}
#media (min-width: 360px) {
table .tnormal {
font-size: 11px !important;
}
table .tnormalsmall {
font-size: 9px !important;
}
table .tbold {
font-size: 14px !important;
}
table .tboldaddress {
font-size: 13px !important;
font-weight: bold;
}
table .tboldsmall {
font-size: 11px !important;
}
table .marshall-logo {
margin-left: 100% !important;
}
table .footer {
font-size: 7px !important;
}
}
</style>
</head>
<body>
<!-- Audi Logo Top Right -->
<table style="float:right" ; display:block; margin-bottom: 10px>
<tr>
<td>
<img src="helper-files/imgs/logo.png">
</td>
</tr>
</table>
<br>
<!-- Grey Navbar -->
<table style="margin:auto; width:100%; background-color:#858585">
<tr style="display:block;">
<td><img src="helper-files/imgs/navbutton2.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton3.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton4.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton5.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton6.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton1.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton7.jpg" style="margin-bottom: 5px"></td>
</tr>
</table>
<!-- Audi Large Photo -->
<table style="width:100%; margin-bottom:0">
<tr>
<td style=align: "center"><img src="helper-files/imgs/header.jpg" style="width:100%"></td>
</tr>
</table>
<!-- Body of text -->
<table style="background-color: lightgray; padding-bottom: 20px; color:grey">
<tr>
<td class="tbold" ; style="font-weight:bold; padding-bottom:15px; padding-top: 35px; font-size:35px; padding-left: 15px; padding-right: 15px;font-family: audibold">Whats in the name?</td>
</tr>
<tr>
<td class="tboldsmall" ; style="padding-bottom:15px; font-weight:bold; padding-right: 15px; padding-left: 15px; font-family: audibold">To reflect Ridgeway’s acquisition by Marshall Motor Holdings plc in May of this year, effective from the 1st of November, we have rebranded to Marshall.</td>
</tr>
<br>
<tr>
<td class="tnormal" ; style="padding-bottom:15px; padding-left: 15px; padding-right: 15px; font-family: audinormal">Don’t worry – it’s not all change. Our excellent staff, standards and values will remain the same, ensuring that you receive consistently high levels of service.</td>
</tr>
<br>
<tr>
<td class="tnormal" ; style="padding-bottom:15px; padding-left: 15px; padding-right: 15px; font-family: audinormal">The largest expansion acquisition that Marshall Motor Group has made to date, we are now part of a group that operates 103 franchise dealership businesses representing 24 different manufacturer brands across 25 counties in England, with a
turnover in excess of £2.1bn per annum and 3,500 colleagues; but you, the customer, are still our Number One!</td>
</tr>
<br>
<tr>
<td class="tnormal" ; style="padding-bottom:15px; padding-left: 15px; padding-right: 15px; font-family: audinormal">With Marshall Motor Group (who are the 7th largest UK motor group in the UK), we are in a better position than ever to exceed expectations and adopt 106 years of dedicated Marshall expertise, with customer care and impeccable industry knowledge
at the heart of everything we do.</td>
</tr>
<br>
<tr>
<td class="tnormal" ; style="padding-bottom:15px; padding-left: 15px; padding-right: 15px; font-family: audinormal">Just like always, we’re with you for the road ahead. Welcome to the next destination of our exciting journey. As part of the rebrand ridgeway.co.uk will
redirect to our new online home of marshall.co.uk for all things Audi sales, service and parts!</td>
</tr>
<tr>
<td class="tbold" ; style="font-weight:bold; font-size:35px; padding-left: 15px; padding-right: 15px; font-family: audibold">Marshall</td>
</tr>
<tr>
<td class="tbold" ; style="font-weight:bold; font-size:35px; padding-left: 15px; padding-right: 15px; font-family: audibold">The new name for Audi in Oxford and Newbury.</td>
</tr>
</table>
The HTML is invalid. The extra tags you are seeing are a result of the browser attempting to error correct.
You will also see some extra elements "added" where their start and end tags are optional (e.g. every table must have a tbody). This is normal behaviour and not a problem.
Use a validator to identify your errors which includes such things as:
Line break elements between table rows
Semi-colons between attributes
Attribute values with the quotes in the wrong place
Also use a CSS validator as you also have CSS errors (such as the use of properties which do not exist).
<table align="center" width="300px" cellspacing="0" cellpadding="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background: url(http://www.hubilo.com/theme/6/img/ribbon1.png); background-size: 300px 30px; background-position: center; background-repeat: no-repeat; background-color:green;">
<tr>
<td>
<p style="color:#000000; text-align: center; font-weight:100 !important; text-transform: uppercase; font-style: normal; letter-spacing: 1px; font-size: 12px; line-height:30px; font-family: \Montserrat\', sans-serif;">SUNDAY 6TH DECEMBER, 2015</p>
</td>
</tr>
</table>
When I see in Gmail , It looks like this.
and if I write two dates, then it goes beyond the image.
How can i fix it?
you can put conditions in such case.
like when you have one date then give width according to your need and when you have two dates then give width respectively.
this may solve your issue.
Is this you looking for ?
Try to give width: 100% then you can easily add two dates.
Or
You can try to increase the height.
Check here :
<table align="center" width="300px" cellspacing="0" cellpadding="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background: url(http://www.hubilo.com/theme/6/img/ribbon1.png); background-size: 300px 70px; background-position: center; background-repeat: no-repeat; background-color:green;">
<tr>
<td>
<p style="color:#000000; text-align: center; font-weight:100 !important; text-transform: uppercase; font-style: normal; letter-spacing: 1px; font-size: 12px; line-height:30px; font-family: \Montserrat\', sans-serif;">SUNDAY 6TH DECEMBER, 2015 <br> SUNDAY 7TH DECEMBER, 2015</p>
</td>
</tr>
</table>
I'm trying to build my first HTML/CSS webpage, but it seems that I'm having a problum with maximizing the page to the bottom limit. I mean if the content is not huge, the footer comes up the the middle of the page, how can I solve this problem?
I have attached a snapshot.
Here's the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blogs</title>
<style type="text/css">
body{ margin-left:0 ;margin-right:0 ;margin-top:0; margin-bottom:0 ; }
.design { padding: 0 ; margin:0 ;border: 0}
.left_head {background-image:url("images/header_left.gif"); }
.header_center {background-image: url("images/header_center.gif");background-repeat:repeatx;}
.right_head {background-image: url("images/header_right.gif");}
table { margin-left:0 ;margin-right:0 ;margin-top:0; margin-bottom:0; padding: 0 ; border: 0; cellpadding: 0 ; cellspacing: 0 }
table td { margin:0 ; padding: 0 ; border: 0; cellpadding: 0 ; cellspacing: 0 }
.left_body {background-image: url("images/blogs_22.gif");background-repeat:repeaty;}
.right_body {background-image: url("images/blogs_25.gif");background-repeat:repeaty;}
.left_footer {background-image:url("images/footer_left.gif"); }
.right_footer {background-image:url("images/footer_right.gif"); }
.footer_center {background-image: url("images/footer_center.gif");background-repeat:repeatx; color: white; font-family: tahoma; font-size: 12px}
h1 { color:#abbb2d; font-family: tahoma; padding-left: 10px}
p { font-family: tahoma; font-size: 14px}
.welcome { font-size: 18px; font-weight: bold}
.menu { list-style: none; margin: 0; padding:0 ; font-family: tahoma; font-size: 14px; }
a { color: gray; text-decoration: none}
a:hover { color: #abbb2d; text-decoration: underline; font-weight: bold}
.menu_cell {background-color: #dce6ca; }
</style>
</head>
<body height="100%">
<table class="design" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="left_head" width="42" height="153"></td>
<td class="header_center" ><img src="images/logo.gif" width="258" height="140" alt="Blogs logo"></td>
<td class="right_head" width="43" height="153"></td>
</tr>
<tr>
<td class="left_body" width="42" height="100%"></td>
<td class="center_body">
<table center_table width="100%">
<tr>
<td class="menu_cell"width="10%" height="100%">
<ul class="menu" >
<li> Home</li>
<li> About me</li>
<li> Links</li>
<li> Contact me</li>
</ul>
</td>
<td width="90%">
<h1>Home</h1>
<hr>
<p class="welcome"> Welcome to my first HTML & CSS website.</p>
<p>This is an assignment assigned by Dr. Jameleddine Hussaine, Web Development & Engineering course at King Fahd University. </p>
<p>* You can either navigate my website through the left navigation bar or the using the linke at the top. </p>
</td>
</tr>
</table>
</td>
<td class="right_body" width="43" height="100%"></td>
</tr>
<tr class="footer" valign="bottom">
<td class="left_footer" width="42" height="84"></td>
<td class="footer_center" >All copyright reserved © Hamad Alkathiri <br/> King Fahad University for Petroluem & Minerals</td>
<td class="right_footer" width="43" height="84"></td>
</tr>
</table>
</body>
</html>
Thank you.
html, body { height: 100%; } and you should look at this.
Make sure you add a min-height to your container or your body.
#container {
min-height:100%;
}
I could not find a direct answer for this, so please be patient if this has been asked before.
I have limited HTML experience. The width of the table columns within the email change when opened in Entourage and Gmail on my Android phone. Gmail on my PC looks fine, Outlook, Yahoo, etc. also great.
Essentially what happens is the widths of the left and right column switch in Entourage/Gmail-droid. Left column width should stay at width="401"; right column should stay fixed at width="171" (they swap so the left column is 171 and the right is 401).
I am working with an HTML email template I picked up online with nested tables. Here is the basic code with text and images stripped out. Any help would be appreciated:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
html {
-webkit-text-size-adjust:none;
-webkit-background-size:100%;
}
.bold {
color: #61BB46;
}
.Main {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #666666;
}
.Sidebar {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #666666;
}
a:link {
COLOR: #592989;
}
a:visited {
COLOR: #FAAB53;
}
a:hover {
COLOR: #61BB46;
}
a:active {
COLOR: #592989;
}
</style>
<body bgcolor="#ffffff" text="#666666" style="padding:0px; margin:0px;">
<table style="font-family: Verdana, Helvetica, sans-serif; color: #666666;
font-size: 12px; Line-height: 18px; width: 600px;" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td style="font-size: 30px; line-height: 32px; color: #592989;" colspan="4">
<div style="font-size: 12px; color:#999;"></div></td>
</tr>
<tr>
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 4px; background-color: #e3dede;"><img src=""
width="578" height="190"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td style="padding-top: 20px; padding-bottom: 20px; text-align: left;"
colspan="4"><p><a href="" target="_blank">
</td>
</tr>
<tr>
<td rowspan="5" width="401" valign="top"><p style="color: #592989;
font-size: 20px;"></p>
<p class="Main" style="margin-bottom: 1.0em">
</p></td>
<td rowspan="5" width="19" valign="top"> </td>
<td style="background-color: #592989; padding: 4px; padding-left: 8px;
color: #ffffff; font-size: 14px;" width="171" valign="top"><p></p></td>
<tr>
</table>
</body>
First rule with sending HTML email use inline styles. Many clients will strip out any styles in the <head> tag. The safest bet is to not even bother with a <head> or <body> tag as most of the time these get stripped out. Validate your html. You have some invalid markup that many clients will strip out:
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<tbody>
Should be:
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<table>
<tbody>