Bonjour, j'aimerais savoir comment je dois faire pour les les TD participer soient aligner sans tenir compte de la longueur du texte.
Merci
Modifié par tomferrari (19 Jun 2014 - 14:18)
Merci
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/favicon.ico" />
<title>Newsletter</title><style type="text/css">
/* Client-specific Styles */
#outlook a
{
padding:0; /* Force Outlook to provide a "view in browser" menu link. */
}
body
{
width:100% !important;
-webkit-text-size-adjust:100%; /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}
.ExternalClass
{
width:100%; /* Force Hotmail to display emails at full width */
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div
{
line-height: 100%;/* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
}
#backgroundTable
{
margin:0; padding:0; width:100% !important; line-height: 100% !important;
}
img
{
outline:none;
text-decoration:none;
border:none;
-ms-interpolation-mode: bicubic;
}
a img
{
border:none;
}
.image_fix
{
display:block;
}
p
{
margin: 0px 0px !important;
}
table td
{
border-collapse: collapse;
}
table
{
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
footer
{
width: auto !important;
}
/*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/
/*STYLES*/
table[class=full] { width: 100%; clear: both; }
td[class="boutonparticiper"]
/*################################################*/
/*IPAD STYLES*/
/*################################################*/
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #ffffff; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 440px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
table[class="sthide"]{display: none!important;}
img[class="bigimage"]{width: 420px!important;height:219px!important;}
img[class="col2img"]{width: 260px!important;height:160px!important;}
img[class="image-banner"]{width: 440px!important;height:106px!important;}
td[class="menu"]{text-align:center !important; padding: 0 0 10px 0 !important;}
td[class="logo"]{width: 100px !important;}
img[class="col3img"]{width: 420px !important;height: 200px !important;}
table[class="tablet-button"]{margin-left: 14px !important;}
img[class="logo"]{padding:0!important;margin: 0 auto !important;float: left !important; padding-left: 10px!important;}
td[class="texte"]{ font-size: 20px !important; padding-right: 10px !important;}
img[class="footer"]{width: 440px !important; height: 60px !important;}
img[class="pubentete"]{width:440px !important; height: auto !important; }
img[class="separateur"]{width: 420px !important;}
img[class="banierepub"]{width: 440px !important;}
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
@media only screen and (max-width: 480px){
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #ffffff; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 280px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
table[class="sthide"]{display: none!important;}
img[class="bigimage"]{width: 260px!important;height:136px!important;}
img[class="col2img"]{width: 260px!important;height:160px!important;}
img[class="image-banner"]{width: 280px!important;height:68px!important;}
img[class="logo"]{width : 70px!important;height: auto!important; float: left !important; padding-left: 0px !important;}
td[class="logo"]{width: 90px !important;}
td[class="menu"]{display: none!important;}
td[class="texte"]{padding-bottom : 0px !important; font-size: 12px !important;}
img[class="footer"]{width: 280px !important; height: 40px !important;}
td[class="pubentete"]{width: auto !important; height: 125px !important;}
img[class="pubentete"]{width: 280px !important; height : auto !important;}
img[class="col3img"]{width: 260px !important; height: 160px !important;}
img[class="separateur"]{width: 260px!important;}
img[class="banierepub"]{width: 280px !important;}
}
</style></head>
<body>
<div class="block">
<!-- 3-columns -->
<table width="100%" bgcolor="#e8e8e8" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="3columns">
<tbody>
<tr>
<td>
<table bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" modulebg="edit">
<tbody>
<tr>
<td>
<table width="540" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<tr>
<td width="100%"><img src="img/separateur.png" class="separateur"></td>
</tr>
<tr>
<td width="100%" height="20"></td>
</tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 19px; color: #333333; text-align:left;line-height: 20px;">
<b>Jeux</b>
</td>
</tr>
<tr>
<td width="100%" height="20"></td>
</tr>
<tr>
<td>
<!-- col 1 -->
<table width="170" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- image 2 -->
<tr>
<td width="170" height="120" align="center" class="devicewidth">
<img src="img/image1.png" alt="" border="0" width="170" height="128" style="display:block; border:none; outline:none; text-decoration:none;" class="col3img">
</td>
</tr>
<!-- end of image2 -->
<tr>
<td>
<!-- start of text content table -->
<table width="170" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- title2 -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 19px; color: #333333; text-align:left;line-height: 20px; border-left:2px solid red;padding:5px;" st-title="3col-title1">
<b> Inscrivez vous!</b>
</td>
</tr>
<!-- end of title2 -->
<!-- Spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- content2 -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align:left;line-height: 20px;" st-content="3col-para1">
texte ici
</td>
</tr>
<!-- end of content2 -->
<!-- Spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- button -->
<tr>
<td>
<table height="30" align="right" valign="bottom" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="30" style=" background-color:#E30115;background-clip: padding-box;font-size:13px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px;"class="boutonparticiper">
<span style="color: #ffffff; font-weight: 300;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="#"><b>PARTICIPEZ</b></a>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- /button -->
</tbody>
</table>
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
<!-- spacing -->
<table width="15" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
<tbody>
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!-- end of spacing -->
<!-- col 2 -->
<table width="170" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- image 2 -->
<tr>
<td width="170" height="120" align="center" class="devicewidth">
<img src="img/image2.png" alt="" border="0" width="170" height="128" style="display:block; border:none; outline:none; text-decoration:none;" class="col3img">
</td>
</tr>
<!-- end of image2 -->
<tr>
<td>
<!-- start of text content table -->
<table width="170" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- title2 -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 19px; color: #333333; text-align:left;line-height: 20px; border-left:2px solid red;padding:5px;" st-title="3col-title2">
<b>Gagnez votre compile</b>
</td>
</tr>
<!-- end of title2 -->
<!-- Spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- content2 -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align:left;line-height: 20px;" st-content="3col-para2">
texte ici
</td>
</tr>
<!-- end of content2 -->
<!-- Spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- /Spacing -->
<!-- button -->
<tr>
<td>
<table height="30" align="right" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="30" style=" background-color:#E30115;background-clip: padding-box;font-size:13px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px;" class="boutonparticiper">
<span style="color: #ffffff; font-weight: 300;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="#"><b>PARTICIPEZ</b></a>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- /button -->
</tbody>
</table>
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
<!-- end of col 2 -->
<!-- spacing -->
<table width="1" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
<tbody>
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!-- end of spacing -->
<!-- col 3 -->
<table width="170" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- image3 -->
<tr>
<td width="170" height="120" align="center" class="devicewidth">
<img src="img/image3.png" alt="" width="170" height="128" border="0" style="display:block; border:none; outline:none; text-decoration:none;" class="col3img">
</td>
</tr>
<!-- end of image3 -->
<tr>
<td>
<!-- start of text content table -->
<table width="170" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- title -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 19px; color: #333333; text-align:left;line-height: 20px; border-left:2px solid red;padding:5px;" st-title="3col-title3">
<b>Gagnez vos places</b>
</td>
</tr>
<!-- end of title -->
<!-- Spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- content -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align:left;line-height: 20px;" st-content="3col-para1">
texte ici
</td>
</tr>
<!-- end of content -->
<!-- Spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- button -->
<tr>
<td>
<table height="30" align="right" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="30" style=" background-color:#E30115; background-clip: padding-box;font-size:13px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px;" class="boutonparticiper">
<span style="color: #ffffff; font-weight: 300;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="#"><b>PARTICIPEZ</b></a>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- /button -->
</tbody>
</table>
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" height="20"></td>
</tr>
<tr>
<td width="100%"><img src="img/separateur.png" class="separateur"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" height="20"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- end of 3-columns -->
</div>
</body>
</html>
Modifié par tomferrari (19 Jun 2014 - 14:18)