Jump to content

frontlawnmaterial

Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Everything posted by frontlawnmaterial

  1. frontlawnmaterial
    Hi again, So version two is below, and I've almost got it to function 100% properly in several browsers and email clients. The only parts I consider as not working are the vertical spaces between the following three locations: {Receiver} and 'Tracking Number' {Instructions} and 'Kind regards' 'Special Account Notices Go Here' and 'customerwebsite.com' In addition to also defining a horizontal space between each social media icon. Screenshot here. Any ideas or suggestions on how to improve the code? Thanks again! <html> <body> <table width="500" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"> <p align="center"><img src="http://mostlywebsites.net/wp-content/uploads/w3schools-logo.jpg" width="500" alt="Customer Logo"/></p> <p><font face="Calibri">Dear Valued Customer,</font></p> <p><font face="Calibri">Your order has been despatched to:</font></p> <p><font face="Calibri">{Receiver}</font></p> </td> </tr> <tr> <td width="230"> <p><font face="Calibri"><b>Tracking Number:</b></font><p> </td> <td width="270"> <font face="Calibri"><b>{Connote}</b></font> </td> </tr> <tr> <td width="230"> <font face="Calibri">Reference(s):</font> </td> <td width="270"> <font face="Calibri">{Reference}</font> </td> </tr> <tr> <td width="230"> <font face="Calibri">Freight Description:</font> </td> <td width="270"> <font face="Calibri">{Description}</font> </td> </tr> <tr> <td width="230"> <font face="Calibri">Additional Instructions:</font> </td> <td width="270"> <font face="Calibri">{Instructions}</font> </td> </tr> <tr> <td colspan="2"> <p><font face="Calibri">Kind regards,</font></p> <p><font face="Calibri">Customer Name</font></p> <p><font face="Calibri">1800 000 000</font></p> <p><font face="Calibri"><b>Special Account Notices Go Here</b></font></p> </td> </tr> <tr> <td colspan="2"> <p align="center"> <a href="http://www.w3schools.com/"><font face="Calibri"><b>customerwebsite.com</b></font></a> </p> <p align="center"> <a href="https://twitter.com/<!--Twitter Account-->"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/twitter.png" alt="<!--Customer Name--> Twitter" align="center"></a> <a href="http://youtube.com/<!--YouTube Account-->"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/youtube.png" alt="<!--Customer Name--> YouTube" align="center"></a> <a href="https://www.facebook.com/<!--Facebook Account-->"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/facebook.png" alt="<!--Customer Name--> Facebook" align="center"></a> <a href="http://instagram.com/<!--Instagram Account-->"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/instagram.png" alt="<!--Customer Name--> Instagram" align="center"></a> </p> <p align="center"> <a href="http://www.customerwebsite.com/shipping-and-returns"><font size="2" face="Calibri"><b>Freight Terms & Conditions</b></font></a> </p> </td> </tr> </table> </body></html> d
  2. frontlawnmaterial
    Good point COBOLdinosaur... I certainly didn't realise that it differed between between browsers / email clients so much. I think I'll go with this method for the interim, and perhaps investigate methods with CSS when technology catches up! davej - I made the width of the output so small, as I am still running one of those old square 13" monitors at work! I really like your dotted line method, and how you defined the CSS more effectively. Also I was unaware of being able to define multiple CSS ID selectors to have the same appearance. Thanks for your help!
  3. frontlawnmaterial
    Thanks COBOLdinosaur - that matrix will cetainly help me in the future. I'd prefer to use something a little more dynamic, but since it doesn't look possible, do you suggest using a table(s) instead?
  4. frontlawnmaterial
    Hi All, Please forgive me if I'm posting this in the incorrect area; I'm only new to HTML, CSS & W3 Schools. I am currently creating a email shipping notification that integrates with another system to extract information such as the receiver's address and tracking number in order to advise customers when they should expect freight deliveries. These fields are identified by the paramaters { & } in the code below. I have attached three images for reference. Chrome Output Outlook Output Desired Output (have the div 'bodyright' placed beside 'bodyleft') I don't intend to have the grey background showing; I have just done that to identify div easily. I therefore have the following questions: How do I move div 'bodyright' to be placed beside 'bodyleft'? How do I ensure that the social media icons have a gap separating them? How do I ensure that the group of social media icons are centred as shown in the desired output image? You will also note several comment sections in the code below; this is required as I must modify this template to suit individual customer's needs (who may not have certain social media accounts). Put simply - I would like the code to be written in a way that easily allows me to remove any element after the Sender's Phone number for the email. I hope my questions make sense! <html> <head> <style> #main {text-align:center; max-width: 466px; padding: 0px;} #logo {text-align:center; max-width: 466px; padding: 5px; margin: 0; auto} #header {text-align:left; min-width: 466px; padding: 0px; margin: 0; auto} #bodyleft {float:clear; text-align:left; min-width: 200px; max-width: 220px; padding: 0px; margin: 0; auto} #bodyright {text-align:left; min-width: 200px; max-width: 220px; padding: 0px; margin: 0; auto} #signature {float:clear; text-align:left; min-width: 466px; padding: 0px; margin: 0; auto} #footer {float:clear; text-align:center; min-width: 466px; padding: 0px; margin: 0; auto} #social {float:clear; text-align:center; min-width: 466px; padding: 0px; margin: 0; auto} body {font-family: Calibri;} p {margin-left: 10px; margin-right: 10px} .logoimage {content:url("http://mostlywebsites.net/wp-content/uploads/w3schools-logo.jpg"); align:center; max-width:450px; height:auto;} </style> </head> <body> <div id="main"> <div id="logo"> <img class="logoimage"/> </div> <div id="header"> <p>Dear Valued Customer,</p> <p>Your order has been despatched to:</p> <p>{Receiver}</p> </div> <div id="bodyleft"> <p><b>Tracking Number:</b></p> <p>Reference(s):</p> <p>Freight Description:</p> <p>Additional Instructions:</p> </div> <div id="bodyright"> <p><b> <a href="http://www.companyname.com.au/tracking-tool/?id={Connote}"> {Connote} </a> </b></p> <p>{Reference}</p> <p>{Description}</p> <p>{Instructions}</p> </div> <div id="signature"> <p>Kind Regards,</p> <p>{Sender}.</p> <p>(00) 0000 0000</p> </div> <div id="footer"> <p> <a href="http://www.customerswebsite.com.au" target="_blank"> customerswebsite.com.au </a> </p> </div> <div id="social"> <a href="<!--Replace with Company Facebook URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/facebook.png" alt="<!--Replace with Company Name--> Facebook" hspace="10"> </a> <a href="<!--Replace with Company Google Plus URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/google_plus.png" alt="<!--Replace with Company Name--> Google+" hspace="10"> </a> <a href="<!--Replace with Company Instagram URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/instagram.png" alt="<!--Replace with Company Name--> Instagram" hspace="10"> </a> <a href="<!--Replace with Company LinkedIn URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/linkedin.png" alt="<!--Replace with Company Name--> LinkedIn" hspace="10"> </a> <a href="<!--Replace with Company Pinterest URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/pinterest.png" alt="<!--Replace with Company Name--> Pinterest" hspace="10"> </a> <a href="<!--Replace with Company Twitter URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/twitter.png" alt="<!--Replace with Company Name--> Twitter" hspace="10"> </a> <a href="<!--Replace with Company YouTube URL-->"" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/youtube.png" alt="<!--Replace with Company Name--> YouTube" hspace="10"> </a> </div> </div> </body></html>
×
×
  • Create New...