5568 sujets

Sémantique web et HTML

Lien vers une image de fond

Bonjour,

(j'espère poster au bon endroit, pardonnez-moi si tel n'était pas le cas).

Je rédige actuellement un email en HTML avec CSS. Pour l'image de fond, j'ai rédigé comme suit:

div#contenu {
		width:660px;
		height:700px;
		margin: auto;
		background: url("http://www.........net/images/fond-gris.png"); repeat-x;
		}


Cette image de fond apparait bien lorsque je teste en "local" mais n'apparait plus lorsque j'envoie un mail de test ...

Comment dois-je rédiger la syntaxe afin que le background apparaisse bien ?

Merci par avance pour votre aide et vos réponses.

Toutankhamon
Modifié par Toutankhamon (10 Mar 2010 - 14:57)
Salut,

De manière générale, préfère les adresses relatives aux adresses absolues. Cela t'éviteras de devoir tout modifier si tu change de nom de domaine ou de conditions d'hébergement.

adresse relative :
/images/fond-gris.png

adresse absolue :
http://www.mondomaine.com/images/fond-gris.png

Dans ton cas, il faut juste que tu spécifie le chemin de ton image à partir de la feuille de style et non du fichier html.
Généralement, le fichier css est dans un sous répertoire du nom de domaine, nommé "styles" ou "css". Les images se situent dans un sous répertoire elle aussi à la racine du nom de domaine. Il faut donc penser à remonter d'un répertoire pour aller à la racine du document à l'aide de ../ dans ta feuille de style.

Cela donne :
../images/fond-gris.png

A voir ou se trouve ton répertoire avec ta css par rapport à ton répertoire avec tes images. Smiley cligne
Merci pour ta réponse.

Je te précise que la feuille CSS est incluse dans le document HTML. L'idée de départ était de n'avoir qu'un seul document incluant HTML et CSS pour simplifier l'envoi de l'émail.

Selon ta réponse, il serait préférable de scinder distinctement ces deux codes (HTML et CSS) pour faciliter les éventuelles modifications. Cela permettrait aussi d'appeler les images avec des adresses relatives.
Ai-je bien compris ta réponse ?
Salut,

Tu peux, et il serait même préférable, que tu appelle tes fichiers externes par des liens relatifs, pour les raisons expliquées précédemment.

Pour ta feuille de style, l'intérêt de la feuille est de centraliser tous les style du site dans un seul et même fichier, qui sera téléchargé lors de la visite d'une première page, passage inévitable, mais qui sera ensuite mise en cache dans les fichiers temporaires du visiteurs, qui ne la retéléchargera pas lorsqu'il visitera une deuxième page, et ainsi de suite. Cela va limiter le poids de chargement des pages après la première, donc accélérer l'affichage chez le visiteur, et économiser de la bande passante de ton côté.

Si tes styles sont présentement dans le fichier html ca peut être malgré tout un problème d'adressage pour aller chercher ces images. Sinon, il faudra que tu nous fournisse le lien vers une page en ligne, ou l'intégralité du code html et css pour y voir plus clair. Smiley cligne
Merci pour ta réponse.

Je te (re)précise qu'il ne sagit pas d'un site web avec plusieurs pages mais d'un émail en HTLM !!!! (voir mon premier message).

J'ai séparé le CSS et l'HTML, selon tes conseils. J'ai modifié le fichier HTML comme suit:

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title></title>
   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="http://www........net/email/design.css" />
</head>


J'ai volontairement laissé l'adresse du fichier CSS sous une forme absolue car le fichier HTML ne sera pas placé dans le même dossier.

Le fichier CSS est rédigé comme suit:

div#contenu {
		width:660px;
		height:700px;
		margin: auto;
		background-image: url("../fond-gris.png"); 
		background-repeat: repeat-x ;
		}


Le fichier "fond-gris.png" est dans le même dossier que la feuille de style CSS.

L'image de fond n'apparait plus en "local" alors que le reste de la mise en page est correcte. As-tu une idée de la raison de cette "disparition" ?
OK alors oublie tout ce que je t'ai dit, je n'avais pas vu ce détail dans ton message initial.
Tu dois effectivement utiliser des liens absolus, et intégrer ta feuille de style dans ton fichier html ! Pour les images, si lorsque tu copie colle l'adresse des images que tes différent styles ciblent dans la barre d'adresse de ton navigateur celles ci s'affichent, c'est que ton fichier html doit être en mesure de les afficher aussi. Donc je ne vois pas trop d'où vient le problème.
Merci pour ta réponse.

