frontlawnmaterial
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by 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!
-
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?
-
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>
Ameteur Div Problems
in HTML/XHTML
Posted · Edited by 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:
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!
d