un tableau qui se déforme ?

[popoliline]

Bonjour à tous merci par avance de m'accorder un peu de votre temps.

J'ai remarqué quelque chose d'étrange sur mon forum, je n'arrive pas à comprendre d'où cela peut venir. Quand j'utilise la balise "td" ou "table", je ne sais pas laquelle des deux provoque cette distorsion, un grand écart se forme entre mon "titre" et le début de la balise. Je vous joins le lien ici. Si quelqu'un sait d'où cela vient, je suis preneuse

Merci infiniment,

Cordialement,

Pauline

[Psyaliah]

Coucou,
Peux tu me donner le code de ton tableau ?

[popoliline]

Bien sur et le CSS également si ça peut vous aider

Code:

/* CODE BOTTIN */

.nom1 {
font-size: 60px;
font-family: garamond;
letter-spacing: -3px;
font-style: italic;
color: #BB9A8E;
}

.titre1 {
text-transform: uppercase;
font-size: 14px;
margin-left: 20px;
color: #98961E;
text-shadow: #050505 1px 0px 0px;
font-weight: bold;
letter-spacing: -1px;
text-align: center;
}

.contour2 {
background-color: #171616;
border: 1px solid black;
border-image: initial;
}

.contour2:hover {
background-color: #171616;
border: 1px solid #aba921;
border-image: initial;
}

Code:

<center>

<div style="border-bottom: 1px solid #211f1f;border-right: 1px solid #211f1f;font-size: 10px;padding: 10px;-moz-border-radius-topright: 15px;-moz-border-radius-bottomright: 0px;-webkit-border-radius: 0px;margin-left: 5px;margin-right: 5px;margin-top: -5px;margin-bottom: 5px;text-shadow: #050505 1px 0px 0px;line-height: 13px;display: block;color:#564f4f;text-align: justify;width:450px;background-color:#171616;"><center><div style="text-transform:uppercase;font-size: 14px;margin-left: 20px;color:#98961e;text-shadow: #050505 1px 0px 0px;font-weight:bold;letter-spacing:-1px;width:260px;text-align:center;background:#141313;">»Les Doubles comptes<br><div style="border-top: #aba921 dotted 2px;"></div></div>
<center>
<table><tr><td><center><div class="titre1">abc</div>
<div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td>

<td><center><div class="titre1">def</div>
<div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;">
</div></div></center></td></tr>

<tr><td><center><div class="titre1">ghi</div>
<div class="contour2" style="-moz-border-radius : 9px; width: 200px; height:60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td>

<td><center><div class="titre1">jkl</div>
<div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td></tr>

<tr><td><center><div class="titre1">mno</div>
<div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td>

<td><center><div class="titre1">pqrs</div>
<div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;">
</div></div></center></td></tr>

<tr><td><center><div class="titre1">tuv</div>
<div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td>

<td><center><div class="titre1">wxyz</div>
<div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height: 60px;overflow:auto;">
</div></div></center></center></td></tr></table></center></div>
</center>


[Scoubifitz]

bonjour,

dans un message , le code html doit être sur une seule ligne !

chaque retour à la ligne créé un espace vide en début de code ...

[popoliline]

J'ai tout remis sur la même ligne mais cela n'a pas diminuer l'espacement. Je n'avais pas fais attention à ce détail je l'avoue cependant

[Scoubifitz]

bonjour,

c'est tout le code qui doit être sur une seule ligne ...

Code:

<center><div style="border-bottom: 1px solid #211f1f;border-right: 1px solid #211f1f;font-size: 10px;padding: 10px;-moz-border-radius-topright: 15px;-moz-border-radius-bottomright: 0px;-webkit-border-radius: 0px;margin-left: 5px;margin-right: 5px;margin-top: -5px;margin-bottom: 5px;text-shadow: #050505 1px 0px 0px;line-height: 13px;display: block;color:#564f4f;text-align: justify;width:450px;background-color:#171616;"><center><div style="text-transform:uppercase;font-size: 14px;margin-left: 20px;color:#98961e;text-shadow: #050505 1px 0px 0px;font-weight:bold;letter-spacing:-1px;width:260px;text-align:center;background:#141313;">»Les Doubles comptes<br><div style="border-top: #aba921 dotted 2px;"></div></div><center><table><tr><td><center><div class="titre1">abc</div><div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td><td><center><div class="titre1">def</div><div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td></tr><tr><td><center><div class="titre1">ghi</div><div class="contour2" style="-moz-border-radius : 9px; width: 200px; height:60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td><td><center><div class="titre1">jkl</div><div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td></tr><tr><td><center><div class="titre1">mno</div><div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td><td><center><div class="titre1">pqrs</div><div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td></tr><tr><td><center><div class="titre1">tuv</div><div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height:60px;overflow:auto;"></div></div></center></td><td><center><div class="titre1">wxyz</div><div class="contour2" style="-moz-border-radius : 9px; width: 200px; height: 60px; padding : 9px; text-align : justify;"><div style="width:200px;height: 60px;overflow:auto;"></div></div></center></center></td></tr></table></center></div></center>

[Psyaliah]

Alors pou ton css j'ai rajouter la forme générale du tableau dedans, et des cellules pour éviter d'avoir je ne sais combien de div partout et de style qui se balladent.

Code:

/* CODE BOTTIN */
 
.nom1 {
font-size: 60px;
font-family: garamond;
letter-spacing: -3px;
font-style: italic;
color: #BB9A8E;
}
 
.titre1 {
text-transform: uppercase;
font-size: 14px;
margin-left: 20px;
color: #98961E;
text-shadow: #050505 1px 0px 0px;
font-weight: bold;
letter-spacing: -1px;
text-align: center;
}
 
.contour2 {
background-color: #171616;
border: 1px solid black;
border-image: initial;
border-radius: 9px;
width: 200px;
height: 60px;
padding: 9px;
text-align : justify;
overflow:auto;
}
 
.contour2:hover {
background-color: #171616;
border: 1px solid #aba921;
border-image: initial;
}

.doublecompte {
border-bottom: 1px solid #211f1f;
  border-right: 1px solid #211f1f;
  font-size: 10px;padding: 10px;
  border-radius: 10px;
  text-shadow: #050505 1px 0px 0px;
  color:#564f4f;
  width:450px;
  background-color:#171616;
      margin-left: 5px;
  margin-right: 5px;
  margin-top: -5px;
  margin-bottom: 5px;
  line-height: 13px;
}

Pour le tableau le voici:

Code:

<center><table class="doublecompte"><tr><td colspan="2" style="text-transform:uppercase;font-size: 14px;margin-left: 20px;color:#98961e;text-shadow: #050505 1px 0px 0px;font-weight:bold;letter-spacing:-1px;width:260px;text-align:center;background:#141313;">»Les Doubles comptes</td></tr><tr><td colspan="2"><div style="border-top: #aba921 dotted 2px;"></td></tr><tr><td><center><div class="titre1">abc</div><div class="contour2">blabla</div></td><td><div class="titre1">def</div><div class="contour2">blabla</div></td></tr><tr><td><div class="titre1">ghi</div><div class="contour2">blabla</div></td> <td><center><div class="titre1">jkl</div><div class="contour2" >blabla</div></td></tr> <tr><td><center><div class="titre1">mno</div><div class="contour2">blabla</div></td><td><div class="titre1">pqrs</div><div class="contour2">blabla</div></td></tr><tr><td><div class="titre1">tuv</div><div class="contour2" >blabla</div></td><td><div class="titre1">wxyz</div><div class="contour2">blabla</div></td></tr></table></center>

J'ai supprimé les divs inutiles, tout mis en tableau. Il n'y a plus l'espace.

[popoliline]

Comme dirait mon père "mon dieu qu'elle est bête", on évoquera pour justifier ma bêtise le manque de sommeil. Merci infiniment de votre aide Résolu

Merci à vous deux le codage est beaucoup plus simple ainsi