[Html/css]Faire un mail texte + image

Bonsoir, avant tout de chose merci de ne pas me taper si je me suis trompé de forum où si j’ai pas assez bien chercher comment résoudre mon soucis.

Donc voilà le problème, un ami veut promouvoir son site et pour cela on aimerait pouvoir faire un mail avec un fond derrière comme ca. Sauf qu’en testant une fois en mail voilà le résultat.

Je vous met le code en question :

[html]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. div.conteneur { position:relative; } /* Tout c'qui est en dessous est positionné par rapport au div conteneur (position relative) de dessus */
			div.conteneur h1.titre {
				position:absolute;
				top:-25px;
				left:280px;
				color:#bbb;
				font-family:verdana;
				z-index:4;
			}
			
			div.conteneur img#fond {
				position:absolute;
			}
			div.conteneur img#centre { 
				position:absolute; 
				left:50px; 
				top:15px;
				z-index:1;
			}
			div.conteneur img#pillierG {
				position:absolute; 
				z-index:2;
			}
			div.conteneur img#pillierD { 
				position:absolute; 
				z-index:2;
				left:850px;
			}
			div.conteneur div.texte {
				position:absolute;
				z-index:3;
				width:770px;
				left:120px;
				top:50px;
				color:white;
			}
	</style>
</head>
<body>
	<div class="conteneur">

		<h1 class="titre">Lorem ipsum</h1>
		
		<img src="http://nostradidifan.free.fr/planetes.png" id="fond"/>
		<img src="http://nostradidifan.free.fr/pillier-G.png" id="pillierG"/>
		<img src="http://nostradidifan.free.fr/bg-centre-modale-accueil.png" id="centre"/>
		<img src="http://nostradidifan.free.fr/pillier-D.png" id="pillierD"/>
		
		<div class="texte">
			<p>
				dolor sit amet, consectetur adipiscing elit. 
			</p>

				Quisque ac ante eget enim consequat sagittis. 
				Donec sagittis tincidunt diam, id mattis mi cursus ac.
				Mauris at lacus ligula. Vestibulum vitae aliquam turpis. 
				Sed lacinia sem sed orci dignissim egestas congue justo laoreet. 
				In ornare laoreet tortor, ac feugiat odio lacinia eget. 
				Integer tincidunt orci rhoncus turpis fringilla varius.
				Maecenas id venenatis ante. 
				Vestibulum pulvinar, tellus id blandit commodo, mauris lacus porttitor nisi, in rutrum augue ipsum vitae enim. 
				Vestibulum facilisis orci ac risus tincidunt et rhoncus justo convallis. 
				Pellentesque et mi et nisl consequat facilisis sed eget tellus. 
				Ut at turpis at neque suscipit molestie. 
			<p>
				Nullam eu tellus est. 
				Quisque vel risus libero, a sodales ante. 
				Etiam elit felis, semper a condimentum sed, mollis non lacus. 
				Vivamus eget magna eros. 
				Etiam posuere augue convallis velit fermentum nec mattis velit ornare.
				Aenean lectus lectus, ornare mollis vulputate at, lobortis eget lectus. 
				Morbi lectus turpis, pharetra et feugiat vitae, mattis at arcu. 
			</p>
			<p>
				Sed pretium urna et risus luctus rutrum. 
				In et dolor eu augue tincidunt tempor eget ultricies sem. 
				Aliquam blandit dignissim risus et viverra. 
				Suspendisse at ipsum odio. 
				Cras non sapien cursus leo volutpat aliquam sed sed nisl.
				Duis vitae libero dolor, a accumsan lacus. 
				Integer consequat erat nec dolor hendrerit eget fringilla libero sagittis. 
				Morbi eget scelerisque lorem. 
				Proin vehicula, lectus egestas mattis euismod, lectus lectus sollicitudin dolor, vel rutrum mauris ipsum quis arcu. 
			</p> 
			<p>
				Suspendisse potenti.
			</p>
		</div>

	</div>
</body>
[/html]

C’est quoi le soucis ?

Merci d’avance pour votre aide.

La mise en page d’un mail peut être très différente en fonction de l’outil. Genre webmail Gmail YahooMail Horde ou un client de type thunderbird Outlook ou Eudora par exemple.
De manière général, pas de div mais plutôt une mise en page en table td tr. C’est un peu bourrin et limité mais ça a le mérite d’être mieux géré dans l’ensemble.

Okay j’vais lui dire d’explorer cette piste, merci. Si d’autre ont des idées n’hésitez pas.

Hop, have “fun” http://campaignmonitor.com/css/

Méthode approuvée depuis 10 ans, rien n’a changé dans le monde (pourri) des emails en html :slight_smile:

[ul][li]Pas le choix, toute la mise en page doit être en tableau. Donc pas de mise en page en css (float, position: absolute, etc)[]Eviter les images « spacer.gif » pour la taille de cellules[]Ne pas dépasser 600px de large[]Toujours spécifier la taille des images[]Supprimer le doctype et ecrire l’html en mode quirks[]Pas d’image d’arrière-plan, ça ne passe pas dans Outlook 2007 (que ce soit avec background= ou en css). Ou alors prévoir que l’image ne s’affichera pas.[]Attention pas mal d’entreprises utilise Lotus Notes qui ne reconnait pas les images en png.[]Eviter le texte dans des images, pas mal de clients email bloquent les images[]Mettre les couleurs d’arrière-plan avec bgcolor=[]Ne pas utiliser les raccourcis pour les css (par exemple: font: bold 10px Arial)[]Ne pas utiliser le tag

mais plutôt 2
[]Utiliser les css en inline (style=) pour les polices de caractères et le répéter sur les liens[]Ajouter style=« display:block » sur les images (pour Gmail)[]Mettre l’encodage en utf-8[]Tester dans Mail.app, Windows Live Mail, Outlook 2007, Hotmail, Gmail et Yahoo. Le tout dans Internet Explorer et Firefox sur mac et pc.[/ul][/li]Sinon les emails en plain text c’est bien :ninja:

Depuis quand tu fais du HTML pour Mattamore? :D.

Outsourcing gone wrong.

Depuis qu’il est over busy a dev la moitié de ton jeu? Kidding. :wink:

Et sinon pour faire une réponse constructive, dis a Mattamore de faire une image PSD complète, de découper en tranches en gif/jpg et d’exporter ca en HTML. Il va lui faire les tables tout correctement et d’après mon expérience perso, ca passe en mail.

Merci beaucoup à tous je pense que j’ai tout ce qu’il me faut pour réussir ma mission.

C’est vrai mais on voulait tester et pour promouvoir un jeu web on c’est dit des images c’est peut-être plus attirant, même si faut les activer par après.

Depuis que j’ai fait la connerie d’lui demander si il avait besoin d’un coup de main :stuck_out_tongue: !