I have set the width of each element in the menu to be 25% (totaling 100%). See code below:
<html>
<head>
<title>Epsilon Eridani Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--page header-->
<h1>Epsilon Eridani Project</h1>
<!--menu-->
<table width="100%" bgcolor="white" cellpadding="4" cellspacing="4">
<tr>
<td width="25%">
<img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
<span class="menu">Home</span></td>
<td width="25%">
<td width="25%">
<img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
<span class="menu">Eridanus</span></td>
<td width="25%">
<td width="25%">
<img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
<span class="menu">Latest News</span></td>
<td width="25%">
<td width="25%">
<img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
<span class="menu">Community</span></td>
<td width="25%">
</tr>
</table>
</html>
However, in the output, it looks very messed up. See output in this image
I am confused as to why this is happening? Thank you for your time.
You have a few
<td width="25%">
That don't have a closing </td>
It's also good practice to indent your code, it will make it easier to find the issues.
<table width="100%" bgcolor="white" cellpadding="4" cellspacing="4">
<tr>
<td width="25%">
<img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
<span class="menu">Home</span>
</td>
<td width="25%"></td> <!-- Should this be here?? -->
<td width="25%">
<img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
<span class="menu">Eridanus</span>
</td>
<td width="25%"></td> <!-- Should this be here?? -->
<td width="25%">
<img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
<span class="menu">Latest News</span>
</td>
<td width="25%"></td> <!-- Should this be here?? -->
<td width="25%">
<img src="images/s-logo.jpg" alt=" " height="40" width="60"/>
<span class="menu">Community</span>
</td>
<td width="25%"></td> <!-- Should this be here?? -->
</tr>
</table>
I hope this puts you on the right track to solve your problem. :)
Related
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 have a WordPress main page that everything is aligned to the left. I want to move them to the center > http://www.architravel.com/destinations/.
Could you kindly explain what do i have to do to center it?
That is the code of the main page:
<?php
/**
* Template Name: Home page
*
*
*/
get_header(); ?>
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td height="200" colspan="2" valign="bottom">
</td>
</tr>
<tr>
<td colspan="2" valign="bottom">
<img src="<?php echo get_template_directory_uri(); ?>/images/destinations_top.jpg" alt="Architravel Destinations" width="518" height="56" border="0"> <div style="clear:both;"></div>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#506DAF">
<img src="<?php echo get_template_directory_uri(); ?>/images/top.jpg" width="1230" height="257" alt="top" >
</td>
</tr>
<tr>
<td valign="top" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="405" height="102" valign="top" >
<img src="<?php echo get_template_directory_uri(); ?>/images/architeam.jpg" alt="Architeam Projects" width="410" height="102" border="0">
</td>
<td valign="top">
<img src="<?php echo get_template_directory_uri(); ?>/images/planebottom.jpg" align="left" alt="top_bottom">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" colspan="10" valign="top">
</td>
</tr>
<tr>
<td width="190" valign="top">
</td>
<td width="25" valign="top">
<img src="<?php echo get_template_directory_uri(); ?>/images/doty.jpg" width="20" height="18" alt="doty">
</td>
<td valign="middle" style="vertical-align: middle;">
Last Destination:
</td>
<td width="350" valign="middle" style="vertical-align: middle;">
LOS ANGELES - LAS VEGAS - SAN FRANCISCO<br/>
</td>
<td width="25" valign="top">
<img src="<?php echo get_template_directory_uri(); ?>/images/doty.jpg" width="20" height="18" alt="doty">
</td>
<td valign="middle" style="vertical-align: middle;">
Destinations Archive:
</td>
<td valign="middle" style="vertical-align: middle;">
MEXICO |
SINGAPORE - MALAYSIA |
CHINA |
BRAZIL |
ZARAGOZA - BILBAO |
JAPAN
</td>
</tr>
<tr>
<td height="50" colspan="10" valign="top">
</td>
</tr>
<tr>
<td valign="top">
</td>
<td colspan="3" valign="top">
<img src="<?php echo get_template_directory_uri(); ?>/images/archipaper.jpg" alt="ArchiPaper" width="250" height="61" border="0">
</td>
<td colspan="3" valign="center">
<img src="http://www.architravel.com/destinations/wp-content/uploads/2016/06/ArchiTravel_LOGO.png" alt="ArchiTravel" width="250" height="68" border="10">
</td>
<td valign="top">
</td>
<td valign="top">
</td>
<td valign="top">
</td>
<td valign="top">
</td>
<td valign="top">
</td>
</tr>
</table>
</td>
</tr>
</table>
<?php get_footer(); ?>
To insure it cant be over-riden i would assign it an ID in a div and align the div.
<div id='table1'>
<table>
</table>
</div>
And then you can style it with
#table1{
text-align:none;
}
Change:
align="left"
to:
align="center"
in your table.
I had to create an emailing html and I can say it is definitely a hard thing to do. Now, making sure it is responsive is beyond obnoxious.
I'm stuck right now on a seemingly unsolvable problem.
Here is the problem : I have a table with 3 columns (column 1 is a table, column 2 a spacer colum, column 3 is a table).
When I go mobile, I want the third column to go under the column 1. But no matter what I try I cant do it.
Please note that the display parameter CANT be used. That's very important. Google mail doesnt know what display means (...)
The only thing that seem ok to use are : float and align.
Here is my jsfiddle
https://jsfiddle.net/cnw0o3wy/
the follow us and contact us cells are in the same table; that table must go under the first table. I fail to achieve that effect for now
<tr>
<td>
<table align="center">
<tr>
<td class="align-top grey responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307">
<tbody>
<tr class="grey">
<td class="align-top"colspan="3"><img alt="" src="images/mobile.png" /></td>
</tr>
<tr class="grey">
<td width="113" class="w113"> </td>
<td>
<img src="images/appstore.png" title="Apple Store" />
</td>
<td>
<img src="images/googleplay.png" title="Google Play" />
</td>
</tr>
</tbody>
</table>
</td>
<td width="4"class="responsive">
</td>
<td class="responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307" class="w307">
<tbody class="grey">
<tr class="grey">
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="t-gris px12 bold align-top">Follow us !</td>
</tr>
<!-- 32 PX SPACING -->
<tr>
<td height="36" width="151" class="w151"><img src="images/shim.png" alt="" height="31" /> </td>
</tr>
<tr class="align-center">
<td>
<img class="social" src="images/fb.png" alt="Facebook" />
<img class="social" src="images/twitter.png" alt="Twitter" />
<img class="social" src="images/mail.png" alt="Mail" />
</td>
</tr>
</tbody>
</table>
</td>
<td class="white">
<img alt="" src="images/shim.png" width="4" />
</td>
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px12 bold t-gris align-top">Contact us !</td>
</tr>
<tr>
<td><img alt="" src="images/logo2.png" /></td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px10 t-gris bold">
50/54 <br/>92100 <br/>+33 1 49 00 00 00 www.mail.fr
<span style="text-decoration: underline;">
courrier#mail.fr
</span>
</td>
</tr>
<tr>
<td style="line-height:7px;"height="7" width="151" class="w151"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
solved my problem with the following lines :
td[class="responsive-grey"],
td[class="responsive-grey responsive-grey-spacing"],
td[class="align-top grey responsive-grey"] {
float: left; width:100%;
}
basically float left on all three columns
I've always used rowspan for web site development but now designing and developing email comms rowspan, it appears constantly breaks. In multiple clients it displays with a 10/20px gap. How can I avoid using row span even if I need to have two images side by side in an email (such as a header)?
<html>
<head>
<title>StPatricksDAy-PostCard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (StPatricksDAy-PostCard.psd) -->
<table id="Table_01" width="657" height="684" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="6">
<img src="images/StPatricksDAy-PostCard_01.gif" width="19" height="643" alt=""></td>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_02.gif" width="636" height="14" alt=""></td>
<td rowspan="6">
<img src="images/StPatricksDAy-PostCard_03.gif" width="2" height="643" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_04.gif" width="636" height="96" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_05.gif" width="636" height="9" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/StPatricksDAy-PostCard_06.jpg" width="257" height="523" alt=""></td>
<td>
<img src="images/StPatricksDAy-PostCard_07.gif" width="368" height="449" alt=""></td>
<td rowspan="3">
<img src="images/StPatricksDAy-PostCard_08.gif" width="11" height="524" alt=""></td>
</tr>
<tr>
<td>
<img src="images/StPatricksDAy-PostCard_09.gif" width="368" height="74" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/StPatricksDAy-PostCard_10.gif" width="625" height="1" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/StPatricksDAy-PostCard_11.gif" width="657" height="28" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/StPatricksDAy-PostCard_12.gif" width="657"
height="13" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
I have observed this table deviates from its specified width..As I add a table to one of its cell, the table stretches..I tried to debug it but to no avail..The highlighted part is the table that stretches it..How can I fix this?
<!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>Untitled Document</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="720" border="1" align="center">
<!-- first part -->
<tr>
<td valign="top">
<!-- Start top spacer -->
<table width="720" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-top_2.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End top spacer -->
</td>
</tr>
<tr>
<td valign="top" bgcolor="#99FFFF">
<!-- Start body -->
<table width="720" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" >
<!-- start main body -->
<table cellspacing="0" cellpadding="0" width="662">
<tr>
<td>Main content
</td>
</tr>
</table>
</td>
<!-- End main body -->
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End body -->
</td>
</tr>
<tr>
<td valign="top">
<!-- Start bottom spacer -->
<table width="720" border="0" align="center">
<tr>
<td valign="top">
<img src="Spacer-bottom_left.jpg" width="46" height="21" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-bottom_top.jpg" width="21" height="21" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-bottom_right.jpg" width="52" height="21" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End bottom spacer -->
</td>
</tr>
<!-- /first part -->
</table>
</body>
</html>
http://jsfiddle.net/vq8hg/2/
Try code below.
<!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>Untitled Document</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="720" border="1" align="center">
<!-- first part -->
<tr>
<td valign="top">
<!-- Start top spacer -->
<table style="width:100%" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-top_2.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End top spacer -->
</td>
</tr>
<tr>
<td valign="top" bgcolor="#99FFFF">
<!-- Start body -->
<table style="width:100%" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" >
<!-- start main body -->
<table cellspacing="0" cellpadding="0" width="662">
<tr>
<td>Main content
</td>
</tr>
</table>
</td>
<!-- End main body -->
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End body -->
</td>
</tr>
<tr>
<td valign="top">
<!-- Start bottom spacer -->
<table style="width:100%" border="0" align="center">
<tr>
<td valign="top">
<img src="Spacer-bottom_left.jpg" width="46" height="21" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-bottom_top.jpg" width="21" height="21" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-bottom_right.jpg" width="52" height="21" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End bottom spacer -->
</td>
</tr>
<!-- /first part -->
</table>
</body>
</html>
Can you remove the width="662" from the table with "Main Content?" That appeared to fix it for me on jsfiddle...