[résolu] Hauteur cellule table trop haute

salut

Je n'arrive pas à comprendre pourquoi les cellules de ces tableaux sont trop hautes de 6px. Une idée? Un aperçu du problème.

http://ressources.guitweb.com/tests/bug.png

Le code complet

supprimé

J'ai retourner le problème dans tout les sens , je n'y comprend rien. D'autant moins que j'ai d'autres tableaux qui eux sont identiques et sans bugs.
Modifié par keran (23 Jan 2010 - 21:22)

Et en supprimant les espaces insécables (les  ), qu'est-ce que ça donne. Si tes cellules sont vides, il vaut mieux les coder comme suit :

<td></td>

salut et merci victor

en supprimant les espaces, oui, çà fonctionne. Mais les espaces ne devraient pas provoqués ce bug d'affichage, j'utilise ce type de codage sur des centaines de tableaux depuis des lustres sans soucis.

http://ressources.guitweb.com/tests/bug2.png

là par exemple, c'est sans problèmes et avec exactement le même code.

Sauf que là, çà coince et je pensais plus au css. Les nbsp; dans les cellules vides sont d'ailleurs conseillés, au moins pour ie6/7. En fait, en insérant les images directement dans les cellules çà le fait dans toutes les situations et je coupe la poire en deux, je vais faire çà mais je reste à l'écoute.

Bonsoir,

Pour commencer ton code CSS est excessivement répétitif. Tu aurais intérêt à factoriser tout ça. Je ne vois pas l'intérêt de répéter toujours les mêmes styles alors que tu pourrais ne spécifier que ce qui change par rapport à un style de base... sauf si le but est d'écrire cinq fois trop de CSS.

Ensuite, tu places du texte dans des cellules de tableau. Quand je parle de «texte», j'inclus les espaces, espaces insécables, tabulations et retours à la ligne. Et du texte, dans un navigateur, c'est au minimum une ligne de texte. Et une ligne de texte, ça a une hauteur qui dépend de la taille du texte (font-size) et de la hauteur de ligne (line-height). À priori la hauteur de tes TD vient de là.

Pour finir, j'avoue avoir du mal à comprendre en quoi les visuels que tu nous présente sont des tableaux. Est-ce qu'il n'aurait pas été plus simple et au fond plus logique de faire des images ou graphiques?

Bonsoir,
Quand on ouvre ton code, tout le bloc est rouge ce qui rend difficile d'y voir clair. J'ai donc ajouté provisoirement des bordures permettant de délimiter les cellules :

td {
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
}

Et là que vois-je ?
http://gilloo.com/forums/images/cellules-tableau.jpg
Le tableau n'est pas composé de 8 rangées comme le laisse supposer ta photo mais de 4 seulement. Ce qui veut dire que chaque cellule est habillée en arrière plan par une image qui simule la division en 2. Il s'agira sans doute de corriger le placement (positionnement) de l'image de fond.
Par exemple, je suggère sans savoir à quoi ressemble ton image un truc du genre :

.diag_gauche_vide_2 { 
    background-image: url(images/diag_bas_gauche_vide_2.png) 0  50%;} 
/*_______ au lieu de ________*/
.diag_gauche_vide_2 { 
    background-image: url(images/diag_bas_gauche_vide_2.png);} 

ainsi l'axe horizontal de ton image sera placé sur l'axe horizontal des cellules.

bonsoir à tous

merci pour vos réponses.

a écrit :
Pour commencer ton code CSS est excessivement répétitif.

c'est très vrai mais c'est ma façon de dégrossir, après j'affine. ces codes sont un début de projet flex/air, et n'est évidement pas top.

a écrit :
Est-ce qu'il n'aurait pas été plus simple et au fond plus logique de faire des images ou graphiques?

plus simple si, mais comme il s'agit de générer à la volée des gammes et accords pour instruments à cordes avec php, c'est nettement moins lourd à charger même si le serveur est plus sollicité, c'est plus optimisé. chaque image pése moins de 100 octets. pour une image du même genre répétée 30/40 fois sur une même page c'est tout de suite 50/60 ko.

et les tableaux parce que c'est se qui se prête le mieux à la représentation shématique de diagrammes d'accords de basses/guitares. un tableau, cinq images et j'ai un manche de guitare ou de basse...

.diag_gauche_vide_2 { 
    background-image: url(images/diag_bas_gauche_vide_2.png) 0  50%;} 
/*_______ au lieu de ________*/
.diag_gauche_vide_2 { 
    background-image: url(images/diag_bas_gauche_vide_2.png);}

non çà marche po çà recouvre...la moitié de la cellule. deux liens pour vous rendre compte, sans bugs et avec. ils sont identiques mais le rendu est pourtant très différents.
Modifié par keran (17 Jan 2010 - 21:08)

keran a écrit :
non çà marche po çà recouvre... la moitié de la cellule.

Place une image (tes arrière-plans) réelle sur ce site car on ne sait pas si ce sont des images séparées ou une planche d'images multiples. Ça aide à aider.

/* _______________ Petite rigolade :
*/
Note pour l'orthographe : "çà" s'écrit comme "ça" et "po" s'écrit "pô" - Notre personnage de bande dessinée préféré (Titeuf) ne fait jamais de fôte dortograffes ni de conjuguaizons.

a écrit :
Note pour l'orthographe : "çà" s'écrit comme "ça" et "po" s'écrit "pô" - Notre personnage de bande dessinée préféré (Titeuf) ne fait jamais de fôte dortograffes ni de conjuguaizons.

La culture, toujours la culture Sale mioche và!

en fait c'est résolu, c'était un problème de css. Merci.
Modifié par keran (17 Jan 2010 - 21:03)