Problème de dépassement

Bonjour,

En plus du problème déjà cité sur ce site (modifier un tableau HTML avec du JS), j'en ai un autre : (cette fois-ci on peut le faire avec le choix de la taille ou du nombre) j'ai un dépassement vertical, peu importe que je choisisse nombre ou taille, ça dépasse en bas. Pourtant je pensais avoir fait ce qu'il fallait (bon, je n'ai fait que le nombre : chaque cellule a une bordure gauche (ou haute) et en plus il y a une bordure droite (ou basse) et les deux de la div parente…)

Voici le nouveau lien http://jsfiddle.net/Ccile/uwarLa9o/

Merci d'avance

Salut !

Je dirais qu'il te faut prendre en compte la taille de la bordure d'un des côtés de tes divs. Si on met ça sous forme de fonction :

• la largeur totale de ton tableau est de type $(l+b)*x+b$ ;
• la hauteur totale de ton tableau est de type $(h+b)*y+b$

où

• $l$ est la largeur de tes cellules
• $h$ la hauteur de tes cellules
• $b$ l'épaisseur de tes bordures
• $x$ le nombre de cellules à positionner horizontalement
• $y$ le nombre de cellules à positionner verticalement

Tu connais par design $b$, et tu peux récupérer en JavaScript les dimensions de ton container (element.offsetWidth, element.offsetHeight), auxquelles il te faudra peut-être soustraire deux fois les bordures (à vérifier).
Notons au passage que tu peux peut-être récupérer l'épaisseur des bordures avec JavaScript, au pire en passant par les propriétés CSS des éléments.

Du coup, pour calculer $x$ en fonction de $l$ ou l'inverse – respectivement $y$ en fonction de $h$ ou l'inverse —, c'est une simple résolution d'équation pour extraire la valeur nécessaire.

Un petit mot cependant sur les arrondis. Il est clair que toutes les valeurs de $l$, $b$ et $h$ sont en pixels, et donc doivent rester entières. Cependant, pour éviter des surprises, n'arrondit les valeurs en pixels qu'au tout dernier moment, et éventuellement avec Math.ceil() plutôt que Math.round()

Bonjour,

Merci de ta réponse, mais n'est-ce pas ce que je fais ici ? :

1
2

lgth_hor=Math.floor((wdth-nbr_cell_hor-3)/nbr_cell_hor);
lgth_vert=Math.floor((hght-nbr_cell_vert-3)/nbr_cell_vert);

(Bon ce n'est fait que quand on choisit les nombres) Puisque wdth et hght sont les tailles de la div parente, qu'il y a une bordure de chaque côté de 1px (-2), que chaque cellule a une bordure droite (-nbr_cell) et qu'il y a en plus une gauche (-1)… Et pourquoi ceil plutôt que floor ? il ne vaut mieux pas que ce soit inférieur ou égal ?

Merci encore

PS Ce qui me semble d'autant plus étrange est que ça ne se passe qu'avec le bas et pas la droite… alors que ça fonctionne de la même façon non ?

Désolé, j'ai répondu trop rapidement… c'est bien Math.floor() et non Math.ceil().

En revanche, ton calcul ne me semble pas être correct. Là, si je comprends bien tes variables, tu as

$$h_{tot} = \left \lfloor{\dfrac{hauteur - nombre\; de\; cellules\; en\; hauteur - 3}{nombre\; de\; cellules\; en\; hauteur}}\right \rfloor$$

Ce qui correspond à, si j'adapte aux pseudo-variables que j'ai utilisées précédemment

$$h_{tot} = \left \lfloor{\dfrac{h - y - 3}{y}}\right \rfloor$$

Et similairement pour la largeur en remplaçant $h$ par $l$. Même si tu as fixé 3 dans ton équation (d'ailleurs, d'où vient cette pseudo-constante ?), ce que tu as et ce que tu proposes ne sont pas les mêmes choses, non ?

Pour récupérer les largeur et hauteur d'une cellule en fonction d'un nombre de cellules horizontales et veticales, moi j'aurais ceci :

$l = \dfrac{l_{tot} - b}{x} - b$ et $h = \dfrac{h_{tot} - b}{x} - b$

Pour calculer un nombre de cellules selon des dimensions spécifiées, ce serait ainsi pour moi :

$x = \dfrac{l_{tot} - b}{l + b}$ et $y = \dfrac{h_{tot} - b}{h + b}$

J'espère ne pas avoir fait de fautes d'algèbre… Si oui, on mettra ça sur le compte de l'heure avancée

Bonsoir,

En effet il est tard Ce n'est pas (h_{tot}) qui est calculé ainsi mais la hauteur de chaque cellule. wdth est la hauteur totale, et avant de diviser par le nombre de cellule en hauteur, je soustrais les bordures qui font toutes 1px, il y a les 2 de la div parente, plus la bordure "de fin" ainsi que celle de chaque cellule… Quand tu regardes les cellules, il y a une bordure de haut pour chaque et en plus à la fin il y a une bordure de bas, celle que j'ai appelée "de fin"… Est-ce que tu comprends mieux ce que je veux dire ? Pour l'instant je n'ai pas fait le calcul du nombre selon la taille mais la taille selon la fonction… Si tu choisis le nombre, le code est censé être bon (enfin, je ne vois pas l'erreur) et il n'y a en théorie pas de débordement…

Merci encore

Personne n'a d'idée ??

Bonsoir,

Merci de la réponse. Je ne comprends pas le *2… Pourquoi 2 ? (le reste ça va… Sinon, je ne savais pas qu'il y avait un padding aux td. En le mettant à 0 mon code fonctionne Et j'ai encore une question, si je ne prends qu'une cellule avec border-collapse collapse, et que j'inspecte l'élément, ça taille contient son padding+son contenu ainsi qu'une seule de ses bordures… est-ce normal ?

Merci beaucoup !!!!

Le *2 est simple : on part du principe que tes cellules ont une bordure fusionnée, du coup tu as une bordure entre chaque cellule, plus une bordure à chaque extrémité de ligne

Pour ta deuxième question, le border-collapse fusionne les bordures de cellules adjacentes, du coup, c'est comme si chaque cellule n'avait qu'une bordure d'un côté. Tu auras juste une cellule à l'extrémité qui affichera ses deux bordures (je ne sais plus si ça le fait sur la première ou la dernière cellule de la ligne).

Ah oui, parce que tu as fait nbCells-1… C'est bien ce que je faisais alors (sauf que je remplaçais directement la taille de la bordure…).

Justement, la cellule était seule… http://jsfiddle.net/Ccile/vz5wddhz/

Merci encore