J'avais pourtant bien codé dès le départ Smiley cligne
Bref, je recompose mon fichier CSS-HTML tel qu'il l'était initialement. Je le poste ici en totalité afin que vous puissiez voir si une erreur éventuelle:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>titre de la page</title>
   <style type="text/css" media="screen">
      body {
      	margin: 15px;
      	padding: 0;	
      }

      a {
      	color: #cc0000;
      }

      td.permission {
     	font-family: Georgia, serif;
      	font-size: 11px;
      	font-weight: normal;
      	color: #000000;
      	padding: 10px 0 10px 0;
      }

      td.permission a {
      	font-family: Georgia, serif;
      	font-size: 11px;
      	font-weight: normal;
      	color: #000000;
      }

		div#contenu {
		width:660px;
		height:700px;
		margin: auto;
		background-image: url("http://www.......net/email/fond-gris.png"); repeat-x; 
		}

      td.header {
      	height: 55px;
      	border-top: 2px dotted #d5d5d5;
      	border-bottom: 2px dotted #d5d5d5;
      }

      td.header h1 {
		text-align: center;
      	font-family: Georgia;
		color: #404048;
      	font-size: 24px;
      	font-weight: bold;
		word-spacing: 320px;
       	}

      table.sidebar td {
      	border-bottom: 1px dotted #d5d5d5;
      	padding: 20px 0 20px 0;
      }

      h4 {
      	font-family: Georgia;
      	font-size: 19px;
      	font-weight: bold;
		text-align: center;
      	color: #6E6E71;
		margin: 0;
      	padding: 0;
       	text-transform: uppercase;
      }

      table.sidebar ul {
      	margin: 0 0 0 2px;
      	padding: 0;
      }

      table.sidebar ul li a {
      	font-family: Arial;
      	font-size: 12px;
      	font-weight: normal;
      	color: #cc0000;
      }

      table.sidebar h3 {
      	font-family: Georgia;
      	font-size: 18px;
      	font-weight: normal;
      	color: #000000;
      	margin: 0 0 10px 0;
      	padding: 0;
      }

      table.sidebar p {
      	font-family: Georgia;
      	font-size: 12px;
      	font-weight: normal;
      	color: #000000;
      	margin: 0 0 12px 0;
      	padding: 0;
      }

      table.sidebar p.miniheader {
      	font-family: Georgia;
      	font-size: 12px;
      	font-weight: bold;
      	color: #000000;
      	margin: 0 0 4px 0;
      	padding: 0;
      }

      td.mainbar h2 {
      	font-family: Georgia;
      	font-size: 18px;
      	font-weight: normal;
      	color: #000000;
      	margin: 20px 0 8px 0;
      	padding: 0;
      }

      td.mainbar h2 a {
      	font-family: Georgia;
      	font-size: 18px;
      	font-weight: normal;
      	color: #000000;
      	text-decoration: none;
      }

      td.mainbar p {
      	font-family: Georgia;
      	font-size: 15px;
      	font-weight: bold;
		color: #333333;
      	margin: 0 0 20px 0px;
      	padding: 0 0 0 0;
      }

		td.mainbar span {
		font-size: 12px;
      	font-style: italic;
      }

      td.mainbar p.top {
      	padding: 0 0 6px 0;
      	border-bottom: 1px dotted #d5d5d5;
      }

      td.mainbar p.top a {
      	font-family: Georgia;
      	font-size: 10px;
      	font-weight: normal;
      	color: #cc0000;
      }

      td.mainbar ul {
      	font-family: Georgia;
      	font-size: 18px;
      	font-weight: normal;
      	color: #333333;
      }

      td.footer {
      	font-family: Georgia;
		align: center;
		font-size: 15px;
      	font-weight: normal;
		font-style: italic;
      	color: #333333;
      	padding: 5px 0 10px 0;
      }

      td.footer span {
		font-style: normal;
      	font-weight: bold;
      }
   </style>
