5568 sujets

Sémantique web et HTML

Signature mail

Bonjour à tous Smiley smile

Actuellement nouvellement en poste, j'ai dû réaliser des signatures de mail, "jusqu'ici tout va bien".
Création sur Illustrator et photoshop pour la création des tranches et du code. Tout fonctionne jusqu'a l'ouverture dans un navigateur.
Par contre, lorsque je veux l'insérer dans la signature Gmail par exemple (parce que j'ai encore d'autres soucis en plus sur Outlook mais bon passons..). Une barre blanche (un espace) se met entre mes images :hum:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
	td {line-height:0; font-size: 0.0em; }
	img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>

_________________________________________________________________________________ -->

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (BENJAMIN_email-signature.psd) -->
<table id="Tableau_01" width="500" height="150" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="https://image.noelshack.com/fichiers/2018/04/5/1516981339-benjamin-email-signature-01.png" width="500" height="68" alt="Mon nom" title="Mon nom- Ma fonction"></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="https://image.noelshack.com/fichiers/2018/04/5/1516981340-benjamin-email-signature-02.png" width="161" height="82" alt="logo"></td>
		<td>
			<a href="mailto:benjamin.lalisse@akor2pret.com"><img src="https://image.noelshack.com/fichiers/2018/04/5/1516981339-benjamin-email-signature-03.png" width="196" height="22" alt="adresse mail" title="Répondez-moi par e-mail."></a></td>
		<td rowspan="2">
			<img src="https://image.noelshack.com/fichiers/2018/04/5/1516981340-benjamin-email-signature-04.png" width="143" height="82" alt="image signature mail"></td>
	</tr>
	<tr>
		<td>
			<img src="https://image.noelshack.com/fichiers/2018/04/5/1516981340-benjamin-email-signature-05.png" width="196" height="60" alt="adresse et téléphone" title="adresse et téléphone"></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
_________________________________________________________________________________ -->
</html>

Modifié par A2P (15 May 2018 - 15:00)
C'est "normal"
Je veux dire que depuis je ne sais plus quelle version des standards la fabrication d'images composées en mettant des images partielles dans des cellules ne fonctionne plus.
Pourquoi ne pas mettre les deux images dans la même cellule?
Je ne suis pas à l'aise avec l'utilisation des tableaux...Je n'en fait pratiquement jamais Smiley ohwell

Je met l'image 01 dans le td du dessous ? Mais qu'en est-il des rowspan et colspan ?

Merci du retour en tout cas !
Modifié par A2P (13 Feb 2018 - 12:08)
C'est malheureusement plus compliqué que je pensais à première vue.
Si je mets ton code dans un fichier HTML et que je l'affiche dans FireFox ça s'affiche sans ligne blanche, contrairement à ce que je pensais.

Le problème vient probablement du fait que les programmes qui affichent les messages dans les logiciels de messagerie ne sont pas des navigateurs web standard. C'est en particulier le cas pour les outils de messagerie de type webmail, dont Gmail.

Personnellement, j'aurais plutôt fait une seule image avec tout dessus.

Noter que pour supporter "mailto:" il faut configurer son PC, ce que la plupart des gens ne savent pas faire. Donc avoir une zone dont le but est d'avoir un lien "mailto:" n'est pas utile, or ça me semble être la seule raison pour laquelle tu as fait cette décomposition.
Il y a dans le header de messagerie un paramètre reply-to qui correspond mieux à ce que tu veux faire.
Pas le temps de faire plus d'investigations, désolé!
Merci pour le temps accordé PapyJP,

En effet, ce que je ne comprends pas c'est que mes borders sont bien à 0 et que l'affichage est correct dans n'importe quel navigateur..
Effectivement, je suis partie sur une version HTML car je voulais mettre l'e-mail cliquable (une messagerie par défaut est souvent configuré sur les pc pro), mais le soucis c'est que par la suite je sais que je devrais ajouter des icons (et donc les liens) vers des pages de réseaux sociaux. Alors dans l'immédiat, les salariés ont mis la version image mais j'aurais plus de soucis au moment où il me faudra mettre ces nouveaux liens.
C'est pour celà que le but était d'avoir une signature esthétique qui contenait des informations tels que l'e-mail cliquable, un lien google map pour l'agence, un lien vers la page Fb, et un lien vers la page Insta...Sans compter le fait qu'il était possible d'indiquer les ALT en cas de problème d'affichage (Ex: téléchargement des images non automatique sur certaines messageries)et des Title; alors qu'une simple image ce n'est pas possible (enfin...Mettre en HTML jusque pour une image qui ne fait qu'un bloc juste pour un ALT imprécis...).

