Une différence de début "element.style.top" entre un div et le div qui le contient.

**Programir** · 25/01/2022, 12h04

Salut, j'ai un espace d'au-moins 15 ou 20 px entre le haut du div intérieur et le début du div qui le contient.
Pourtant il n'y a pas de margin-top ni de padding, c'est bizarre, j'arrive pas à voir d'où vient ce décalage entre les deux divs.
C'est un décalage entre le div "div_membres" et le div "players".

Ils ont par contre un "height" différent car le premier (le contenant) englobe aussi les boutons qui sont sous le div intérieur.

Le code HTML des deux DIVS et de la table html.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<div id="div_membres">
	<div id="players">
		<table id="table_player">
			<tr><td>JeanLeFort</td><td><input type="checkbox" name="nom1"/></td></tr>
			<tr><td>Fermist</td><td><input type="checkbox" name="nom2"/></td></tr>
			<tr><td>Grabella Orianna</td><td><input type="checkbox" name="nom3"/></td></tr>
			<tr><td>Commandant Frejus</td><td><input type="checkbox" name="nom4"/></td></tr>
			<tr><td>.................</td><td><input type="checkbox" name="nom5"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom6"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom7"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom8"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom9"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom10"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom11"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom12"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom13"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom14"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom5"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom6"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom7"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom8"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom9"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom10"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom11"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom12"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom13"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom14"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom5"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom6"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom7"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom8"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom9"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom10"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom11"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom12"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom13"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom14"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom5"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom6"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom7"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom8"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom9"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom10"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom11"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom12"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom13"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom14"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom5"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom6"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom7"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom8"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom9"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom10"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom11"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom12"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom13"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom14"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom5"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom6"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom7"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom8"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom9"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom10"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom11"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom12"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom13"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom14"/></td></tr>
			<tr><td>ulmmd</td><td><input type="checkbox" name="nom5"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom6"/></td></tr>
			<tr><td>eklfklflmmd</td><td><input type="checkbox" name="nom7"/></td></tr>
			<tr><td>fhkfeklfklflmmd</td><td><input type="checkbox" name="nom8"/></td></tr>
			<tr><td>kfeklfklflmmd</td><td><input type="checkbox" name="nom9"/></td></tr>
			<tr><td>klfklflmmd</td><td><input type="checkbox" name="nom10"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom11"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom12"/></td></tr>
			<tr><td>fjfhkfeklfklflmmd</td><td><input type="checkbox" name="nom13"/></td></tr>
			<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaa</td><td><input type="checkbox" name="nom14"/></td></tr>						
		</table>
 
	</div>
 
	<div id="scrolls">
		<img src="img/scrolls.png"/>
	</div>
	<input id="fermecadre" type="button" value="Fermer" onclick="closecadre()" />
	<input id="exclure" type="button" value="exclure" />
 
</div>

Le code CSS des deux divs et de la table html.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* Div de la liste des membres */
#div_membres{
position:relative;
display:none;
top:343px;
border:4px double #0099cc;
height:340px;
width:230px;
text-align:center;
margin-left:auto;
margin-right:auto;
background-color:red;
}
 
/* Div de cadrage de la table html.*/
#players{
position:relative;
top:0;
width:230px;
height:300px;
overflow:scroll;
color:white;
margin-bottom:5px;
text-align:center;
background-color:yellow;
}
 
/* Table html */
#table_player{
position:relative;
top:0;
width:100%;
}

**Jacques Beauregard** · 25/01/2022, 14h03

Hello,

Difficile à voir sans visuel de l'application

Pourrais-tu faire un petit screen de la console de dev du navigateur en sélectionnant un des deux div ?
cela aiderait à y voir plus clair.

Merci

**Programir** · 28/01/2022, 18h17

salut , Merci de m'aider.
J'aurais bien voulu, mais je n'ai pas de compte sur un site qui enregistre des images, j'ai tellement de comptes ailleurs que j'en ai pas fait pour ça.

Mais on peut l'imaginer comme un rectangle rouge pour le Div contenant, et un rectangle jaune pour le div qui est dedans, et le résultat est que au lieu de voir les deux div superposés, le jaune dans le rouge, on voit une bande rouge d'une hauteur de 15 à 20px en debut du rectangle contenant, car c'est sa couleur qu'on voit, et sous la bande le reste est jaune car c'est la couleur du rectangle contenu dans le rouge.
Il y a donc un décalage car normalement on devrait voir que du jaune puisque c'est le rectangle contenu dans le rouge, celui-ci (le rouge) étant caché par le jaune du rectangle, c'est ce qu'on devrait voir.

Le problème se présente comme si on avait mis un margin-top de 20px sur le rectangle jaune (celui qui est à l'interieur du rectangle rouge, ce qui ne va donc pas.

**ProgElecT** · 28/01/2022, 19h01

Salut

Dans ta div conteneur le CSS a text-align:center; et height:340px;, dans le CSS de la div interne tu as height:300px;.
De fait, tu te retrouves bien centré, (340 - 300) / 2 = 20px.

**Programir** · 29/01/2022, 06h24

Salut progElect,
Le CSS ne tient pas compte de ça ?

Ils ont par contre un "height" différent car le premier (le contenant) englobe aussi les boutons qui sont sous le div intérieur.

Et le text-align, c'est pas que pour l'horizontal ?

EDIT : J'ai testé en changeant les valeurs de height pour les deux divs et le résultat est le même.
J'ai même supprimé le text-align pour voir, ça ne change rien.

EDIT2 : Je viens d'enlever le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

overflow:scroll;

dans le div "player" (le div intérieur).
Et du coup ce div se place bien au bon endroit à la même hauteur que son contener (div "membre").
Mais je ne comprend pas pourquoi le overflow fait ce décalage et j'ai besoin de l'overflow sur ce div "player" car il contient une table HTML (table_player) comme tu peux le voir sur mon code et ça crée le scroll dont j'ai besoin.

EDIT3 (Dernier épisode) : J'ai trouvé la solution : laisser le "overflow:scroll" du div intérieur (player), mais lui mettre un "top:-30" au lieu de 0 actuel. Du coup ça a remonté le div et enlevé le décalage.
ET les boutons qui sont au bas de ce div je les ai remontés aussi de la même valeur pour quils restent collés juste au bas du div "player".

Mon problème est résolu, merci de m'avoir soutenu !
Un programmeur seul devant les bugs c'est atroce

**NoSmoking** · 29/01/2022, 10h45

Bonjour,
Pas franchement compris où était ton soucis mais toujours est-il que donner des hauteurs à tous tes éléments imbriqués engendre potentiellement des problèmes et que dire de ces positionnements/décalages à grand coup de top, la propriété margin est un peu faite pour cela.

Et le text-align, c'est pas que pour l'horizontal ?

oui pour des éléments inline-block/block.

J'ai trouvé la solution : laisser le "overflow:scroll" du div intérieur (player), mais lui mettre un "top:-30" au lieu de 0 actuel.

cela me parait être la pire des solutions, le code que tu fournis ne permet pas de reproduire ton décalage.

Mon problème est résolu,

tant mieux mais je reste sur ma faim !