Mettre en position absolute 4 input range et leur label for

2 pièce(s) jointe(s)

re bonjour a tous

voila petit a petit j'avance

j'ai maintenant mes 4 slider pour les coin arrondis je voudrais qu'il soit moins éloignés en top l'un de l'autre (voir capture2)
quand je les met en position absoute il sont tous l'un sur l autre voir capture1

Code:

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
//******************************************** creation du menu div
if (barreg[i][e][1]=="insertdiv"){
bout.addEventListener("click", function() { document.getElementById("menudiv").style.visibility="visible";});
var pal=document.createElement("DIV");pal.className="palettecouleur";pal.id="menudiv";pal.style.height="250px";pal.style.width="600px";pal.style.visibility="hidden";
var b=document.createElement("Button");b.id="ferme";b.className="btclose";b.innerText="X";
b.addEventListener("click",function() { this.parentElement.style.visibility="hidden";});
pal.appendChild(b);
var bt=document.createElement("BUTTON");bt.innerText="Ajouer un div";bt.style.width="100px";bt.style.height="35px";bt.className="rad";
bt.addEventListener("click",function() { insertdiv();});
pal.appendChild(bt);
var p=document.createElement("p");pal.appendChild(p);
 
var newlabel = document.createElement("Label");newlabel.style.fontsize="25px";
newlabel.setAttribute("for","slidebord");
newlabel.innerText = "Epaisseur du trait : ";
newlabel.style.zIndex = "1";
pal.appendChild(newlabel);
var x = document.createElement("INPUT");x.setAttribute("type", "range"); x.min=0;x.max=30;x.value=0;x.id="slidebord";x.style.zIndex = "0";
x.addEventListener("mouseup",function() { borduresize(this.value);});pal.appendChild(x);
var bt=document.createElement("BUTTON");bt.innerText="+";bt.style.width="20px";bt.style.height="15px";bt.className="rad";bt.style.marginleft="10px";
bt.addEventListener("click",function() { if(actifelem !="undefined"){actifelem.style.border="1px solid gray";}});pal.appendChild(x);
pal.appendChild(bt);
var bt=document.createElement("BUTTON");bt.innerText="X";bt.style.width="20px";bt.style.height="15px";bt.className="rad";bt.style.marginleft="10px";
bt.addEventListener("click",function() { if(actifelem !="undefined"){actifelem.style.border=0;slidebord.value=0;}});pal.appendChild(x);
pal.appendChild(bt);
var p=document.createElement("p");pal.appendChild(p);
 
 
// coin gauche  haut
var newlabel = document.createElement("Label");newlabel.style.fontsize="25px";
newlabel.setAttribute("for","slidebordhg");
newlabel.innerText = "coin arrondi Haut Gauche : ";
newlabel.style.zIndex = "1";
//newlabel.style.position="absolute";left="10px";top="30px";
pal.appendChild(newlabel);
var x = document.createElement("INPUT");x.setAttribute("type", "range"); x.min=0;x.max=100;x.value=0;x.id="slidebordhg";x.style.zIndex = "2";x.margintop="0";
//x.style.position="absolute";left="100px";top="30px";
x.addEventListener("mouseup",function() {  if(actifelem !="undefined"){actifelem.style.borderTopLeftRadius=slidebordhg.value+"%";}});pal.appendChild(x);
var p=document.createElement("p");pal.appendChild(p);
 
 
// coin   droite  haut
var newlabel = document.createElement("Label");newlabel.style.fontsize="25px";
newlabel.setAttribute("for","slidebordhd");
newlabel.innerText = "Coin arrondi Haut Droite : ";
newlabel.style.zIndex = "1";
//newlabel.style.position="absolute";left="10px";top="80px";
pal.appendChild(newlabel);
var x = document.createElement("INPUT");x.setAttribute("type", "range"); x.min=0;x.max=100;x.value=0;x.id="slidebordhd";x.style.zIndex = "2";
//x.style.position="absolute";left="100px";top="80px";
x.addEventListener("mouseup",function() {  if(actifelem !="undefined"){actifelem.style.borderTopRightRadius=slidebordhd.value+"%";}});pal.appendChild(x);
var p=document.createElement("p");pal.appendChild(p);
 
 
// coin gauche  bas
var newlabel = document.createElement("Label");newlabel.style.fontsize="25px";
newlabel.setAttribute("for","slidebordbg");
newlabel.innerText = "coin arrondi Bas Gauche : ";
newlabel.style.zIndex = "1";
//newlabel.style.position="absolute";left="10px";top="130px";
pal.appendChild(newlabel);
var x = document.createElement("INPUT");x.setAttribute("type", "range"); x.min=0;x.max=100;x.value=0;x.id="slidebordbg";x.style.zIndex = "2";
//x.style.position="absolute";left="100px";top="130px";
x.addEventListener("mouseup",function() {  if(actifelem !="undefined"){actifelem.style.borderBottomLeftRadius=slidebordbg.value+"%";}});pal.appendChild(x);
var p=document.createElement("p");pal.appendChild(p);
 
 
// coin droite  bas
var newlabel = document.createElement("Label");newlabel.style.fontsize="25px";
newlabel.setAttribute("for","slidebordbd");
newlabel.innerText = "coin arrondi Bas Droite : ";
newlabel.style.zIndex = "1";
//newlabel.style.position="absolute";left="100px";top="180px";
pal.appendChild(newlabel);
var x = document.createElement("INPUT");x.setAttribute("type", "range"); x.min=0;x.max=100;x.value=0;x.id="slidebordbd";x.style.zIndex = "2";
//x.style.position="absolute";left="100px";top="180px";
x.addEventListener("mouseup",function() {  if(actifelem !="undefined"){actifelem.style.borderBottomRightRadius=slidebordbd.value+"%";}});pal.appendChild(x);
var p=document.createElement("p");pal.appendChild(p);
divsub.appendChild(pal);
}
//*****************************************fin de  creation du menu div

