CSS et envoi mail format html

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par fabrice88, 29 Août 2012.

  1. fabrice88
    fabrice88 WRInaute occasionnel
    Inscrit:
    15 Octobre 2007
    Messages:
    316
    J'aime reçus:
    0
    Bonjour,
    Sur mon site j'ai un formulaire ou je récupère les informations envoyées par mes internautes.
    Afin d'avoir une réception sympathique et mise en page j'ai donc fait en sorte que la réception soit faite en page html.
    Lorsque je reçois les messages sur Outlook j'ai bien la mise en page que je souhaite mais si au lieu de passer par Outlook j'ouvre directement le webmail orange, ma mise en page saute complément (mes div ne sont plus prise en compte…) .
    Voici comment j'envoi le formulaire.

    Code:
    $msg .= '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    			<html xmlns="http://www.w3.org/1999/xhtml">
    			<head>
    			<title>Mon message</title>
    			<style type="text/css">
    			<!--
    			.Style1 {color: #FFFFFF}
    
    			body { 
    			background: #EAEAEA ; 
    			color: #333333; 
    			margin: 0; 
    			padding: 0; 
    			font-family:Arial, Verdana, Geneva, sans-serif; 
    			font-size:12px; }
    			
    			#header { 
    			width:800px; 
    			margin:0 auto; 
    			padding:32px 14px 0 14px; 
    			position:relative;
    			}
    			table {
    			 border-collapse:collapse;
    			 }
    			th, td {
    			 border:1px solid black;
    			 }
    			caption {
    			 font-weight:bold
    			 }			
    			#contenu { 
    			width:780px; 
    			margin:0 auto; 
    			padding:10px 24px; position:relative; 
    			} 
    			
    			#footer { 
    			width:780px; 
    			height : 70px;
    			margin:0 auto; 
    			padding:15px 24px 32px 24px; 
    			color:#000;
    			font-size: 9px
    			
    			} 
    			#footer a { color:#FFFFFF;}
    			#footer a:hover{ color:#666666;} 
    			#footer p { margin:0; padding:0;}
    			
    			.gauche { float:left; margin-right:10px; }
    			.adressed { float:right; margin:0 20px; width:250px;}
    			
    
    			.clear { clear:both;}
    			
    			h1 { margin:40px auto;}			
    			-->
    			</style>
    			</head>
    
    
    <body>
    <div id="header">
    	<img src="http://www.monsite.com/banniere.jpg" alt="banniere" width="250" height="70" class="gauche" />
    	
    	<div  class="adressed">
    	<p>Le '.$date.'<br/></p>
    	
    	<p>'.$nom.' '.$prenom.'<br/>
    	'.$adresse.'<br/>
    	'.$cp.' '.$ville.'</p>
    	</div>
    	<div class="clear"></div>
    </div>
    
    	
    <div id="contenu">
    	<p><strong>Objet : contact depuis le site Internet</strong></p>
    	<h1 align="center">Bienvenue</h1>
    	<p>Madame, Monsieur, </p><br/>
    	<p> Veuillez trouvez, ci-dessous, le détail du message qui vous a été transmis via le site Internet:</p>
    	<table align="center" cellpadding="10">
    		<tr>
    			<th bgcolor="#000000" scope="col"><span class="blanc Style1">Photos</span></th>
    			<th bgcolor="#000000" scope="col"><span class="blanc Style1">Ville</span></th>
    			<th bgcolor="#000000" scope="col"><span class="blanc Style1">age</span></th>
    			<th bgcolor="#000000" scope="col"><span class="blanc Style1">Materiel</span></th>
    			<th bgcolor="#000000" scope="col"><span class="blanc Style1">Autre</span></th>
    		</tr>
    		
    		<tr>
    			<td>'.$nbphoto.'</td>
    			<td>'.$ville.'</td>
    			<td>'.$age.'</td>
    			<td>'.$materiel.'</td>
    			<td>'.$message.' €</td>
    		</tr>
    		<tr>
    	</table>
    	
    	<div  class="adressed">
    	<p>Le Webmaster<br />
    		<a href="mailto:mail@monsite.fr">mail@monsite.fr</a></p>
    	</div>
    	<div class="clear"></div>
    </div>
    <div id="footer">
    	<img src="http://www.monsite.fr/images/bas-carre.png" />
    	<p>Ce message est ransmis depuis le site internet</p>
    	
    </div>	
    
    
    </body>
    
    </html>';
    			
                 
    
    $headers .= 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
    $headers .= "From: " .$mail."\r\n";
    $headers .= 'Reply-To: ' .$mail."\r\n";
    
    $cible = $mailb.';
    
    /* Envoi du mail */
    if ( !$erreur ) {
      mail($cible , "Message depuis le site" ,$msg,$headers);
    
    
    
    Comment faire pour que le css fonctionne aussi chez les webmail comme orange ?
     
  2. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 009
    J'aime reçus:
    133
    Tu n'utilises pas de CSS, et tu reviens aux bons vieux tableau avec des styles inline, ça ira mieux.

    Un détail sur le support du HTML des principaux clients : http://www.campaignmonitor.com/css/. Pour les webmail, il convient de vérifier en sus au cas par cas.
     
  3. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 601
    J'aime reçus:
    4
    +1, on conseille plutôt les vieux tableaux de grand-mère pour la construction des Emails, c'est plus 'stable'
     
Chargement...
Similar Threads - CSS envoi mail Forum Date
pb de CSS Développement d'un site Web ou d'une appli mobile 10 Mai 2022
Unused CSS et outils pour supprimer feuilles de style inutilisées Développement d'un site Web ou d'une appli mobile 27 Avril 2022
CSS / Attribuer 2 couleurs différentes aux H2 Développement d'un site Web ou d'une appli mobile 12 Mars 2022
Perplexité : pourquoi utiliser une classe CSS en dehors de <body> Développement d'un site Web ou d'une appli mobile 26 Décembre 2021
<noscript><link ...> du css après un <link rel="preload"... Débuter en référencement 1 Mai 2021
Utiliser une grille CSS peut-il nuire au référencement ? Débuter en référencement 17 Janvier 2021
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
WordPress Suppression élément avec Css Demandes d'avis et de conseils sur vos sites 16 Août 2020
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
CSS Google Shopping AdWords 23 Janvier 2020
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
Contenu mixte vers http / css - réelle gravité ? Débuter en référencement 24 Septembre 2019
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
css pour cookieconsent et apparence graphique. Développement d'un site Web ou d'une appli mobile 28 Avril 2019
Appliquer style CSS CMS GHOST Développement d'un site Web ou d'une appli mobile 21 Mars 2019
Wordpress et site html/css Débuter en référencement 15 Décembre 2018
Temps de réponse et minimisation CSS et JS Débuter en référencement 30 Novembre 2018
Texte qui apparait au scroll ou au chargement en CSS Débuter en référencement 24 Octobre 2018