5568 sujets

Sémantique web et HTML

Problème d'affichage

Bonjour à tous,

N'étant pas du métier, je me débrouille avec les moyens du bord.

J'ai appris à modifier sur Dreamweaver, mais pas à créer du code ni à intégrer pour le web.

Jusqu'à présent, les 5 dernières années, je dois dire que je me débrouiller très bien, je trouve haha, mais depuis plusieurs semaines je bute sur un problème d'affichage sur deux rubriques de ma newsletter.

Et je ne comprends pas du tout d'où vient l'erreur, j'ai cherché et ai demandé autour de moi, on sèche tous.

Je viens vers vous et demander de l'aide, si quelqu'un pouvait m'indiquer d'où vient l'erreur et que je suis puisse la corriger mais surtout comprendre ce qui a merdé, ça m'obsède !

Je me permets de vous glisser uns screenshot du rendu mail et le code.

D'avance, mille mercis de votre (potentielle) aide !!

Émeline H

upload/1645794548-84268-bloc1.png 

<tr>
                <td style="padding-top: 30px;">
                    <table bgcolor="#d2e8f0" width="650" align="center" border="0" cellpadding="0" cellspacing="0" class="w100">
                        <tr>
                            <td>
                                <table width="650" align="center" border="0" cellpadding="0" cellspacing="0" class="hideMobile">
                                    <tr>
                                        <td style="padding-bottom: 0px;padding-top:20px;text-align: left;color: #23386e;font-weight: bold;font-family: 'Akrobat',arial;font-size: 17px;line-height: 23px;">
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;L'ACTUALITÉ IT
                                                  </td>
 
                                    </tr>
                                </table>
                                <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="w100 showonmobile" style="width: 0; max-height: 0; overflow: hidden; display: none; visibility: hidden;">
                                    <tr>
                                        <td align="center">
                                                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table bgcolor="#d2e8f0" width="550" align="center" border="0" cellpadding="0" cellspacing="0" class="w80">
                                    <tr>
                                        <td style="padding: 30px 0px; display: flex;">
                                            <table bgcolor="#d2e8f0" width="160" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                <tr>
                                                    <td style="text-align: center;color: #23386e;font-weight: 300;font-family: 'Akrobat',arial;font-size: 15px;line-height: 17px;padding-bottom: 30px;background: url('images/01.gif');background-repeat:no-repeat;background-size:47px 113px;background-position:left top;padding-top: 15px;">
                                                            Comment sécuriser gratuitement vos comptes d’administrateurs au sein de votre réseau ?
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding-bottom: 8px;padding-top:8px;text-align: center;font-family: 'Akrobat',arial;font-size: 15px;line-height: 19px;font-weight: bold;background-color: #23386e;">
                                                        <a href="https://www.bytheway.fr/microsoft-laps/" title="LIRE LA SUITE" target="_blank" style="color: #FFFFFF;text-decoration: none;text-transform: uppercase;display: block;">
                                                            LIRE  LA SUITE
                                                        </a>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table bgcolor="#d2e8f0" width="34" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                <tr>
                                                    <td>&nbsp;</td>
                                                </tr>
                                            </table>
                                            <table bgcolor="#d2e8f0" width="160" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                <tr>
                                                    <td style="text-align: center;color: #23386e;font-weight: 300;font-family: 'Akrobat',arial;font-size: 15px;line-height: 17px;padding-bottom: 30px;background: url('images/02.gif');background-repeat:no-repeat;background-size:80px 115px;background-position:left top;padding-top: 15px;">
                                                    Une seule faille suffit à vous nuire. Gérez vos vulnérabilités en maîtrisant votre surface d'attaque.
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding-bottom: 8px;padding-top:8px;text-align: center;font-family: 'Akrobat',arial;font-size: 15px;line-height: 19px;font-weight: bold;background-color: #23386e;">
                                                        <a href="https://www.bytheway.fr/?p=113325&preview=true" title="LIRE LA SUITE" target="_blank" style="color: #FFFFFF;text-decoration: none;text-transform: uppercase;display: block;">
                                                    LIRE LA SUITE
                                                        </a>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table bgcolor="#d2e8f0" width="34" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                <tr>
                                                    <td>&nbsp;</td>
                                                </tr>
                                            </table>
                                            <table bgcolor="#d2e8f0" width="160" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                <tr>
                                                    <td style="text-align: center;color: #23386e;font-weight: 300;font-family: 'Akrobat',arial;font-size: 15px;line-height: 17px;padding-bottom: 30px;background: url('images/03.gif');background-repeat:no-repeat;background-size:80px 115px;background-position:left top;padding-top: 15px;">
                                                    L'IA à la rescousse des attaques sophistiquées dès le premier email pour Microsoft 365.                                 </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding-bottom: 8px;padding-top:8px;text-align: center;font-family: 'Akrobat',arial;font-size: 15px;line-height: 19px;font-weight: bold;background-color: #23386e;">
                                                        <a href="https://www.bytheway.fr/une-messagerie-securisee-pour-microsoft-365-en-utilisant-lia" title="LIRE LA SUITE" target="_blank" style="color: #FFFFFF;text-decoration: none;text-transform: uppercase;display: block;">
                                                        LIRE LA SUITE
                                                        </a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>


