Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème de mise en page - HTML - Signature Mail

    30 janvier 2015 à 18:00:27

    Bonjour à tous,


    Je débute dans le HTML, a vrai dire, ca ne fait que depuis ce matin que je sais ce que c'est, et je suis en train d'essayer de faire une signature mail. J'arrive a quasi tout faire mais j'ai un soucis de mise en page. Sur Mac et Mail, je n'ai aucun soucis mais quand je passe sur Windows et Outlook, j'ai un problème avec une image. J'aimerai que le texte soit a droite de mon image et tout le long de l'image. Voilà ce que ça donne quand j'y arrive sur Mac :



    Mais dès que j'essaye avec Outlook et Windows, j'arrive à ça :



    Vous savez pourquoi ?

    Voilà le code :

    <div id="sig" style="min-height: 60px; line-height: 17px; margin: 0; padding: 10px 0; border-top: 1px #3a342c dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #3a342c; min-width: 530px;" > <p>
    
    <img src="http://img11.hostingpics.net/pics/166923IGMLogo180x200.png" width=auto height="180" style="float: left; padding: 0 10px 0 0;">
     
    
    <strong style="color: #3a342c; font-size:16px;">Jean-Paul WAGEMANS | Club Manager</strong><br />
    <p>
    <a href="mailto:jean-paul@internationalgolfmaastricht.com" style="color: #03412c; font-size:11px; text-decoration: none; border-bottom: 1px #333333 dotted;">jean-paul@internationalgolfmaastricht.com</a><br />
    Mobile. +31(0)6 159 041 64 <br />
    <p>
    DOUSBERGWEG 100 | 6216 GC MAASTRICHT<br />
    Tel. +31(0)43 328 17 40 <br />
    <a href="mailto:info@internationalgolfmaastricht.com" style="color: #03412c; text-decoration: none; border-bottom: 1px #333333 dotted;">info@internationalgolfmaastricht.com</a><br />
    <p>
    <a href="http://www.facebook.com/InternationalGolfMaastricht"><img src="http://img11.hostingpics.net/pics/745570FacebookLogomini.gif" width=auto height="14" alt="facebook" border="0" /></a>
    <a href="http://www.facebook.com/InternationalGolfMaastricht" style="color: #47639e; font-size:12px; text-decoration: none;">International Golf Maastricht</a> | <a href="http://www.internationalgolfmaastricht.com" style="color:#03412c; font-size:12px; text-decoration:none; border-bottom: 1px solid #03412c;">www.internationalgolfmaastricht.com</a> <br />
    
    <a href="http://www.facebook.com/brasserie1632"><img src="http://img11.hostingpics.net/pics/745570FacebookLogomini.gif" width=auto height="14" alt="facebook" border="0" /></a>
    <a href="http://www.facebook.com/brasserie1632" style="color: #47639e; font-size:12px; text-decoration: none;">Brasserie & Restaurant 1632</a> | <a href="http://www.brasserie1632.nl" style="color:#03412c; font-size:12px; text-decoration:none; border-bottom: 1px solid #03412c;">www.brasserie1632.nl</a> <br />
    
    
    <p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>
    
    <img src="http://img11.hostingpics.net/pics/466644CLUBHUISSIGNATURE600px.jpg" style="float; padding: 0 10px 0 0;">
    
    </div>


     

    Merci d'avance pour votre aide ! :)

    • Partager sur Facebook
    • Partager sur Twitter
      30 janvier 2015 à 20:26:59

      Je précise que c'est une signature mail, j'ai besoin que de mettre ce qu'il y a entre <body> ...  </body> et pas tout ce qu'il y a avant :)
      • Partager sur Facebook
      • Partager sur Twitter
        3 février 2015 à 8:47:32

        bonjour Lucas j'ai regardé ton code et je l'ai testé il marche bien sur Windows mais ton code est illisible et je n'ai pas pus trouvé la faute. 

        avant de te donner le code je vais t'expliquer comment on agence un code html:

        • on doit toujours fermer les balise il y avait des balise qui s'ouvrais mais qui se fermais pas (ligne 22 tous les <p> tu les ferme pas)
        • on aire le code on saute des lignes et quand on rendre dans un tableaux par exemple on met une tabulation (tab)
        donc d'abore aussi j'ai compresser tes url(http://is.gd/create.php)et j'ais refais entiairement ton code:
        <html>
        <div id="sig" style="min-height: 60px; line-height: 17px; margin: 0; padding: 10px 0; border-top: 1px #3a342c dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #3a342c; min-width: 530px;" >
        	<table><td>
        	
        		<td>
        			<img src="http://is.gd/73qoj9" width=auto height="180" style="float: left; padding: 0 10px 0 0;">
        		</td>
        		
        		<td>
        			<p><strong style="color: #3a342c; font-size:16px;">Jean-Paul WAGEMANS | Club Manager</strong></p>
        			<p><a href="mailto:jean-paul@internationalgolfmaastricht.com" style="color: #03412c; font-size:11px; text-decoration: none; border-bottom: 1px #333333 dotted;">jean-paul@internationalgolfmaastricht.com</a></p>
        			<p style="color: #3a342c; font-size:11px;">Mobile. +31(0)6 159 041 64 </p>
        			<p style="color: #3a342c; font-size:11px;">DOUSBERGWEG 100 | 6216 GC MAASTRICHT</p>
        			<p style="color: #3a342c; font-size:11px;">Tel. +31(0)43 328 17 40 </p>
        			<p><a href="mailto:info@internationalgolfmaastricht.com" style="color: #03412c; font-size:11px; text-decoration: none; border-bottom: 1px #333333 dotted;">info@internationalgolfmaastricht.com</a></p>
        			<p>
        				<a href="http://is.gd/AfZdVW" style="font-size:11px;color:blue;"> <img src="http://is.gd/12JX0L" width=auto height="14" alt="facebook" border="0" />International Golf Maastricht</a>
        				 | 
        				<a href="http://is.gd/ZpD041" style="color:#03412c; font-size:11px; text-decoration:none; border-bottom: 1px solid #03412c;">www.internationalgolfmaastricht.com</a>
        			</p>
        			<p>
        				<a href="http://is.gd/du9ww5" style="font-size:11px;color:blue;"><img src="http://is.gd/12JX0L" width=auto height="14" alt="facebook" border="0" />Brasserie & Restaurant 1632</a>
        				 | 
        				<a href="http://is.gd/zVPvtr" style="color:#03412c; font-size:12px; text-decoration:none; border-bottom: 1px solid #03412c;">www.brasserie1632.nl</a>
        			</p>
        		</td>
        
        	</td><table>
        
        	<img src="http://is.gd/oQMkYJ" style="float; padding: 0 10px 0 0;">
        
        <html/>

        pour éviter ton problème j'ai utiliser un tableau de 1x2 d'un coté j'ais mie la photo et de l'autre coté les info.

        @+

        -
        Edité par jules de cube 3 février 2015 à 8:48:16

        • Partager sur Facebook
        • Partager sur Twitter
          3 février 2015 à 10:48:28

          Merci beaucoup pour ton aide :)
          C'est possible de réduire les espaces entre chaque ligne ? Pour donner vraiment la même mise en page que la première photo ?

          J'avais aussi vu ici : http://is.gd/K5k40X   ...Que pour Outlook il y a des balises qui ne marchent pas comme les float, etc. 
          Puis là aussi il y a beaucoup d'infos : http://is.gd/7Qc46o et je remarque que Outlook ne prend pas grand chose en compte. Ca peut t'aider ?

          • Partager sur Facebook
          • Partager sur Twitter
            3 février 2015 à 11:01:20

            <html>
            Met swingende groet,
            <p></p> 
            <div id="sig" style="min-height: 60px; line-height: 1px; margin: 0; padding: 10px 0; border-top: 1px #3a342c dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #3a342c; min-width: 530px;" >
                <table><td>
                 
                    <td>
                        <img src="http://is.gd/73qoj9" width=auto height="180" style="float: left; padding: 0 10px 0 0;">
                    </td>
                     
                    <td>
                        <p><strong style="color: #3a342c; font-size:16px;">Jean-Paul Wagemans</strong></p>
                        <p><a href="mailto:jean-paul@internationalgolfmaastricht.com" style="color: #03412c; font-size:12px; text-decoration: none; border-bottom: 1px #333333 dotted;">jean-paul@internationalgolfmaastricht.com</a></p>
                        <p style="color: #3a342c; font-size:11px;">Mobile. +31(0)6 159 041 64<br>
                        <br>
                        DOUSBERGWEG 100 | 6216 GC MAASTRICHT<br>
                        Tel. +31(0)43 328 17 40 </p>
                        
                        <p>
                            <a href="http://is.gd/AfZdVW" style="font-size:11px;color:#455f9e;"> <img src="http://is.gd/12JX0L" width=auto height="14" alt="facebook" border="0" />&nbsp;International Golf Maastricht</a>
                             |
                            <a href="http://is.gd/ZpD041" style="color:#03412c; font-size:11px; text-decoration:none; border-bottom: 1px solid #03412c;">www.internationalgolfmaastricht.com</a>
                        	<br>
                            <a href="http://is.gd/du9ww5" style="font-size:11px;color:#455f9e;"><img src="http://is.gd/12JX0L" width=auto height="14" alt="facebook" border="0" />&nbsp;Brasserie & Restaurant 1632</a>
                             |
                            <a href="http://is.gd/zVPvtr" style="color:#03412c; font-size:11px; text-decoration:none; border-bottom: 1px solid #03412c;">www.brasserie1632.nl</a>
                        </p>
                    </td>
             
                </td><table>
             
                <img src="http://is.gd/4vYbTF" style="float; padding: 0 10px 0 0;">
             
            <html/>

            J'ai réussi à remettre en page comme je le souhaitais en enlevant des <p> et en rajoutant des <br> mais je ne sais pas si c'est très catholique comme méthode. Ca al'air de marcher en tout cas.
            J'ai aussi modifié le lien de la photo du bas et enlevé quelques informations inutiles comme la fonction et l'adresse mail "info", j'ai ajouté tout au dessus un texte qui se mettra a la fin des mails, ajouté des espaces entre les logos FB et les textes (bien que les espaces soient soulignés...). J'ai aussi modifié de 1px la taille de 2 polices et j'ai remplacé le "blue" des liens Facebook par le vrai bleu Facebook (#455f9e)

            -
            Edité par LucasHotters 3 février 2015 à 11:16:10

            • Partager sur Facebook
            • Partager sur Twitter
              3 février 2015 à 11:49:48

              J'ai essayé sur Outlook et il y a du progrès mais c'est toujours pas top !
              Voilà ce que ça donne (désolé pour la qualité photo mais sous Windows je ne sais pas ou vont se ranger les screens quand on pousse sur la touche printscreen)

              Donc maintenant il faut essayer de mettre l'image de gauche tout en haut et la grande image tout en bas ! Des idées ?

              Les logos Facebook sont tout moches tout écrasés aussi m'enfin ça c'est un détail.

              • Partager sur Facebook
              • Partager sur Twitter
                3 février 2015 à 12:17:36

                Je te suggère de vraiment travailler ton indentation, car ainsi tu te rendras compte d'une grosse erreur : td ne peut être enfant que de tr, jamais d'un autre td directement. Et tr doit avoir comme parent table, thead, tbody ou tfoot suivant les besoins en sémantique du contenu.

                Cette erreur est probablement à l'origine du rendu incorrect que tu as.

                • Partager sur Facebook
                • Partager sur Twitter

                Pas d'aide concernant le code par MP, le forum est là pour ça :)

                  3 février 2015 à 13:00:29

                  Désolé je suis viens de commencer le HTML et j'avoue que je viens d'aller voir sur google ce que ca voulais dire "indentation"... :( 

                  Je dois faire quoi alors concrètement ? Remplacer le premier "td" par un "tr"  et encore ajouter des autres choses ? 

                  • Partager sur Facebook
                  • Partager sur Twitter
                    3 février 2015 à 13:31:13

                    Je crois que déjà, simplement remplacer le tout premier td (et donc la toute dernière fermeture de td) par un tr, comme tu l'as dit, aura un bon effet.

                    (dommage de devoir commencer le html par une signature mail, et donc une mise en page en tableau... nécessaire pour les e-mails, mais il te faudra oublier tout ça si tu te mets à faire des sites web :) )

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Pas d'aide concernant le code par MP, le forum est là pour ça :)

                      3 février 2015 à 14:15:55

                      Bonne nouvelle, ça avance ! Voici le code : 

                      Met swingende groet,<br> 
                      <br> 
                      <div id="sig" style="min-height: 60px; line-height: 1px; margin: 0; padding: 1px 0; border-top: 1px #000000 solid; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #000000; min-width: 530px;" >
                          <table>
                          	<tr>
                           
                              	<td>
                                  	<img src="http://is.gd/73qoj9" width="172" height="180" style="float: left; padding: 0 10px 0 0;">
                              	</td>
                               
                      			<td>
                                  	<p><strong style="color: #000000; font-size:16px;">Jean-Paul Wagemans</strong></p>
                                  	<p><a href="mailto:jean-paul@internationalgolfmaastricht.com" style="color: #000000; font-size:12px; text-decoration: none; border-bottom: 1px #333333 dotted;">jean-paul@internationalgolfmaastricht.com</a></p>
                                  	<p style="font-size:11px;">Mobile. +31(0)6 159 041 64<br>
                                  	<br>
                                  	DOUSBERGWEG 100 | 6216 GC MAASTRICHT<br>
                                  	Tel. +31(0)43 328 17 40 </p>
                                  
                                  	<p>
                                      <a href="http://is.gd/AfZdVW" style="font-size:11px;color:#455f9e;"> <img src="http://is.gd/12JX0L" style="float: left; padding: 0 3px 0 0; width="14" height="14" alt="facebook" border="0">International Golf Maastricht</a>
                                       |
                                      <a href="http://is.gd/ZpD041" style="color:#03412c; font-size:11px; text-decoration:none; border-bottom: 1px solid #03412c;">www.internationalgolfmaastricht.com</a>
                                  	<br>
                                      <a href="http://is.gd/du9ww5" style="font-size:11px;color:#455f9e;"><img src="http://is.gd/12JX0L" style="float: left; padding: 0 3px 0 0; width="14" height="14" alt="facebook" border="0">Brasserie & Restaurant 1632</a>
                                       |
                                      <a href="http://is.gd/zVPvtr" style="color:#03412c; font-size:11px; text-decoration:none; border-bottom: 1px solid #03412c;">www.brasserie1632.nl</a>
                                  	</p>
                              	</td>
                              	
                          	</tr>
                          </table>
                       </div>
                      <img src="http://is.gd/4vYbTF" width="600" height="200" style="float: left">


                      Et voici ce que ça donne :

                      Il me reste les soucis d'espaces entre les lignes, les logos facebook tout dégeu et les barre bleu bien laides en dessous des liens !

                      • Partager sur Facebook
                      • Partager sur Twitter
                        3 février 2015 à 14:47:57

                        Enlève le float des images du logo Facebook, par défaut elles s'alignent dans le texte. Et mets aussi un height cohérent, je doute qu'elles fassent 14px de hauteur. En fait, mets dans les attributs height et width respectivement les véritables hauteur et largeur de ton petit logo.

                        • Partager sur Facebook
                        • Partager sur Twitter

                        Pas d'aide concernant le code par MP, le forum est là pour ça :)

                          3 février 2015 à 15:10:46

                          J'ai enlevé le float et le padding des petites icones FB, j'ia vu que Outlook ne les prenait pas en charge de toute façon... Tant pis pour l'espace entre les logos et le texte. Limite je rajouterai un &nbsp; devant le texte mais l'espace sera souligné en bleu. Enfin pas trop grave.Donc là c'est bon mes logos sont comme ils devraient être en 14x14 (l'original c'est du 20x20 et j'aimerai qu'ils soient à la taille du texte donc en 14x14 ça a l'air d'aller).


                          Là ou je rencontre encore quelques soucis, c'est avec les espaces et les lignes. J'utilise des <p></p> vides ou des <br> mais je n'arrive pas a faire ce que je souhaite ! Il y a des autres balises que je pourrai utiliser ?

                          • Partager sur Facebook
                          • Partager sur Twitter
                            3 février 2015 à 18:16:50

                            "l'original c'est du 20x20 et j'aimerai qu'ils soient à la taille du texte donc en 14x14 ça a l'air d'aller" N'oublie pas de redimensionner tes images dans ton logiciel préféré, afin de fournir un fichier de la bonne taille (en octets cette fois).

                            Pour les espaces... ben on est censé faire avec des marges, dans le css. Tu peux essayer de mettre un margin-bottom sur l'élément au-dessus de celui que tu veux éloigner (ou margin-top sur icelui).

                            • Partager sur Facebook
                            • Partager sur Twitter

                            Pas d'aide concernant le code par MP, le forum est là pour ça :)

                              3 février 2015 à 19:06:51

                              bonjour lucas

                              Pour la capture d'écran tu doit appuyer sur: impr écran puis ouvrir paint et fairectrl +v et save.

                              @+

                              • Partager sur Facebook
                              • Partager sur Twitter
                                5 juin 2018 à 9:11:52

                                Bonjour!

                                Sujet très ancien, mais avais tu trouvé une solution pour que les liens ne soient pas soulignés sur outlook?

                                les text-decoration: none; en inline ne changent rien!

                                • Partager sur Facebook
                                • Partager sur Twitter

                                Problème de mise en page - HTML - Signature Mail

                                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                • Editeur
                                • Markdown