un peu d'aide ca me reposerait
merci d'avance

capture 1 en position absolute

Pièce jointe 244670

capture 2 en laissant les éléments dans le flux( trop écartés)

Pièce jointe 244679

merci pour le coup de main

On ne peut pas tester ton code sans le reste qui manque...

Mais déjà il y a quelques soucis que tu peux régler... : Plusieurs fois tu écris ce genre de chose :
left="10px";top="130px"; alors qu'il faudrait écrire :
XXX.style.left="10px"; XXX.style.top="130px"; où XXX est un objet html...

re

re
bonjour beguinner
oui c'est vrai j'ai perdu le fil

je vais corriger
merci pour le retour

Bonjour,

il faut mettre le PARENT en position:relative;.

Perso je préfère aussi mettre le parent en relative ou absolute (selon les besoins) mais il me semble que ça marche aussi sans ça sauf que dans ce cas la référence ne sera pas le parent si ma mémoire est bonne...

Bonjour,

le positionnement d'un élément se fait toujours PAR RAPPORT à son premier ancêtre positionné.

D'où l'intérêt de positionner le parent, si on veut que ce soit PAR RAPPORT à lui.

Re

De toute facon avec IE meme avec ca il sont encore trop éloignés. Si on les raproche tropil se superpose et le focus au mouse down donne pas sur le bon j aidon laisser tomber le input range pour une balise progress que je manipule avec le X juste un peu de code et ca fonctionne très bien comme elle a une. Propriétés '' value'' c est parfait
Merci quand meme

Bonjour,
ton code de création, vu dans ton post #1, est un véritable carnage d'écriture, mais il me semble que l'on t'a déjà dis d'indenter pour mieux visualiser.

Citation:

De toute facon avec IE meme avec ca il sont encore trop éloignés.

IE n'y est pour rien et outre le fait que je ne saisie pas pourquoi tu t'obstines à créer tes éléments via javascript, tu te sers de <p></p> pour espacer tes lignes, peut être une autre de tes astuces.
Extrait de ton code :
Code:

1 2 3 <label for="slidebordbg" style="z-index: 1;">coin arrondi Bas Gauche : </label> <input type="range" min="0" max="100" id="slidebordbg" style="z-index: 2;"> <p></p>
Je pense que tu as oublié que cette balise possède des marges par défaut.

Tu aurais meilleur compte de créer ta structure comme suit
Code:

1 2 3 4 <p> <label for="slidebordbg">coin arrondi Bas Gauche : </label> <input type="range" min="0" max="100" id="slidebordbg"> </p>
Citation:

j aidon laisser tomber le input range pour une balise progress

dommage car ils sont fait justement pour ce genre d'emploi contrairement au <progress>.