L'affichage de mon email est tout à gauche
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">‌</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">‌</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>