html - Use round corners without gif and add background color on top and underneath instead of gif -
i trying create email template. bottom , top headers wish use round corners way have managed using gif files...how can without on code below ? (right table border incomplete , down, not closed). have tried adding gif image in center
<td valign="top" align="center"><img src="file:///c|/users/the/desktop/my gif.gif" width="288" height="146"></td> and have background color around edges or behind image considering transparent - , on bottom.
any other edits on template more welcome.
<html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <base target="_blank"> <title>==</title> </head><body> <table width="614" border="0" align="center" cellpadding="0" cellspacing="0" style="font-family:arial, helvetica, sans-serif; font-size:12px; color:#656565;"> <tbody><tr> <td valign="top" align="center"><img src="file:///c|/users/the/desktop/my gif.gif" width="288" height="146"></td> </tr> <tr> <td valign="top" style="border-left:1px solid #cbd6dc;border-right:1px solid #cbd6dc; padding:0 18px 20px; text-align:left;"> <table width="576" border="0" cellspacing="0" cellpadding="0" style="font-family:arial, helvetica, sans-serif; font-size:12px;"> <tbody><tr> <td valign="top" style="font-size:14px; padding:10px 0 15px; font-weight:bold">hello user,<br></td> </tr> <tr> <td valign="top" style="font-size:19px; padding:10px 0 16px 0; text-align:center;color:#449ac2; ">congragulations ! </td> </tr> <tr> <td valign="top" style=" padding:0 0 15px;"> <table style="width:554px; border:#d3dde2 1px solid; background:#eef3f6;" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr> <td valign="top"><div style="font-size:12px; padding:16px 25px 0 0; line-height:20px; text-align:left;padding-bottom:20px;"><a href="http://www.website.com/signup?sname=zmail23&isp=gmail&invitation_key=201307f998225213537deb9e8a3c5930&tt=773&sub=755&referral=bacorichard&tp=8&hr=2013072111&cid=23&source=5" style=" color:#666; text-decoration:none">. <p>congragulations text here <br> <br> </p></a></div><a href="http://www.website.com/signup?sname=zmail23&isp=gmail&invitation_key=201307f998225213537deb9e8a3c5930&tt=773&sub=755&referral=bacorichard&tp=8&hr=2013072111&cid=23&source=5" style=" color:#666; text-decoration:none"></a></td> </tr> <tr> <td valign="bottom" style="padding:0 0 50px 0"><a target="_blank" style=" border:2px solid #fff; padding:5px 6px; background:#f7b225; color:#ffffff; font-size: 16px; font-weight: bold; text-align: center;text-decoration:none; " href="http://www.website.com/signup?sname=zmail23&isp=gmail&invitation_key=201307f998225213537deb9e8a3c5930&tt=773&sub=755&referral=bacorichard&tp=8&hr=2013072111&cid=23&source=5"> take me there</a></td> </tr> </tbody></table> </td> </tr> <tr> <td valign="top" style="padding-bottom:18px;"> <div style="font-family:arial, helvetica, sans-serif; font-size:14px; text-align:left; padding:0 ; margin:0;color:#656565">regards,</div> <div style="font-family:arial, helvetica, sans-serif; font-size:14px; text-align:left; padding:0; margin:0;color:#656565">the team</div> </td> </tr> </tbody></table> </td> </tr> <tr> <td valign="top" style="font-size:11px; font-family:arial, helvetica, sans-serif; line-height:16px; padding:10px 0; background:#f6f7fa;border-left:1px solid #cbd6dc;border-right:1px solid #cbd6dc;border-top:1px solid #cbd6dc; padding:15px 18px 0 18px; text-align:center;"> </td> </tr> <tr> <td valign="top"><img align="top" src="width="614"" height="23"> </td> </tr> </tbody></table> <img src="http://signup.website.com/signup/open_invitation/2013072111/773/755/23/8?isp=gmail&source=5" style="display:none;visibility:hidden;" height="0" width="0/"> </body></html>
you can add border-radius property table style.
style="font-family:arial, helvetica, sans-serif; font-size:12px;border:1px solid #cbd6dc;border-radius: 5px;"
Comments
Post a Comment