Bonjour à tous,
J'espère ne pas faire de doublon avec ce message mais je n'ai pas trouvé de réponse à mon petit soucis.
Je débute tout juste et j'essaie de construire un tableau tout simple avec une colonne et un "imbriquement" de deux colonnes.
La largeur de la colonne est de 700pixels. Dans mon imbrication, les deux colonnes font donc 350 pixels chacune.
Tout allait bien jusqu'à ce que j'ajoute des images de 700pixels dans ma première colonne.
Les deux colonnes du dessous se sont alors décalés (en rouge dans le code ci-dessous). La première a pris la taille de la colonne du dessus (700pixels) et a donc décalé la seconde colonne à droite. Je précise que la seconde a gardé ses 350pixels de large.
J'imagine que je peux régler mon soucis avec un colspan mais je n'arrive pas à l'appliquer correctement.
Vous pouvez voir le bug ici : http://presentcontinu.com/NL/2013/NL1/index.html
Quelqu'un pourrait-il m'aider ?
Voici mon code :
<table border="0" cellspacing="0" cellpadding="0" width="700" align="center">
<tr>
<td class="header" align="left" valign="top">
<p>image1 (width="700" height="150" )</p>
</td>
</tr>
<tr>
<td align="left" valign="top">
<p>image2 (width="700" height="50" )</p>
</td>
</tr>
<tr>
<td align="left" valign="top">
<p>image3 (width="700" height="50" )</p>
<p> </p>
</td>
</tr>
<tr>
<td align="left" valign="top">
<p>image4 (width="700" height="50" )</p>
<p> </p>
</td>
</tr>
<tr>
<td align="left" valign="top">
<p>image5 (width="700" height="50" )</p>
<p> </p>
</td>
</tr>
<tr>
<td align="left" valign="top">
<p>image6 (width="700" height="50" )</p>
<p> </p>
</td>
</tr>
<tr>
<td width="350" align="left" valign="top">
<p>image7 (width="350" height="50" )</p>
<p class="retrait25"></p>
</td>
<td width="350" align="left" valign="top">
<p>image8 (width="350" height="50" )</p>
<p class="retrait25"></p>
</td>
</tr>
<tr>
<td align="left" valign="top">
<p>image8 (width="700" height="50" )</p>
<p class="retrait25"></p>
</td>
</tr>
<tr>
<td>
<p class="retrait25" align="center"></p>
</td>
</tr>
</table>
Et le css :
body {
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 20px 20px 0 0;
padding: 0;
font-size: 11px;
line-height: 1.3em;
}
td {
font-size: 11px;
}
a {
color: #666666;
}
a img {
border: none;
}
.header {
padding-bottom: 15px;
background-repeat: no-repeat;
}
.retrait25 {
padding-right: 25px;
padding-left: 25px;
}
Merci beaucoup et désolé par avance si mon code vous faisait bondir !!