Jump to content

Ameteur Div Problems


frontlawnmaterial

Recommended Posts

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.

  1. Chrome Output
  2. Outlook Output
  3. 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:

  1. How do I move div 'bodyright' to be placed beside 'bodyleft'?
  2. How do I ensure that the social media icons have a gap separating them?
  3. 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>

 

post-184585-0-46280900-1432525634_thumb.png

post-184585-0-95443500-1432525635_thumb.png

post-184585-0-90575700-1432525636_thumb.png

Link to comment
Share on other sites

That code has zero hope of working across multiple email clients.

 

Each email client has its own rules about what they will accept. Gmail will not permit anything that conflicts with its own stylesheet. Outlook is not even consistent across version. User preferences may limit or block HTML, and some clients by default will block html. Plus spam filers may dump it into a spam folder.

 

You need to look at: https://www.campaignmonitor.com/css/ where you will find a matrix that should make it clear that you are not going to meet your goal, and if you manage to get it so 60% of the email you send that way is readable you will be doing well. The only certain way you have of the email being delivered as you have sent it is to use straight text.

  • Like 1
Link to comment
Share on other sites

Generally tables are not used for layout except for email where they are often a good alternative. Using a table will mean you don't have to use a lot of CSS and that is the thing the email client mess ut the worst.

 

The trick is to keep it very simple and basic like you are still in the 20th century because email clients are 20th centrury technology that has not evolved very much in terms of presentation capabilities.

Link to comment
Share on other sites

I'm not sure what you want, since a 466px width is very small, but this seems closer...

As COBOL says above... only testing will tell you whether the various email services will actually display this.

<html>	<head>		<style>                        #logo,#main,#header,#bodyleft,#bodyright,#signature,#footer{background-color:#aaa;border:1px dotted #000;}			#main {text-align:center; width: 466px; padding: 0px;}			#logo {text-align:center; padding: 5px; margin: 10px;}			#header {text-align:left; padding: 0px; margin: 10px;}			#bodyleft {float:left; text-align:left; width: 220px; padding: 0px; margin: 10px 0 10px 10px;}			#bodyright {float:right; text-align:left; width: 220px; padding: 0px; margin: 10px 10px 10px 0;}			#signature {clear:both; text-align:left; padding: 0px; margin: 10px;}			#footer {text-align:center; padding: 0px; margin: 10px;}			#social {text-align:center; padding: 0px; margin: 10px;}			body {font-family: Calibri;}			p {margin: 10px}			.logoimage {content:url("http://mostlywebsites.net/wp-content/uploads/w3schools-logo.jpg"); text-align:center; width:426px;}                        #social a{display:inline-block;text-align:center;}		</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 dispatched 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="Facebook"/>				</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="Google+"/>				</a>				<a href="<!--Replace with Company Instagram URL-->" target="_blank">					<img src="http://www.imagelocation.com.au/Downloads/ASN-Images/instagram.png"					alt="Instagram"/>				</a>				<a href="<!--Replace with Company LinkedIn URL-->" target="_blank">					<img src="http://www.imagelocation.com.au/Downloads/ASN-Images/linkedin.png"					alt="LinkedIn"/>				</a>				<a href="<!--Replace with Company Pinterest URL-->" target="_blank">					<img src="http://www.imagelocation.com.au/Downloads/ASN-Images/pinterest.png"					alt="Pinterest"/>				</a>				<a href="<!--Replace with Company Twitter URL-->" target="_blank">					<img src="http://www.imagelocation.com.au/Downloads/ASN-Images/twitter.png"					alt="Twitter"/>				</a>				<a href="<!--Replace with Company YouTube URL-->" target="_blank">					<img src="http://www.imagelocation.com.au/Downloads/ASN-Images/youtube.png"					alt="YouTube"/>					</a>			</div>		</div>	</body></html>
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

css3 styling (control:) is very unlikely to be supported, and i don't know if it is still carried out still! but Gmail used to strip out <head></head> tags completely so placing styljng there would be useless. That is why tables and inline styling is used within html tags within body.Note: outlook, gmail were a major pain.

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

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:

  1. {Receiver} and 'Tracking Number'
  2. {Instructions} and 'Kind regards'
  3. '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

Edited by frontlawnmaterial
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...