Espace entre le début de mon message et mon tableau

[Haileen]

Bonsoir!
Je viens de terminer un tableau et j'ai remarqué qu'un énorme espace séparait le début de mon message et mon tableau.


• Image



• HTML
Code:
<div style="text-align:center"><img src="IMAGE DE SON NOM EN AAAIIGHT! 45 #74899C"></div>
<table width="100%"><tr><tr><td align="center" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3; border-top:1px solid #969BA3" colspan="2"><div style="background-color:#BCCDD9;"><br><img src="URL DE L'IMAGE" width="80%">
<br></div></td></tr>
<tr><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;"><br>Signalement
<br></div></td><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;"><br>Carnet rose
<br></div></td></tr>
<tr><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><b>Nom :</b>
<b>Âge :</b>
<b>Sexe :</b>
<b>Race :</b>

<b>Caractère :</b>
<br></div></td><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><b>Père :</b> <a href="LIEN DU BOX"></a>
<b>Mère :</b> <a href="LIEN DU BOX"></a>
<b>Père de la mère :</b> <a href="LIEN DU BOX"></a>
<b>Produits</b>
<a href="LIEN DU BOX"></a>
<b>Prix de la saillie :</b>
<br></div></td></tr>
<tr><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;"><br>Soins
<br></div></td><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;"><br>Signes de qualité
<br><tr><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3" rowspan="2"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><b>Vétérinaire :</b>
<b>Maréchal-ferrant :</b>
<b>Dentiste :</b>
<b>Masso-thérapeuthe :</b>
<b>Points bonus :</b>
<br></div></td><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><b>Stud-book :</b>
<b>Qualité(s) certifiée(s) :</b>
<br><tr><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;"><br>Palmarès
<br></div></td></tr>
<tr><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;"><br>Expérience
<br></div></td><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><br><br><br><tr><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3" rowspan="2"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><b>Expérience :</b>

<div style="padding-left:15px"><b>Dressage :</b></div>
<div style="padding-left:15px"><b>Saut :</b></div>
<div style="padding-left:15px"><b>Show :</b></div>
<br></div></td><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><br><br><br><br><tr><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><br><br><br><br></div></td></tr>
<tr><td align="center" style="border:1px solid #969BA3" colspan="2"><div style="background-color:#C8D8E2; font-variant: small-caps;"><br>Photos
<br></div></td></tr>
<tr><td align="center" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3; border-bottom:1px solid #969BA3;" colspan="2"><div style="background-color:#BCCDD9;"><br><img src="URL DE L'IMAGE" width="80%">

<img src="URL DE L'IMAGE" width="80%">

<img src="URL DE L'IMAGE" width="80%">

<img src="URL DE L'IMAGE" width="80%">

<img src="URL DE L'IMAGE" width="80%"><br></div></td></tr></td></tr></table>

Si vous pouviez également m'aider à faire mon tableau en CSS plutôt qu'avec du HTML uniquement, ce serait gentil. Merci!

[SoraNoHime]

Bonsoir,

dans quelle partie du corps du forum se trouve ce tableau ? un message en lui même, dans une annonce, le tableau des messages, le corps d'une catégories ? De l'emplacement dépend le visuel du tableau ^^

Une fois que vous aurez répondu à ceci, nous nous mettrons à la css ^^.

Cordialement.

[Haileen]

Dans un message.

[SoraNoHime]

^^ Donc l'espacement est normal. car un message prend en compte les sauts de ligne. Il vous faut coller intégralement les parties du tableau pour qu'il n'y ait plus cet espace. Vous pouvez enlever également tous les

Code:

<br/>

qui seront remplacés par des sauts de lignes

Code:

    <div style="text-align:center"><img src="IMAGE DE SON NOM EN AAAIIGHT! 45 #74899C"></div>
    <table width="100%"><tr><tr><td align="center" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3; border-top:1px solid #969BA3" colspan="2"><div style="background-color:#BCCDD9;">
<img src="URL DE L'IMAGE" width="80%">
</div></td></tr>    <tr><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;">
Signalement
</div></td><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;">
Carnet rose
</div></td></tr><tr><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><b>Nom :</b>
    <b>Âge :</b>
    <b>Sexe :</b>
    <b>Race :</b>

    <b>Caractère :</b></div></td><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><b>Père :</b> <a href="LIEN DU BOX"></a>
    <b>Mère :</b> <a href="LIEN DU BOX"></a>
    <b>Père de la mère :</b> <a href="LIEN DU BOX"></a>
    <b>Produits</b>
    <a href="LIEN DU BOX"></a>
    <b>Prix de la saillie :</b>
</div></td></tr><tr><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;">
Soins
</div></td><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;">
Signes de qualité
<tr><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3" rowspan="2"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><b>Vétérinaire :</b>
    <b>Maréchal-ferrant :</b>
    <b>Dentiste :</b>
    <b>Masso-thérapeuthe :</b>
    <b>Points bonus :</b>
    <br></div></td><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><b>Stud-book :</b>
    <b>Qualité(s) certifiée(s) :</b>
    <br><tr><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;">
Palmarès</div></td></tr><tr><td align="center" style="border:1px solid #969BA3" width="50%"><div style="background-color:#C8D8E2; font-variant: small-caps;">
Expérience
</div></td><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;">


<tr><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3" rowspan="2"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;"><b>Expérience :</b>
<div style="padding-left:15px"><b>Dressage :</b></div>
    <div style="padding-left:15px"><b>Saut :</b></div>
    <div style="padding-left:15px"><b>Show :</b></div>

</div></td><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;">



<tr><td align="justify" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3"><div style="background-color:#BCCDD9; padding-left:25px; padding-right:15px; padding-top:10px;">



