Résolu Rubrique différente des principales

le tableau va tout à gauche, si je l'agrandi, ça fonctionne bien mais il y a toujours une espace entre le titre et le contenu...je sais pas pourquoi...

C'est pas grave! C'était peut-être une mauvaise idée au final. Je vais laisser tel quel finalement. Merci!

Je viens de voir une erreur dans ma proposition précédente, mais bon, ça ne résout pas tout.

Pour simuler une continuité tu peux aussi essayer de jouer sur des couleurs de fond identiques.

Bonsoir stormalo,  bonsoir Kiharu,

Tout d'abord, beaucoup de choses m'interpellent dans la conception du tableau (tout ce qui est en rouge), et surtout la largeur du tableau par rapport aux cellules. Comment peut-on avoir un tableau de 780px et y inclure trois cellules de 800px chacune ? 

Codes pris à la source :

<p style="text-align: center;"><em>Voici une liste non exhaustive des termes utilis&eacute;s</em><br/><em>et des mots japonais pour diff&eacute;rencer chaque histoire.</em></p>
<hr/> <!--balise inutile et elle provoque un espace-->
<p style="padding-left: 30px;"><span style="font-size: 12pt;"><strong>LES TYPES DE MANGA</strong></span></p>
<table style="width: 780px; height: 1000px; margin-top: 15px; background-color: #c4c4c4;" border="1" cellpadding="5" height="35">
<tbody>
<tr>
<td style="padding: 10px; width: 800px; height: 0px; text-align: center; background-color: #292929;" scope="row"><span style="color: #ffffff;"><strong>FRAN&Ccedil;AIS</strong></span></td>
<td style="padding: 10px; width: 800px; height: 0px; text-align: center; background-color: #292929;" scope="row"><span style="color: #ffffff;"><strong>JAPONAIS</strong></span></td>
<td style="padding: 10px; width: 800px; height: 0px; text-align: center; background-color: #292929;" scope="row"><span style="color: #ffffff;"><strong>D&Eacute;FINITION</strong></span></td>
</tr>

@Kiharu

Donc je pense qu'il serait déjà préférable de rectifier toutes ces valeurs en les mettant en pourcentages étant donné que tu veux que ce tableau prenne toute la largeur de l'article et ajouter les codes css placés volontairement dans le html (ne jamais les mettre avant car ça provoque un bug).

<p style="text-align: center;"><em>Voici une liste non exhaustive des termes utilis&eacute;s</em><br/><em>et des mots japonais pour diff&eacute;rencer chaque histoire.</em></p>
<style><!--
#module_contenu_article146723830 {
display: inline-block;
padding: 0;
margin-left: -15px; /*valeur à adapter*/
margin-right: -15px; /*valeur à adapter*/
}
--></style>
<p style="padding-left: 30px;"><span style="font-size: 12pt;"><strong>LEXIQUES</strong></span></p>
<table style="border: 1px solid #292929; width: 100%; height: 25px; background-color: #c4c4c4;" border="white" cellpadding="5" height="35">
<tbody>
<tr>
<td style="padding: 10px; width: 33.333%; text-align: center; background-color: #292929;" scope="row"><span style="color: #ffffff;"><strong>FRAN&Ccedil;AIS</strong></span></td>
<td style="padding: 10px; width: 33.333%; text-align: center; background-color: #292929;" scope="row"><span style="color: #ffffff;"><strong>JAPONAIS</strong></span></td>
<td style="padding: 10px; width: 33.333%; text-align: center; background-color: #292929;" scope="row"><span style="color: #ffffff;"><strong>D&Eacute;FINITION</strong></span></td>
</tr>

De mon côté, j'ai obtenu le résultat escompté, mais je l'ai fait sur mon blog. A toi de tester sur le tien.

Maintenant je ne comprends pas ce que tu souhaites en indiquant que tu veux coller le tableau au titre ? Quel titre ?....

Bonnes suites et tiens-nous au courant. 

PS Tu le sais peut-être, mais pour préserver tes propres codes, tu les mets entre les ces balises <!-- tes codes -->, sinon fais un copié/collé que tu sauvegardes sur un bloc-notes.

@Colette95

Ce que je pense être la demande de Kiharu  pour cette rubrique d'articles :

1) supprimer ce qui est entre le titre de l'article (Vocabulaire le plus utilisé au Japon) et la ligne des en-tête de colonnes du tableau

2) que le tableau occupe toute la largeur des articles (comme le titre de l'article)

C'est du moins ce que j'ai interprété dans sa demande.

Je n'ai pas regardé le tableau en lui même, ni  cherché à proposer un codage css pour l'ensemble des articles de cette Rubrique.

 La balise <hr/> ne me semble pas inutile, elle est destiné à faire un trait ; c'est un choix personnel de présentation. Bien sûr elle occupe un espace et son aspect dépend du css choisi.

Perso j''utilise celui ci :

/* ligne horizontale balise hr */
 #background hr {
 margin: 0.5em 200px;
 border-style: inset;
 border-width: 1px;
 border-color: #bababa
}

------------------------------------------- 

 La balise <hr/> de Kiharu correspond à ces lignes

hr {
    border-color: #c7c7c7;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
}

-------------------------------------------

  Voila Voila . .

Bonjour matinal stormalo, 

D'accord sur la démonstration de la balise <hr /> mais dans le cas présent pourquoi la conserver puisque Kiharu souhaite coller son tableau à je ne sais encore quoi ?... Donc, commencer par éliminer les espaces en faisant un peu de ménage dans le html, non ?...

A noter aussi des erreurs dans le css (validation W3C) pouvant influer sur l'interprétation des autres codes.

Attendons le résultat de ses essais...  et bonne journée.

hé !   je viens d'allumer le PC     

j'ajoute que dans le cas de ce sujet il y a aussi du texte qui ne sert à rien : juste en amont et en aval du trait.

Bonne journée aussi.

@stormalo,

C'est pour cela que je demande des "précisions précises"... 

Avec le code que tu m'as donner, j'ai enlevé le trait et la phrase mais ça ne change rien. J'ai toujours une espace...

1) Tu n'as pas répondu à ma question, tu veux coller ton tableau à quel titre ? Le titre de l'article, lexique ?...

2) Avec mes codes, est-ce que ton tableau prend toute la largeur ?

Allons-y étape par étape. 

1) Oui au titre de l'article mais ça ne semble pas possible parce que j'ai beau enlever ce qui est au dessus, il reste toujours un espace.

2) J'ai pas eu le temps d'essayer parce que je comptais abonner l'idée. Puisqu'avec les code de stormalo ça fonctionnait qu'à moitié, malheureusement.