un tableau qui se déforme ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu un tableau qui se déforme ?

Message par popoliline le Sam 11 Fév 2012 - 14:53

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 Smile

Merci infiniment,

Cordialement,

Pauline


Dernière édition par popoliline le Sam 11 Fév 2012 - 16:42, édité 1 fois

popoliline
**

Messages : 60
Inscrit(e) le : 15/01/2012

http://vapore-dei-sospiri.bbactif.com/
popoliline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un tableau qui se déforme ?

Message par Psyaliah le Sam 11 Fév 2012 - 14:57

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

Psyaliah
# Tropactif #

Féminin
Messages : 1280
Inscrit(e) le : 22/12/2011

http://e-booking.forumgratuit.org
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un tableau qui se déforme ?

Message par popoliline le Sam 11 Fév 2012 - 15:12

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

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>

popoliline
**

Messages : 60
Inscrit(e) le : 15/01/2012

http://vapore-dei-sospiri.bbactif.com/
popoliline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un tableau qui se déforme ?

Message par Scoubifitz le Sam 11 Fév 2012 - 16:22

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 ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un tableau qui se déforme ?

Message par popoliline le Sam 11 Fév 2012 - 16:27

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 Wink

popoliline
**

Messages : 60
Inscrit(e) le : 15/01/2012

http://vapore-dei-sospiri.bbactif.com/
popoliline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un tableau qui se déforme ?

Message par Scoubifitz le Sam 11 Fév 2012 - 16:35

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>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un tableau qui se déforme ?

Message par Psyaliah le Sam 11 Fév 2012 - 16:38

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.

Psyaliah
# Tropactif #

Féminin
Messages : 1280
Inscrit(e) le : 22/12/2011

http://e-booking.forumgratuit.org
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un tableau qui se déforme ?

Message par popoliline le Sam 11 Fév 2012 - 16:42

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 Smile Résolu

Merci à vous deux Smile le codage est beaucoup plus simple ainsi Wink

popoliline
**

Messages : 60
Inscrit(e) le : 15/01/2012

http://vapore-dei-sospiri.bbactif.com/
popoliline a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum