Bonjour,

Je suis débutant en HTML/CSS, je suis des cours videos sur Youtube pour apprendre. Là je suis entrain de faire un email pour un projet perso mais mon affichage est tout à droite au lieu d'être au centre . Je ne sais pas si c'est parce que j'ai oublié une propriété dans mon code.

Ce que je fais

Lorsuqe je met width="100%" mon email prend tout mon écran or je souhaite que la taille wax soit de 600 pour respecter le standar des email . si je fais celà j'ai une image tout à droite pas centré avec une grosse marge à gauche

<!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>Email confirmation</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="x-apple-disable-message-reformatting" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style type="text/css">
        /* Google font import Lato */
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100&display=swap');

        /* Outlook link fix */
        #outlook a {
            padding: 0;
        }

        /* Hotmail background & line height fixes */
        .ExternalClass {
            width: 100% !important;
        }

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,

        /* Image borders & formatting */
        img {
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }

        a img {
            border: none;
        }

        /* Re-style iPhone automatic links (eg. phone numbers) */
        .appleLinksGrey a {
            color: #919191 !important;
            text-decoration: none !important;
        }

        /* Hotmail symbol fix for mobile devices */
        .ExternalClass img[class^=Emoji] {
            width: 10px !important;
            height: 10px !important;
            display: inline !important;
        }

        /* Button hover colour change */
        .CTA:hover {
            background-color: #F1AE42 !important;
        }

        @media screen and (max-width:640px) {
            .mobilefullwidth {
                width: 100% !important;
                height: auto !important;
            }

            .header {
                width:100% !important;
                height: 50px !important;
                background-color: #F8E5C7; !important;
                display: block; !important;
                text-align: center; !important;
            }

            .logo {
                padding-left: 30px !important;
                padding-right: 30px !important;
            }

            .h1 {
                font-size: 36px !important;
                line-height: 48px !important;
                padding-right: 30px !important;
                padding-left: 30px !important;
                padding-top: 30px !important;
            }

            .h2 {
                font-size: 18px !important;
                line-height: 27px !important;
                padding-right: 30px !important;
                padding-left: 30px !important;
            }

            .p {
                font-size: 16px !important;
                line-height: 28px !important;
                padding-left: 30px !important;
                padding-right: 30px !important;
                padding-bottom: 30px !important;
            }

            .CTA_wrap {
                padding-left: 30px !important;
                padding-right: 30px !important;
                padding-bottom: 30px !important;
            }

            .footer {
                padding-left: 30px !important;
                padding-right: 30px !important;
            }

            .number_wrap {
                padding-left: 30px !important;
                padding-right: 30px !important;
            }

            .unsubscribe {
                padding-left: 30px !important;
                padding-right: 30px !important;
            }

        }

    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body style="padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; background-color:#e8e8e8; font-family: 'Montserra' 'Alegreya', 'alegreya-sc'sans-serif; font-size:16px; line-height:24px; color:#919191">

<!--[if mso]>
    <style type="text/css">
        body, table, td {font-family: Montserra, Alegreya, Helvetica, sans-serif !important;}
    </style>
<![endif]-->

<!-- // FULL EMAIL -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>

        <!-- // LEFT SPACER CELL *** MUST HAVE A BACKGROUND COLOUR -->
        <td bgcolor="#EBEBEB" style="font-size:0px">&zwnj;</td>
        <!-- LEFT SPACER CELL // -->

            <!-- // MAIN CONTENT CELL -->
            <td align="center" min-width="100%" width="650" bgcolor="#FFFFFF">

                <table width="100%" border="0" cellspacing="0" cellpadding="0">

                    <tbody>
                        <!-- header -->
                        <tr>
                            <td class="header" style="font-family: montserrat; font-size: 10px; color: #000000;  font-weight: 400; padding: 5px 0;" align="center">Nous sommes très heureux de vous compter parmi nous, {{ contact.FIRSTNAME }}<br><a href="{{miroir}}" style="color: #7E3519; text-decoration: underline;">Voir cet email dans le navigateur</a> - <a href="{{ unsubscribe }}" style="color: #7E3519; text-decoration: underline;">Me désinscrire</a> 
                            </td>
                        </tr>
                        <!-- Header -->

                        <!-- START OF CONTENT -->
                        <!-- Logo -->
                        <tr>
                            <td class="logo" align="center" bgcolor="#ffffff" style="padding-top: 20px; padding-right: 50px; padding-bottom: 20px; padding-left: 50px;"><a href="#" target="_blank">
                            <img src="https://seydiparis.com/wp-content/uploads/2021/01/Logo-1.png" width="176" height="auto" alt="logo SEYDI PARIS"></a>   
                            </td>
                        </tr>
                        <!-- End Logo -->
                        <!-- Menu -->
                        <tr class="mobile-hidden" style="font-family: alegreya,'alegreya-sc'">
              <td align="center" style="padding:30px 10px 20px 30px;" valign="top">
                <table border="0" cellpadding="0" cellspacing="0" style="min-width: 100%" width="100%">
                        <tr>
                            <td align="left" class="mobile-hidden" style="font-size: 20px; line-height:1em; font-family: 'alegreya ','alegreya-sc'" valign="top"><a href="https://seydiparis.com/boutique/" style="text-decoration: none; color: #7E3519;"><span style="font-family:alegreya; text-transform: uppercase; font-weight:bold">Boutique</span>
                      </a>
                    </td>
                            <td align="center" class="mobile-hidden" style="font-size: 20px; line-height:1em; font-family: 'alegreya ','alegreya-sc'" valign="top"><a href="https://seydiparis.com/notre-engagement-pour-une-mode-ethique/" style="text-decoration: none; color: #7E3519;"><span style="font-family:alegreya; text-transform: uppercase; font-weight:bold">Engagement</span>
                      </a>
                    </td>
                            <td align="right" class="mobile-hidden" style="font-size: 20px; line-height:1em; font-family: 'alegreya ','alegreya-sc'" valign="top"><a href="https://seydiparis.com/seydi-story/" style="text-decoration: none; color: #7E3519;"><span style="font-family:alegreya; text-transform: uppercase; font-weight:bold">Seydi story</span>
                      </a>
                    </td>
                        </tr>

                        <!-- END OF CONTENT -->

                    </tbody>
                </table>

            </td>
        <!-- // MAIN CONTENT CELL -->

        <!-- // RIGHT SPACER CELL *** MUST HAVE A BACKGROUND COLOUR -->
        <td bgcolor="#EBEBEB" style="font-size:0px">&zwnj;</td>
        <!-- RIGHT SPACER CELL // -->

    </tr>
</table>
<!-- FULL EMAIL // -->
</body>
</html>

Ce que je veux

Décrivez ici ce que vous cherchez à obtenir

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

1 réponse


Salut,

Tout d'abord tu as, dans ton css, des problèmes de points virgules au niveau de certain important.

Ensuite dans le cas d'un tableau tu peux utiliser colgroup.

  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <colgroup>
      <col span="1" style="width: 20%;">
      <col span="1" style="width: 60%;">
      <col span="1" style="width: 20%;">
    </colgroup>
    <tbody>
      <tr>
        <td></td>
        <td bgcolor="#FFFFFF">
          <p>Fusce maximus id tortor non scelerisque. Integer eget magna tempus, tincidunt nisl eget, rutrum ex. </p>
        </td>
        <td></td>
      </tr>
    </tbody>
  </table>