upload/1645794569-84268-bloc2.png 

<td style="padding: 30px 0px;" class="paddingTB10" align="center">
                                                        <table width="87" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                            <tr>
                                                                <td>
                                                                     
                                                                        <img src="https://www.bytheway.fr/wp-content/uploads/2022/02/Romain-COPIN-2-346-x-346.png" alt="" width="87" height="87" style="display: block;border:0px;" class="w80 w320"/>
                                                                     
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <!--[if gte mso 9]></td><td valign="top"><![endif]-->
                                                        <table width="30" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                            <tr>
                                                                <td>&nbsp;</td>
                                                            </tr>
                                                        </table>
                                                        <!--[if gte mso 9]></td><td valign="top"><![endif]-->
                                                        <table width="87" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                            <tr>
                                                                <td>
                                                                        <img src="https://www.bytheway.fr/wp-content/uploads/2022/02/Jimmy-LACHERY-346-x-346-1.png" alt="" width="87" height="87" style="display: block;border:0px;" class="w80 w320"/>
                                                                     
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <!--[if gte mso 9]></td><td valign="top"><![endif]-->
                                                        <table width="30" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                            <tr>
                                                                <td>&nbsp;</td>
                                                            </tr>
                                                        </table>
                                                        <!--[if gte mso 9]></td><td valign="top"><![endif]-->
                                                        <table width="87" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                            <tr>
                                                                <td>
                                                                        <img src="https://www.bytheway.fr/wp-content/uploads/2022/02/silhouette-homme-cheveux-courts-346-x-346.png" alt="" width="87" height="87" style="display: block;border:0px;" class="w80 w320"/>
                                                                     
                                                                </td>
                                                            </tr>
                                                        </table>
                                                            <!--[if gte mso 9]></td><td valign="top"><![endif]-->
                                                        <table width="30" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                            <tr>
                                                                <td>&nbsp;</td>
                                                            </tr>
                                                        </table>
                                                        <!--[if gte mso 9]></td><td valign="top"><![endif]-->
                                                        <table width="87" align="left" border="0" cellpadding="0" cellspacing="0" class="w100">
                                                            <tr>
                                                                <td>
                                                                        <img src="https://www.bytheway.fr/wp-content/uploads/2022/02/silhouette-homme-cheveux-decoiffes-346-x-346.png" alt="" width="87" height="87" style="display: block;border:0px;" class="w80 w320"/>
                                                                     
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>

Modifié par EmelineH (25 Feb 2022 - 14:12)
Hello Kerlutinoec,
Merci de ton retour. Malheureusement, je ne les ai pas...
Je ne savais même pas que ça faisait appel à un autre type de code...
Mon but est de garder la trame de ma newsletter et d'uniquement modifier les infos, contenu, liens, etc.
Pourrais-je corriger sans ces CSS ?
Salut,

