Bonjour,

J'ai un editeur avec un div principal. Un bouton permet d'ajouter des div dans ce div en javascript. Le problème c'est qu'à chaque fois que j'ajoute un div à l'aide du bouton, tout le contenu du div principal se décale de quelques pixels vers le bas...

Voici mon code:
css:
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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
 body { behavior:url("csshover.htc"); }
 
 .lefthandle:hover {
        border: 1px dotted #FF8C00;
	display: block;
	margin-top: 0px;
	left: 0px;
	background:url(doc/cursor_move.gif) no-repeat scroll 0% 100%;
	cursor: move;
	opacity: 0.700;
	width: 25px;
	height: 25px;
	float: left;
	position: absolute;
	top: auto;
 
}
 
  .lefthandle { margin: 0px;
   left: 0px;
	background: url(doc/blank.gif) repeat;
	color: Gray;
	display: block;
	margin-top: 0px;
	width: 25px;
	height: 25px;
	float: left;
	position: absolute;
	top: auto;
 }
 
  .box:hover {
	display: block;
	border: 1px Menu;
	background: InactiveBorder none repeat scroll 0% 50%;
	width: 250px;
	height: 123px;
	padding-left: 30px;
}
 
  .box {
   position: absolute;
	margin: 5px;
	padding-left: 30px;
	background: transparent none repeat scroll 0% 50%;
	width: 250px;
	height: 123px;
	z-index: 1;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	top: auto;
}
 
  .righthandle:hover {
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	background: url(doc/cursor_delete.gif) no-repeat scroll 0% 50%;
	border: 1px dotted #FF8C00;
	cursor: hand;
	color: rgb(238, 238, 238);
	opacity: 0.700;
	width: 25px;
	height: 25px;
	float: right;
	position: relative;
	top: auto;
	right: auto;
}
 
  .righthandle { margin: 0px;
   height: 25px;
	color: Gray;
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	background: url(doc/blank.gif) repeat;
	width: 25px;
	float: right;
	position: relative;
	top: auto;
	right: auto;
 }
.carre_resize {
	width: 25px;
	height: 25px;
	RIGHT: 0px;
	CURSOR: se-resize;
	BOTTOM: 0px;
	POSITION: absolute;
	background: url(doc/cursor_resize.gif) no-repeat;
}
.carre_resize:hover {
	border: 1px dotted #FF8C00;
	width: 25px;
	height: 25px;
	RIGHT: 0px;
	CURSOR: se-resize;
	BOTTOM: 0px;
	POSITION: absolute;
	background: url(doc/cursor_resize.gif) no-repeat;
}
Ici les div ajoutés à l'aide du bouton utilisant les classes css ci dessus:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<DIV class=box id=boxHandle1 style="Z-INDEX: 3; FILTER: alpha(opacity=100); LEFT: 259px; TOP: 230px; opacity: undefined" onclick="changeZindex('boxHandle1')">
<DIV class=lefthandle id=lefthandle1></DIV>
<DIV class=righthandle id=righthandle1 onclick="delDiv('boxHandle1')"></DIV>
<DIV class=carre_resize onmousedown="init(event,'boxHandle1');" id=carre_resize1></DIV>
<DIV id=boxContent1 contentEditable=true>blabla</DIV></DIV>
 
<DIV class=box id=boxHandle2 style="Z-INDEX: 2; LEFT: 21px; TOP: 100px" onclick="changeZindex('boxHandle2')">
<DIV class=lefthandle id=lefthandle2></DIV>
<DIV class=righthandle id=righthandle2 onclick="delDiv('boxHandle2')"></DIV>
<DIV class=carre_resize onmousedown="init(event,'boxHandle2');" id=carre_resize2></DIV>
<DIV id=boxContent2 contentEditable=true>blabla</DIV></DIV>
Pourquoi le contenu se décale?

Merci d'avance pour votre aide.