Belgoman Posted May 14, 2011 Share Posted May 14, 2011 Hi all,I'm trying to code an two colons email signature in Html. I had never used html before but I achieved to do this : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head><!--En-tête--> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> <title>Signature Email test</title> <style type="text/css"> <!-- td.col1 {width: 190px; valign: top; align: right;} table.tab_col1 {width: 190px; align: right; border: 0px; cellspacing: 0px; cellpadding: 0px;} td.col1_Nom {height: 19px; valign: top; align: right; font-family: Arial, Helvetica, sans-serif; color: #808080; font-size: 19px;} td.col1_Fonction {height: 12px; valign: top; align: right; font-family: Arial, Helvetica, sans-serif; color: #808080; font-size: 12px;} td.col1_Société {height: 19px; valign: top; align: right; font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 19px;} td.col2 {width: 10px; valign: top; align: left;} td.col3 {width: 150px; valign: top; align: left;} table.tab_col3 {width: 150px; align: left; border: 0px; cellspacing: 0px; cellpadding: 0px;} td.col3_Num {height: 12px; valign: top; align: left; font-family: Arial, Helvetica, sans-serif;color: #808080; font-size: 12px;} a.col3_Liens {TEXT-DECORATION: none; font-family: Arial, Helvetica, sans-serif; color: #808080; font-size: 12px; border-bottom: 1px dotted #808080;} --> </style> </head> <body><!--Corps--> <table align="left" cellspacing="0" cellpadding="0" frame="hsides"> <tbody> <tr> <td class="col1"><!--Colonne de gauche--> <table class="tab_col1"> <tbody> <tr><td class="col1_Nom">Prénom Nom</td></tr> <tr><td class="col1_Fonction">Fonction</td></tr> <tr><td class="col1_Fonction"> </td></tr> <tr><td class="col1_Société"><b>Société</b></td></tr> </tbody> </table> </td> <td class="col2"><!--Colonne du milieu (vide)--> </td> <td class="col3"><!--Colonne de droite--> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr><td class="col3_Num">Tel: +00 00 00 00 00</td></tr> <tr><td class="col3_Num">Fax: +00 00 00 00 00</td></tr> <tr><td class="col3_Num">Mobile: +00 00 00 00 00</td></tr> <tr><td class="col3_Num">E-mail: <a class="col3_Liens" href="mailto:Prénom.Nom@société.com" title="Envoyer un email à Prénom Nom">Prénom.Nom</a></td></tr> <tr><td class="col3_Num"><a class="col3_Liens" href="mailto:Prénom.Nom@société.com" title="Envoyer un email à Prénom Nom">@société.com</a></td></tr> <tr><td class="col3_Num">site: <a class="col3_Liens" href="http://www.société.com/" title="Visiter www.société.com">www.société.be</a></td></tr> </tbody> </table> </td> </tr> </tbody> </table> </body></html> It is working quite good except the "align" attribute. Indeed, the left colon is supposed to be align on the right side and it just doesn't work. Any idea ?I'm also looking for any improvement to make the signature better or shorter.Thank you,BelgomanNB : I'm French speaking so I do apologize for my poor English vocabulary. Link to comment Share on other sites More sharing options...
Err Posted May 16, 2011 Share Posted May 16, 2011 By 'colon' you mean 'column', right? Not sure why the text isn't aligning to the right but it may have to do with all the CSS mess you have there. Some of that CSS is not even needed. If you were aiming to put this in a signature I don't think you can use CSS the way you were using it here. You can use inline styles (style="") to get around that. I know you are just a beginner on this but you have a lot of code you don't need. I took 5min to do the same thing you were doing using less code. Compare this with your code to figure out what was not needed. <table style="width:350px; font-size:12px; color:#808080; font-family:Arial; border-top:1px solid gray; border-bottom:1px solid gray;"> <tr> <td style="font-size:19px; text-align:right;"> Prenom Nom<br /> <span style="font-size:12px;">Fonction</span><br /> <p style="color:black; font-weight:bold;">Societe</p> </td> <td style="vertical-align:middle;"> Tel: +00 00 00 00<br /> Fax: +00 00 00 00<br /> Mobile: +00 00 00 00<br /> Email: <a href="#" style="text-decoration:none; border-bottom:1px dotted gray; color:gray;">Prenom.Nom@societe.com</a><br /> Site: <a href="#" style="text-decoration:none; border-bottom:1px dotted gray; color:gray;">www.societe.be</a> </td> </tr></table> Link to comment Share on other sites More sharing options...
Belgoman Posted May 16, 2011 Author Share Posted May 16, 2011 Hi Err,Thank you for your answer. Indeed, I meant "columns"...As you suggested, I have compared your code to mine and added what (I think) was missing: * <span style="font-size:14px; color:#FFFFFF; ">-</span><br/> ==> I added this line in order to align vertically the text in the left colon (and also to align the borders as close as possible from the text) but i'm not sure it is the best way to do this;* title="Envoyer un email à Prénom Nom";* title="Visiter www.société.com";The result is just below : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head><!--En-tête--> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> <title>Signature Email test</title> </head> <body><!--Corps--> <table style="width:350px; font-size:12px; color:#808080; font-family:Arial; border-top:1px solid gray; border-bottom:1px solid gray;" > <tr> <td style="font-size:19px; vertical-align:top; text-align:right;"> Prenom Nom<br/> <span style="font-size:12px;">Fonction</span><br/> <span style="font-size:14px; color:#FFFFFF; ">-</span><br/> <span style="color:black; font-weight:bold;">Societe</span> </td> <td width:15px></td> <td style="vertical-align:top;"> Tel: +00 00 00 00<br/> Fax: +00 00 00 00<br/> Mobile: +00 00 00 00<br/> Email: <a href="#" style="text-decoration:none; border-bottom:1px dotted gray; color:gray;" title="Envoyer un email à Prénom Nom">Prenom.Nom@societe.com</a><br/> Site: <a href="#" style="text-decoration:none; border-bottom:1px dotted gray; color:gray;" title="Visiter www.société.com">www.societe.be</a> </td> </tr> </table> </body></html> Belgoman Link to comment Share on other sites More sharing options...
jeffman Posted May 16, 2011 Share Posted May 16, 2011 Is your horizontal alignment working now? It looks like you figured out that CSS does not have an "align" rule but rather has a "text-align" rule. "align" is an attribute that was allowed in <td> elements, going back to pre-CSS days, but is not supported in HTML5. Link to comment Share on other sites More sharing options...
Belgoman Posted May 16, 2011 Author Share Posted May 16, 2011 Hi Deirdre,Yes the horizontal alignment is working fine now but vertical Alignement is "soso" (I have inserted an empty line to make it look good but I'm not sure at all it is the best way...).Belgoman Link to comment Share on other sites More sharing options...
Err Posted May 16, 2011 Share Posted May 16, 2011 Instead of adding an extra line to space out your text, you can add a spacer, so instead of this: <span style="font-size:14px; color:#FFFFFF; ">-</span><br/> You can do this: <div style="height:30px;"></div> You can then change the height to whatever you think looks good.Also, you incorrectly used the width attribute on your middle cell. It should be width="15" or style="width:15px;" Link to comment Share on other sites More sharing options...
Belgoman Posted May 17, 2011 Author Share Posted May 17, 2011 Hi Err,Thank you for your advices. I changed it the way you suggested and adapted the height. The result is below : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head><!--En-tête--> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> <title>Signature Email test</title> </head> <body><!--Corps--> <table style="width:350px; font-size:12px; color:#808080; font-family:Arial; border-top:1px solid #000000; border-bottom:1px solid #000000;" > <tr> <td style="font-size:19px; vertical-align:top; text-align:right;"> Prenom Nom<br/> <span style="font-size:12px;">Fonction</span><br/> <div style="height:15px;"></div> <span style="color:black; font-weight:bold;">Societe</span> </td> <td style="width:5px;"></td> <td style="vertical-align:top;"> Tel: +00 00 00 00<br/> Fax: +00 00 00 00<br/> Mobile: +00 00 00 00<br/> Email: <a href="#" style="text-decoration:none; border-bottom:1px dotted gray; color:gray;" title="Envoyer un email à Prénom Nom">Prenom.Nom@societe.com</a><br/> Site: <a href="#" style="text-decoration:none; border-bottom:1px dotted gray; color:gray;" title="Visiter www.société.com">www.societe.be</a> </td> </tr> </table> </body></html> Is there any way to align vertically "Prénom Nom" as close as possible from the top border ?Belgoman Link to comment Share on other sites More sharing options...
Err Posted May 17, 2011 Share Posted May 17, 2011 There is, add this code in the <table> style: border-collapse: collapse;It removes the spacing from the invisible table borders which should get you closer to the top. Link to comment Share on other sites More sharing options...
Belgoman Posted May 18, 2011 Author Share Posted May 18, 2011 Hi Err,"border-collapse" is working fine. The result is perfect in my opinion. The final version is below in case somebody would like to use it : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head><!--En-tête--> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> <title>Signature Email test</title> </head> <body><!--Corps--> <table style="width:350px; font-size:12px; color:#808080; font-family:Arial; border-top:1px solid #000000; border-bottom:1px solid #000000;border-collapse: collapse;" > <tr> <td style="font-size:19px; vertical-align:top; text-align:right;"> Prenom Nom<br/> <span style="font-size:12px;">Fonction</span><br/> <div style="height:15px;"></div> <span style="color:black; font-weight:bold;">Societe</span> </td> <td style="width:5px;"></td> <td style="vertical-align:top;"> Tel: +00 00 00 00<br/> Fax: +00 00 00 00<br/> Mobile: +00 00 00 00<br/> Email: <a href="#" style="text-decoration:none; border-bottom:1px dotted gray; color:gray;" title="Envoyer un email à Prénom Nom">Prenom.Nom@societe.com</a><br/> Site: <a href="#" style="text-decoration:none; border-bottom:1px dotted gray; color:gray;" title="Visiter www.société.com">www.societe.be</a> </td> </tr> </table> </body></html> Thank you (and Deirdre) very much for your help.Belgoman Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.