J'ai ce problème sur Gmail, mais également sur Outlook, qui lui, n'est pas un webmail (et c'est même pire !).

Si quelqu'un passe par là et saurais me dire ce que je peux modifier pour corriger cela :siffle: ??

Appartement l'erreur ne vient pas du body alors ? Le code semble correct ?
Est-ce que je peux l'intégrer comme ça ?

Merci beaucoup en tout cas Smiley smile 


<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- Save for Web Slices (BENJAMIN_email-signature.psd) -->
<table id="Tableau_01" width="500" height="150" border="0" cellpadding="0" cellspacing="0">
<style>
tbody{
    line-height: 0;
}
</style>
	<tr>
		<td colspan="3">
			<img src="https://image.noelshack.com/fichiers/2018/04/5/1516981339-benjamin-email-signature-01.png" width="500" height="68" alt="Mon nom" title="Mon nom- Ma fonction"></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="https://image.noelshack.com/fichiers/2018/04/5/1516981340-benjamin-email-signature-02.png" width="161" height="82" alt="logo"></td>
		<td>
			<a href="mailto:benjamin.lalisse@akor2pret.com"><img src="https://image.noelshack.com/fichiers/2018/04/5/1516981339-benjamin-email-signature-03.png" width="196" height="22" alt="adresse mail" title="Répondez-moi par e-mail."></a></td>
		<td rowspan="2">
			<img src="https://image.noelshack.com/fichiers/2018/04/5/1516981340-benjamin-email-signature-04.png" width="143" height="82" alt="image signature mail"></td>
	</tr>
	<tr>
		<td>
			<img src="https://image.noelshack.com/fichiers/2018/04/5/1516981340-benjamin-email-signature-05.png" width="196" height="60" alt="adresse et téléphone" title="adresse et téléphone"></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>

Modifié par A2P (13 Feb 2018 - 15:20)
Tu n'a pas de tbody, oops...
Tu peux également faire comme cela : 

<table style="line-height: 0;" id="Tableau_01" width="500" height="150" border="0" cellpadding="0" cellspacing="0">
Dac merci ! Smiley smile

Il faut que j'essaie sur le poste d'un salarié ...Si pas de nouvelles..Bonne nouvelle :')
(oui parce que sur ma signature à moi..Je n'ai pas eu ce soucis là..Alors que j'ai fait la même trame de création...Juste le pc ou s'est mis en place qui change)
Mais du coup, a quoi il sert le line-height qui était déjà présent ? Il aurait fallu dupliquer la ligne mais avec TR ?


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
	td {line-height:0; font-size: 0.0em; }
	img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
Oui, le line height déjà présent s'appliqué uniquement aux cellules. Le but été de le faire pour l’ensemble de la structure
Modifié par JENCAL (13 Feb 2018 - 15:59)
Bonjour PapyJP, A2P,
PapyJP a écrit :
C'est "normal"
Je veux dire que depuis je ne sais plus quelle version des standards la fabrication d'images composées en mettant des images partielles dans des cellules ne fonctionne plus.
Pourquoi ne pas mettre les deux images dans la même cellule?

#PapyJP:
Si je peux me permettre, c'est pas tout à fait vrai, c'est la technique qui n'est plus d'actualité
mais cela fonctionne encore, les standards n'ont rien à voir avec cela.

Personnellement pour avoir découpé de nombreux e-mailling du marketing et pour avoir une compatibilité maximale que cela soit webmail (gmail) ou logiciel de mail (outlook) le tableau reste à mon sens la meilleur solution.

#A2P :
Je ne sais pas si tu as réglé ton pb mais voici quelques conseils à prendre ou à laisser, issues de mon expérience pour ton problème de signature :
- pas de balise style, mettre le style directement sur la balise quitte avoir des redondances
- utilise les attributs d'alignement des cellules "align = left" et "valign = top" en non les propriétés css
- colle ta balise img à td <td><img et non <td> <img idem pour la fermeture
- les images sont toujours en style="display:block"
- tes cellules td et tr en style="font-size:0;line-height:0;"
- dans le alt de l'image reprendre le texte de l'image, alt="logo" => alt="non entreprise"
- si ton image est dans une lien mettre attribut border=0 et un style="border:0"
- mettre sur le td un width="width de l'image" idem pour le height
- le float est à oublier
Je suis parti sur un formulaire HTML car je devais mettre un courrier électronique interactif (un courrier électronique par défaut est souvent organisé sur un ordinateur expert), mais le problème est que, finalement, je réalise que je devrais inclure des symboles (et par la suite des interfaces) dans les pages de communication informelles. Donc, dans un avenir rapproché, les travailleurs ont mis la forme de l'image, mais j'aurais plus d'inconvénients à mettre ces nouvelles connexions. Smiley biggrin Smiley biggrin


___________________________________________
https://tgw.onl/hostgator/ , https://tgw.onl/dreamhost/ , https://tgw.onl/bluehost/
Modifié par drak15 (25 Dec 2018 - 09:57)
Sujet clos
Aller à