</head>
<body>
<div id="contenu">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="center">
         
         <table width="580" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td align="center" class="permission">
                  <p>Probleme pour lire cet email ? Lisez-le dans votre navigateur.</p>
               </td>
            </tr>	
            <tr>
               <td class="header">
		<h1>
			<p>Lorem ipsum dolor sit amet</p>
		</h1>       
           <tr>
               <td>                  
                  <table width="640" border="0" cellspacing="20" cellpadding="0">                     
                     <tr>
                        <td width="640" align="left" valign="top" class="mainbar">
                           <h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lobortis. Aliquam.</h4><br><br>
	
                           <img src="http://www.........net/email/main-content-inline-small.png" width="200" height="200" alt="Main Content Inline Small" align="left" hspace="10">
                                <p>Morbi pharetra</p>
				<p>Flyer</p>
				<p>Mailings</p>
				<p>Webmaterial</p>
				<p>Pressberichte</p>
				<p>Ubersetzungen <span> (Aliquam scelerisque)</span></p>                     
                        </td>
                     </tr>			
                  </table>              
            <tr>
		<td align="center">
		<h4>Qualitat - Zuverlassigkerit - Faire Price</h4><br><br>
		</td>
		<tr>
               <td align="center" valign="top" class="footer">
		 <span><b>Frau d'Amour</b></span><br> 27 rue du Mayollet  -  99900 Groville<br>contact @ hotmail.du
               </td>
            </tr>
         </table>
         </div>
      </td>
   </tr>
</table>
</body>
</html>



Merci pour vos réponses
Bonjour,

E-mail au format HTML: tous les liens vers des ressources en absolu (URL complètes), effectivement. Et aussi: tous les styles CSS en «inline», c'est à dire dans des attributs style. De nombreux clients mail suppriment ou ignorent tout simplement les feuilles de styles internes (élément STYLE) ou externes (LINK, @import).

Il y a de nombreux sujets sur le forum qui parlent des règles à suivre pour l'intégration des e-mails...
Merci pour ta réponse.

J'avais effectué une première recherche sur la rédaction du code et sur les règles a respecter avant de vérifier si vous aviez déjà "traité" une anomalie comme celle que je détecte.

A priori, mon code ne pose pas de problèmes particuliers (on doit pouvoir l'améliorer, la n'est pas la question) et je n'ai pas trouve de solutions a mon problème.

What else ?
Tu dois mettre l'élément style dans le body, de toutes façons gmail ou hotmail (avec l'interface web) fait sauter l'image de fond à l'affichage, prévoir une couleur au cas où.

Tu utilises beaucoup de tableaux, il y a moyen de faire des choses avec un minium de ces éléments et avec un peu plus de sémantique (hx, ul, ol, etc). Avantage : dans un client mail minimaliste les éléments s'afficheront avec les styles par défaut.

Bien renseigner également l'attribut alt des images, la plupart des logiciels de mail n'affiche pas les images, si l'image est décorative utiliser un alt vide (alt="").
Modifié par Patidou (11 Mar 2010 - 00:16)
Merci pour ta réponse.

Je vais tenir compte de tes remarques pour peaufiner mon code initial et le tester sur d'autres boites mails. Je verrai si cela règle ou non le problème.

Merci a toi.
De toutes façons comme l'a dit Florent, la meilleure méthode c'est d'utiliser les styles en ligne (style=""), ce sont les seuls qui résistent à (presque) tout. Smiley cligne
Hello,

Tu as un repeat-x qui se balade après ton image-background. Sachant que les webmails vont sans doute modifier ton code CSS, peut-etre que cela fait agir leur parser de manière étrange, essaie de l'enlever.

Dans tous les cas, comme dis plus haut, si tu veux vraiment être sur que tes styles s'affichent il faut laisser tomber les bons cotés de CSS et tout mettre dans des style="" sur chaque balise.

De même, je mettrai un bémol aux remarques de Patidou : utiliser des tableaux pour la présentation peut avoir ses avantages dans un email, c'est malheureusement l'une des façons les plus sures de garder sa présentation intacte.

Vérifie toujours avec Firebug comment ton mail a été digéré et recraché dans les webmails, il est possible qu'ils aient supprimés les background-image, ou renommés tes classes css pour éviter les conflits avec les leurs.
Sujet clos
Aller à