A voir également:
- Problème d'espace entre les images
- Espace insécable word - Guide
- Comment liberer de l'espace sur gmail - Guide
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
- Espace de stockage google - Guide
- Excel supprimer espace entre chiffre ✓ - Forum Excel
2 réponses
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
19 mai 2011 à 16:44
19 mai 2011 à 16:44
Salut,
Fournis :)
Fournis :)
Certainement pas en background, les boutons ne seront pas cliquables.
Il existes tellement de oyen de faire cela, la vieille méthode(et ch****e) étant l'image map(une image dont on indiques des zonez cliquables).
Perso je ferait un div de la taille exacte de l'image une fois les quatre coins fusionnés et je les met dedans en indiquant bien qu'elles n'ont aucune bordure-surtout pour IE qui dés qu'on met un lien se voit entouré d'un cadre bleu/mauve.
<DIV style="width:320px;height:400px;">
<IMG src="coinhautgauche.png" WIDTH="160" style="float:left;">
<IMG src="coinhautdroite.png" WIDTH="160" style="float:right;">
<IMG src="coinbasgauche.png" HEIGHT="200" style="clear:both;">
<IMG src="coinbasgdroite.png" HEIGHT="200" style="clear:both;">
</DIV>
Bien sûr en adaptant à ses dimensions et en rajoutant des liens qui ont les mêmes propriétés css: la balise a(nchor) est en positionnement inline tandis que les images sont de type block, donc même pas à s'embêter, s'il y a juste la place pour l'image elle seront collée(en enlevant bordure, marges internes/externes et le soulignement par défaut).Ou alors un tableau html de 2X2 en utilisant un border-collapse:collapse;
Il existes tellement de oyen de faire cela, la vieille méthode(et ch****e) étant l'image map(une image dont on indiques des zonez cliquables).
Perso je ferait un div de la taille exacte de l'image une fois les quatre coins fusionnés et je les met dedans en indiquant bien qu'elles n'ont aucune bordure-surtout pour IE qui dés qu'on met un lien se voit entouré d'un cadre bleu/mauve.
<DIV style="width:320px;height:400px;">
<IMG src="coinhautgauche.png" WIDTH="160" style="float:left;">
<IMG src="coinhautdroite.png" WIDTH="160" style="float:right;">
<IMG src="coinbasgauche.png" HEIGHT="200" style="clear:both;">
<IMG src="coinbasgdroite.png" HEIGHT="200" style="clear:both;">
</DIV>
Bien sûr en adaptant à ses dimensions et en rajoutant des liens qui ont les mêmes propriétés css: la balise a(nchor) est en positionnement inline tandis que les images sont de type block, donc même pas à s'embêter, s'il y a juste la place pour l'image elle seront collée(en enlevant bordure, marges internes/externes et le soulignement par défaut).Ou alors un tableau html de 2X2 en utilisant un border-collapse:collapse;
Bonjour Magicite,
Ai-je besoin d'une feuille de style pour appliquer ta solution
<DIV style="width:320px;height:400px;">
....
</DIV> ?
En fait je connais un peu le CSS, mais il m'est conseillé de l'éviter dans un mailing.
On m'a donc indiqué la méthode tableau que tu évoques en 2eme solution.
Pourrais-tu me donner un peu plus de détail sur la redaction de celui-ci ?
Sinon Meloo je pense que ta solution 1 est bonne mais justement je me bloque par rapport à la CSS dans un mailing...
Ai-je besoin d'une feuille de style pour appliquer ta solution
<DIV style="width:320px;height:400px;">
....
</DIV> ?
En fait je connais un peu le CSS, mais il m'est conseillé de l'éviter dans un mailing.
On m'a donc indiqué la méthode tableau que tu évoques en 2eme solution.
Pourrais-tu me donner un peu plus de détail sur la redaction de celui-ci ?
Sinon Meloo je pense que ta solution 1 est bonne mais justement je me bloque par rapport à la CSS dans un mailing...
19 mai 2011 à 16:46
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body link="#f61fff" alink="#f61fff" vlink="#f61fff" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" bgcolor="#ffffff" style="margin:0; padding:0; font-size:10px; font-family:Arial,Verdana, Helvetica, sans-serif;background:#ffffff">
<table align="center" width="600" cellspacing="0" cellpadding="0" border="0">
<tr bgcolor="#ffffff">
<td width="center"></td>
<td valign="middle" height="100%">
<span style="color:#00366d; font-family:Arial, Helvetica, sans-serif; font-size:10px;">
Si le message ne s'affiche pas correctement, cliquez <a href="http://www.mmdc.fr/promo/promo2.html" style="color:#f61fff"><span style="color:#f61fff">ici</span></a>.
</span>
</td>
</tr>
<tr bgcolor="#ffffff">
<td width="center"></td>
<td valign="top" height="100%">
<img src="http://www.mmdc.fr/promo/images/mail2.jpg" alt="Une bon com' et votre boîte décolle" width="600" border="0" display="block"/>
<a href="http://www.mmdc.fr/promo/promotext.html" title="Je souhaite voir les propositions de MMDC">
<img src="http://www.mmdc.fr/promo/images/btn1.jpg" alt="Une bon com' et votre boîte décolle" width="600" border="0" display="block"/></a>
<img src="http://www.mmdc.fr/promo/images/btn2.jpg" alt="Une bon com' et votre boîte décolle" width="600" border="0" display="block"/>
<img src="http://www.mmdc.fr/promo/images/btn3.jpg" alt="Une bon com' et votre boîte décolle" width="600" border="0" display="block"/>
</td>
</tr>
<tr bgcolor="#ffffff">
<td width="center"></td>
<td valign="middle" height="100%">
<span style="color:#00366d; font-family:Arial, Helvetica, sans-serif; font-size:10px;">
Si vous souhaitez ne plus recevoir d'e-mail de notre part, <a href="http://www.mmdc.fr/promo/stoppromo.html" style="color:#f61fff"><span style="color:#f61fff">suivez ce lien</span></a>.
</span>
</td>
</tr>
</table>
</body>
<html>
19 mai 2011 à 17:04
et en faite il faut que tu mettes tes images en background.
comme ceci :
ta class img1 ressemble à ca :
.img1 { background-image:url(http://www.mmdc.fr/promo/images/mail2.jpg);width:600px;height:873px; }et pareil pour les autres images, et la normalement toutes tes images seront "rassemblées"
19 mai 2011 à 17:12
En effet, je suis novice et je ne sais pas trop ou placer le code que tu viens de m'envoyer.
En l'occurrence la deuxième partie .img1 {background ....}
Je n'ai pas de CSS.
19 mai 2011 à 18:34
Pas d'idée ?