a priori il nous manque le fichier css qui contient tes classes (w80 w100)
En testant rapidement sur jsfiddle le rendu à l'air normal (sans ces classes) :
https://jsfiddle.net/h1t40b5r/

(Tu pourrais peut être juste les supprimer pour être sur que ça n'influence pas ?)

Et sinon niveau structure de code, c'est globalement pas terrible du tout Smiley sweatdrop , les balises table tr td ne sont pas censé être utilisé pour faire de la mise en page mais pour contenir des données structuré sous forme de tableau (un peu comme si tu voulais afficher les données d'un tableur excel par exemple).
De la même manière on évite de décaler "l'actualité IT" en rajoutant des espaces avant Smiley ohwell

Mais bon je m'éloigne un peu du problème Smiley rolleyes
Modifié par Mathieuu (25 Feb 2022 - 15:59)
Salut Mathieuu,

OK je ne savais pas à quoi ça servait, j'ai pas honte de le dire, donc je vais tester sans ces trucs là donc (merci du tuyau).
Oui, tu vois le concept des espaces, c'est de la bidouille à deux sous, donc tu comprends mon niveau.
merci donc de noter que ce code pourrait tenir la route !!

Et non tu ne t'éloignes pas, ce sont des manip' que je bricole donc, qui, potentiellement, peuvent faire merder mon affichage.

Je vais tester ton astuce et reviens te dire si ça a fonctionné ou non..
car, ce qui est casse-pied, c'est que mon affichage dans mon navigateur via mon bon F12 des familles, est correct ; je dois à chaque fois m'envoyer un mail test via mon mass mailing routeur pour checker le rendu par email, puisque c'est censé être envoyé par email.

Mille mercis encore de ton temps !!!
Et tu utilises quoi comme client mail ?

Je n'y ai pas pensé avant, mais peut être que les différents clients mails interprète différemment les éléments de ton css et que cela fonctionnera correctement pour certains et pas pour d'autres Smiley ohwell (genre thundermail en appli externe vs gmail en page du navigateur web)
re, j'utilise SendInBlue...

je viens de test en supprimer les class="w90"; mais uniquement en supprimant cet attribut et rien... Smiley mur toujours le même souci.
j'ai essayé de l'envoyer sur des adresses Outlook et Gmail = même souci d'affichage...
Modérateur
Bonjour,

Si ce code est inclus dans un courriel, les tableaux peuvent être encore pertinent pour de la mise en page car coté implémentation CSS ... ils ne sont pas à la page (je veux dire les applis de courriels).

Par contre, on est vraiment dans du code que l'on voyait il y a une vingtaine d'année , une imbrication de tableaux récursive Smiley cligne avec tout les risques d'erreurs d'imbrication qui vont avec .

Ton décalage peut-être du a une typo ou un défaut dans ton imbrication, une balise en trop ou manquante, car a priori en remettant tes portions de code dans leur balise table et tr (que tu n'as pas mis) , il n'y a pas franchement de décalage que l'on puisse voir. juste quelques attributs width="650" qui ne sont peut-être pas nécessaires .

Comme l'a fait @Mathieuu et en reprenant son fiddle en ajoutant des bordures et marges aux balises table pour visualisé l'espaces qu'elles occupent , on ne voit pas de franc défaut, sauf peut-être un tableau pas totalement rempli dans sa largeur . https://jsfiddle.net/g4awjhp0/



Cdt
Modifié par gcyrillus (25 Feb 2022 - 17:49)
Hello gcyrillus,

Merci de ton retour et désolée du retard de ma réponse.
Il paraît oui que j'utilise une méthode archaïque haha mais je ne me cache pas, c'est la seule que je sache utiliser...

Ok donc j'ai compris ce que tu dis, je ne suis pas sûre de savoir repérer l'erreur. Mais maintenant que je sais où chercher, je vais reprendre mon code et chercher à nouveau.
Je ne garantis rien mais je reviens vers vous cette semaine au plus tard pour vous partager ma progression, si ça vous intéresse haha !

Encore mille mercis de votre temps et de vos lumières !

Émeline
Sujet clos
Aller à