</div></td></tr>
    <tr><td align="center" style="border:1px solid #969BA3" colspan="2"><div style="background-color:#C8D8E2; font-variant: small-caps;">
Photos
</div></td></tr><tr><td align="center" style="border-left:1px solid #969BA3; border-right:1px solid #969BA3; border-bottom:1px solid #969BA3;" colspan="2"><div style="background-color:#BCCDD9;"><br><img src="URL DE L'IMAGE" width="80%"><img src="URL DE L'IMAGE" width="80%"><img src="URL DE L'IMAGE" width="80%"><img src="URL DE L'IMAGE" width="80%"><img src="URL DE L'IMAGE" width="80%"></div></td></tr></td></tr></table>

Je travaille sur votre css. vous avez bien accès à votre feuille CSS (en d'autres termes vous etes bien l'admin de ce forum ?)

[Haileen]

Oui oui, j'en suis l'administratrice!
Pour ce qui est de l'espace, il reste encore un petit vide mais ce n'est pas dérangeant, ce problème est donc résolu, merci!
Et merci également de bien vouloir m'aider pour le css!

[SoraNoHime]

Code:

.cadre1{
border-left:1px solid #969BA3;
border-right:1px solid #969BA3;
border-top:1px solid #969BA3;
}
.cadre2{
background-color:#BCCDD9;
}
.cadre3{
border:1px solid #969BA3;
}
.cadre4{
background-color:#C8D8E2;
font-variant: small-caps;
}
.cadre5{
border-left:1px solid #969BA3;
border-right:1px solid #969BA3;
}
.cadre6{
background-color:#BCCDD9;
padding-left:25px;
padding-right:15px;
padding-top:10px;
}
.cadre7{
padding-left:15px;
}
.cadre8{
border-left:1px solid #969BA3;
border-right:1px solid #969BA3;
border-bottom:1px solid #969BA3;
}
.cadre9{
background-color:#BCCDD9;
}

Voici css à mettre dans votre feuille. Je m'attaque au tableau ^^

En fait, il suffit de regrouper les

style="y"

que vous avez dans le tableau et de les transformer en

class="x"

et dans votre css noter

.x{y}

.

le x étant un nom que vous donner par genre de style utilisé, et le y ce que vous aviez mis dans votre style ^^

vous pouvez déjà copier coller le code que je vous ai donné plus haut.

Edit : voici votre tableau

Code:

<div style="text-align:center"><img src="IMAGE DE SON NOM EN AAAIIGHT! 45 #74899C"></div>
<table width="100%"><tr><tr><td align="center" class="cadre1" colspan="2"><div class="cadre2">
<img src="URL DE L'IMAGE" width="80%">
</div></td></tr><tr><td align="center" class="cadre3" width="50%"><div class="cadre4">
Signalement
</div></td><td align="center" class="cadre3" width="50%"><div  class="cadre4">
Carnet rose
</div></td></tr><tr><td align="justify" class="cadre5"><div class="cadre6"><b>Nom :</b>
<b>Âge :</b>
<b>Sexe :</b>
<b>Race :</b>

<b>Caractère :</b></div></td><td align="justify" class="cadre5"><div class="cadre6"><b>Père :</b> <a href="LIEN DU BOX"></a>
<b>Mère :</b> <a href="LIEN DU BOX"></a>
<b>Père de la mère :</b> <a href="LIEN DU BOX"></a>
<b>Produits</b>
<a href="LIEN DU BOX"></a>
<b>Prix de la saillie :</b>
</div></td></tr><tr><td align="center" class="cadre3" width="50%"><div class="cadre4">
Soins
</div></td><td align="center" class="cadre3" width="50%"><div class="cadre4">
Signes de qualité
<tr><td align="justify" class="cadre5" rowspan="2"><div class="cadre6"><b>Vétérinaire :</b>
<b>Maréchal-ferrant :</b>
<b>Dentiste :</b>
<b>Masso-thérapeuthe :</b>
<b>Points bonus :</b>
</div></td><td align="justify" class="cadre5"><div class="cadre6"><b>Stud-book :</b>
<b>Qualité(s) certifiée(s) :</b>
<tr><td align="center" class="cadre3" width="50%"><div class="cadre4">
Palmarès</div></td></tr><tr><td align="center" class="cadre3" width="50%"><div class="cadre4">
Expérience
</div></td><td align="justify" class="cadre5"><div class="cadre6">


<tr><td align="justify" class="cadre5" rowspan="2"><div class="cadre6"><b>Expérience :</b>
<div class="cadre7"><b>Dressage :</b></div>
<div class="cadre7"><b>Saut :</b></div>
<div class="cadre7"><b>Show :</b></div>

</div></td><td align="justify" class="cadre5"><div class="cadre6">



<tr><td align="justify" class="cadre5"><div class="cadre6">



</div></td></tr>
<tr><td align="center" class="cadre3" colspan="2"><div class="cadre4">
Photos
</div></td></tr><tr><td align="center" class="cadre8" colspan="2"><div class="cadre9"><br><img src="URL DE L'IMAGE" width="80%"><img src="URL DE L'IMAGE" width="80%"><img src="URL DE L'IMAGE" width="80%"><img src="URL DE L'IMAGE" width="80%"><img src="URL DE L'IMAGE" width="80%"></div></td></tr></td></tr></table>

[Haileen]

Les tableaux tout fouillis à cause de tout ces codes HTML sont derrière moi, ahah, merci énormément!
Puis ça va beaucoup m'aider pour ce que je dois faire par la suite.

[SoraNoHime]

Je vous en prie. Hésitez pas s'il y a un problème ^^. Bonne nuit à vous.

[Haileen]

Je n'hésiterai pas! Puis encore merci de votre rapidité et tout et tout, vous m'avez fort aidé! Bonne nuit!