Not sure why the valign="middle" not working here. Can someone please help me out with what is missing here.
HTML
<table id="my_table" style="width:100%;height:450px" cellpadding="0" cellspacing="0">
<tr>
<td width="5%" valign="middle">
<div id="left_arrow" align="center">
<img src='./button/3.png' id='leftArrow' /
</div>
</td>
<td width="60%" valign="middle" >
<div id="left_table" >
<div id="holder" >
<img src=".images/3.jpg" id="slideshow" />
</div>
</div>
</td>
<td width="5%" valign="middle">
<div id="right_arrow" align="center">
<img src='./button/2.png' id='rightArrow' />
</div>
</td>
</tr>
</table>
You want to take the inline styles out if possible, but here's the full solution.
<table id="my_table" style="width:100%;height:450px" cellpadding="0" cellspacing="0">
<tr>
<td width="5%" style="vertical-align:middle">
<div id="left_arrow" align="center">
<img src='./button/3.png' id='leftArrow' />
</div>
</td>
<td width="60%" style="vertical-align:middle">
<div id="left_table" >
<div id="holder" >
<img src=".images/3.jpg" id="slideshow" />
</div>
</div>
</td>
<td width="5%" style="vertical-align:middle">
<div id="right_arrow" align="center">
<img src='./button/2.png' id='rightArrow' />
</div>
</td>
</tr>
</table>
Click here for live demo
The valign attribute of is not supported in HTML5. Use CSS instead.
CSS syntax: <tr style="vertical-align:middle">
Related
I am making a HTML email that a clients suddenly want to be shown as a one-pager without scrollbars. I have edited the wrapper to 'height:100vh', but it still has scrollbars.
I want to know, how would i go about and make this page appear as a one pager without scrollbars in all different screen heights?
<body>
<table width="100%">
<tbody>
<tr>
<td class="wrapper" width="600" align="center">
<!-- Header image -->
<table class="section header" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column center">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/header2.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="section main" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table style="margin: 0 auto;">
<tbody>
<tr>
<td align="left">
<img src="./media/main-image1.png" alt="picsum" width="600"/>
<br>
<div class="firstparagraph">
<p class="comfortaaquote font40"> You will be OK... </p><br>
<span class="marck"> Sweetheart</span>
</div>
<br>
<br>
<p class="comfortaatext center2">A lady is reassuring her dog everything will be OK in the veterinary hospital in Hanoi, Vietnam while the vet nurse are busy working in the background</p>
<br>
<div class="buttons">
<div class="days-counter">
<img class="steps" src="./media/counter.png" alt="picsum" width="300" />
<div class="text-block"><p>14</p></div>
</div>
<img class="submit" src="./media/submit.png" alt="picsum" width="300" />
<br>
<br>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- bottom part-->
<!-- footer part-->
<table class="section bottom" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/bottom.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
should i be targeting the height:100vh to the body or the wrapper?
thank you
Hi I am trying to send an html in an Email.(Support related stuff)
Problem is that it is working fine on my local notepad.
LINKEDIN image is right on its place.
But when I send this html in gmail mail to user by my backend system (storing html in wso2 local entry point) then this LINKEDIN Icon move a little up.
Also Link of youtube video is also showing as attachment.
How can I solve this?
<tbody>
<tr>
<td style="text-align:center;padding:0px 0px">
<table align="center" bgcolor="#505050" border="0" cellpadding="0" cellspacing="0" style="max-width:650px;margin:auto;text-align:center" width="100%">
<tbody>
<tr>
<td align="center" style="text-align:center">
<img height="10%" width="5%" border="0" src="http://twitter-256.png" style="display:inline-block;padding:0px 8px"/>
<img height="6%" width="5% border=" src="http://facebooklogo.png" style="display:inline-block;padding:0px 8px"/>
<a href="https://youtube.com/mysitelink" ><img height="10%" width="5%" border="0" src="http://youtube.png" style="padding-top:100px:display:inline-block;padding:0px 8px"/></a>
<img height="20%" width="7%" border="0" src="http://Linkedin.png" style="position: relative;top: 12px;display:inline-block;padding:0px 6px"/>
</td>
</tr>
<tr>
<td align="center" style="text-align:center">
<p style="letter-spacing:3px;font-size:12px;margin:0;line-height:18px;text-align:center;font-family:'Nunito Sans',Arial,Verdana,Helvetica,sans-serif;color:#bababa;padding:20px 30px">
<span>CONTACT US</span>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
You were missing Semicolon in your styling and also you had a top: 12px; that was causing your linked in to be out of positioning just copy and paste my code I altered for you.
I Hope I was able to help!
<tbody>
<tr>
<td style="text-align:center;padding:0px 0px">
<table align="center" bgcolor="#505050" border="0" cellpadding="0" cellspacing="0" style="max-width:650px;margin:auto;text-align:center" width="100%">
<tbody>
<tr>
<td align="center" style="text-align:center">
<a href="https://twitter.com/mysitelink" target="_blank">
<img height="auto" width="5%" border="0" src="http://twitter-256.png" style="display:inline-block;padding:0px 8px;"/></a>
<a href="https://facebook.com/mysitelink" target="_blank">
<img height="auto" width="5%" border="0" src="http://facebooklogo.png" style="display:inline-block; padding:0px 8px;"/></a>
<a href="https://youtube.com/mysitelink" target="_blank" >
<img height="auto" width="5%" border="0" src="http://youtube.png" style="display:inline-block; padding:0px 8px;"/></a>
<a href="https://linkedin.com/mysitelink" target="_blank">
<img height="auto" width="5%" border="0" src="http://Linkedin.png" style="display:inline-block;padding:0px 8px;"/></a>
</td>
</tr>
<tr>
<td align="center" style="text-align:center">
<p style="letter-spacing:3px;font-size:12px;margin:0;line-height:18px;text-align:center;font-family:'Nunito Sans',Arial,Verdana,Helvetica,sans-serif;color:#bababa;padding:20px 30px">
<span>CONTACT US</span>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I'm trying to make a template on MailChimp, but I can't style it properly. There are a few caveats though: the CSS styles have to be in-line and it has to be structured as <table> tags.
This is what I have so far
This is the end-goal
Here is my code so far:
<section id="header" style="background-color: #148e97;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailHeader">
<tr>
<td align="right" valign="">
<div class="socialMediaIcons">
<img src="img/facebook.png"/>
<img src="img/twitter.png"/>
<img src="img/mail.png"/>
<img src="img/linkedin.png"/>
</div>
</td>
</tr>
</table>
<table id="title" width="500">
<tr>
<td align="left" valign="">
<img src="img/logo.png"/>
</td>
<td style="">
<h1 style="text-align: right; "
style="font-family: arial;">Brand USA E-News -- April 2016</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
</section>
When creating HTML emails, you need to transport yourself back in time, to a time when Internet Explorer 6 was cool.
You cannot use <section id="header"> or class="socialMediaIcons" because not all email clients support the <style> tag. HTML5 elements are most unsupported, and your CSS needs to be inlined and used with the style="..." attribute. There's a lot of mixed support for CSS in email clients, so you're forced to cater for the lowest common denominator.
The following code gives you a starting point for how to create your layout:
<html>
<body style="margin: 0; padding:0">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff">
<tr>
<td valign="center">
<div style="background-color: #148e97; width:660px; margin:auto;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="660" bgcolor="#148e97">
<tr>
<td width="30">
<img src="http://placehold.it/1x1" width="30" alt="Spacer">
</td>
<td width="130">
<img src="http://placehold.it/130x115" alt="Logo">
</td>
<td valign="top" width="500">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="500">
<tr>
<td>
<img src="http://placehold.it/1x1" width="1" height="20" alt="Spacer">
</td>
</tr>
<tr>
<td align="right">
<div class="socialMediaIcons">
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
</div>
</td>
</tr>
<tr>
<td align="right">
<h1 style="text-align: right; font-family: arial; color: #fff;">Brand USA E-News -- April 2016</h1>
</td>
</tr>
</table>
</td>
<td width="30"><img src="http://placehold.it/1x1" width="30" alt="Spacer"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
One thing you'll notice is there are a lot of <table> tags in other <table> tags inside even more <table> tags. Things get messy.
I've used the old school technique of spacer.gif (using http://placehold.it/1x1 in lieu of a 1x1.gif image), which is no longer needed these days when building websites.
Hopefully this code sets you on the right path. I haven't built HTML emails for 5+ years, so I'm a little rusty.
I have this definition:
<g:HTMLPanel ui:field="container" styleName="{style.itemcontainer}">
<table style="width:100%" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td width="25px" valign="bottom">
<b:Span ui:field="iconSpan" addStyleNames="{style.icon}"></b:Span>
</td>
<td width="60px">
<span ui:field="valueLabel" class="{style.valueLabel}">0%</span>
</td>
<td width="24px" class="{style.selectedIcon}">
<b:Icon ui:field="selectedIcon" type="BAR_CHART_O" visible="false"></b:Icon>
</td>
</tr>
</table>
</g:HTMLPanel>
I would like to convet the html table in 3 div´s.
Could you help me?
Check out float and box model. You could make this simpler with css.
<div style="float:left">
<b:Span ui:field="iconSpan" addStyleNames="{style.icon}"></b:Span>
</div>
<div style="float:left">
<span ui:field="valueLabel" class="{style.valueLabel}">0%</span>
</div>
<div style="float:left">
<b:Icon ui:field="selectedIcon" type="BAR_CHART_O" visible="false"></b:Icon>
</div>
<br style="clear:left" />
Why is content in the table appears to start from the center.How to make it to start from where the row starts
<table style="table-layout:fixed;width:100%;" border="1" cellpadding="0" cellspacing="0" class="main_table" id="main_table">
<tr>
<td width="20%" height="70px" align="center" id="plugins" class="step step1 clickable" step="1" onclick="javascript:getresource('1','0');">
<font color="blue">Plugins</font>
</td>
<td rowspan="5" width="80%" height="100%" align="center" ><br>
<div id="status" class="msg" style="display:none"><br></div>
<div id="header_msg" height="100%" align="center"></div>
<div id="contents" height="100%"></div>
</td>
</tr>
</table>
Remove 'align="center"' from both td's and the 2nd div, and if you want the data to start at the top of the cell, add 'valign="top"' to the tr ie:
<table style="table-layout:fixed;width:100%;" border="1" cellpadding="0" cellspacing="0" class="main_table" id="main_table">
<tr valign="top">
<td width="20%" height="70px" id="plugins" class="step step1 clickable" step="1" onclick="javascript:getresource('1','0');">
<font color="blue">Plugins</font>
</td>
<td rowspan="5" width="80%" height="100%"><br>
<div id="status" class="msg" style="display:none"><br></div>
<div id="header_msg" height="100%"></div>
<div id="contents" height="100%"></div>
</td>
</tr>
</table>
Apart from the bloated use of inline CSS, HTML tables for layouts and the not-so-popular -tag, I'd guess it's the..
align="center"
..that centers your content. Try replacing it with "left" instead. Do consider doing it the CSS way though:
text-align: left;
Use vertical-align:top