Aligner des div avec createElement

Bonjour,

Pour chaque machine, je crée une div de la sorte :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

//On crée une div pour chaque machine var nbr_machine = length; var id_div=0; while(nbr_machine != 0){ maDiv = document.createElement("div"); maDiv.id = 'chartdiv'+id_div; maDiv.style.height = '400px'; maDiv.style.width = '100%'; maDiv.style.top='600px'; document.getElementById('pareto_machine').appendChild(maDiv) id_div++; nbr_machine--; }

---

Je m'en sers ensuite pour insérer un graphique relatif à chaque machine dans chaque div.

Mon problème ici, est que les divs crées ce mettent les unes en dessous des autres, j'aimerai qu'elles se placent les unes à côtés des autres.

Ainsi on aurait : <Div> <Div> <Div>
Et non : <Div>
<Div>
<Div>

En rajoutant les lignes suivantes :

Code:

---

1 2 3

maDiv.style.position='absolute'; maDiv.style.left='30%'; maDiv.style.float='left';

---

Je me retrouve avec tous mes graphiques qui se superposent.

Des idées pour résoudre mon problème ? Merci d'avance !

C'est parce que la propriété CSS float ne s'utilise pas comme ça en Javascript (qui est un mot réservé). Cf la FAQ :
http://javascript.developpez.com/faq...css.javascript

Citation:

---

Envoyé par Kazumi

Mon problème ici, est que les divs crées ce mettent les unes en dessous des autres

---

Ben... c'est un peu

1. Le comportement normal.
2. Ce que tu demandes.

Code:

---

maDiv.style.width = '100%';

---

:aie:
Si tu veux que les divs ne soient pas les unes en-dessous des autres, inutile d'utiliser float, il suffit de les mettre en display: inline-block et de leur donner une largeur qui permette d'en afficher au moins deux sur une ligne...

J'ai donc modifier ma ligne comme ceci :

Code:

---

maDiv.style.cssFloat='left';

---

Mais rien n'y fait, mes graphiques sont toujours alignés verticalement ou superposés :/

Citation:

---

Envoyé par Kazumi

Mais rien n'y fait, mes graphiques sont toujours alignés :/

---

Cf le message de Bovino :

Citation:

---

Envoyé par Bovino

Ben... c'est un peu

1. Le comportement normal.
2. Ce que tu demandes.

Code:

---

maDiv.style.width = '100%';

---

---

Merci pour vos réponses, mais après modification du code, toujours rien :/

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

//On crée une div pour chaque machine var nbr_machine = length; var id_div=0; while(nbr_machine != 0){ maDiv = document.createElement("div"); maDiv.id = 'chartdiv'+id_div; maDiv.style.height = '250px'; maDiv.style.display='inline-block'; document.getElementById('pareto_machine').appendChild(maDiv) id_div++; nbr_machine--; }

---

Code:

---

var nbr_machine = length;

---

:roll:

Code:

---

1 2 3 4 5 6 7 8

//On récupère les informations necessaires à la création des camemberts pour chaque machine var elt = document.getElementById("pareto2"); //On split selon le séparateur définit dans le fichier index_pareto_machine.xsl var elt_split = elt.innerHTML.split("/MACHINE "); //On supprime le premier élément qui est vide elt_split.shift(); //On récupère la longueur de l'élément obtenu et onle stocke dans une variable var length = elt_split.length;

---

Variable récupéré plus tôt dans mon code pour connaître le nombre de machine

Une div est un élément de type bloc, elle occupe par défaut toute la largeur de son contenant. Spécifier width:100% ou rien du tout ne résout donc rien. Il faut spécifier une largeur fixe (et non une hauteur fixe, ce qui se fait très rarement en web)

http://jsfiddle.net/T8nQp/

Aucun changement même en définissant une valeur fixe à width. Je commence à me demander si je peux aligner des graphiques amcharts :/

Ne serait-ce pas un problème de compatibilité du inline-block avec ie ? Car quand j'implémente ton code Bovino, les éléments ne s'alignent pas horizontalement.

Tu as IE6 ? :aie:

IE7, je suis sur la machine du bureau donc pas trop le choix, et les clients aiment IE :aie:

IE7 ne comprend pas la valeur inline-block pour la propriété display (uniquement pour les éléments de type block, pour les éléments inline y a pas de problème). Mais à partir de IE8 c'est ok.

en effet
http://caniuse.com/#search=inline-block

Code:

---

1 2 3

display: inline-block; *display: inline; *display: inline;

---

pour IE6 et 7

Citation:

---

Envoyé par Kazumi

les clients aiment IE

---

Il y a une différence entre aimer IE et aimer IE7... :aie:
Perso, j'aime bien Windows, mais c'est pas pour ça que j'utilise Millenium. :mrgreen:

D'ailleurs, si l'on en croit les statistiques, IE7 est la version la moins utilisée d'IE... Mais bon, peut-être que tous les utilisateurs d'IE7 sont clients chez toi ! :ptdr:

Merci aux autres pour votre aide ! Problème résolu hier en fin de journée.

Et à Bovino pour l'intérêt de sa dernière réponse :mouarf:

Citation:

---

Envoyé par Bovino

D'ailleurs, si l'on en croit les statistiques, IE7 est la version la moins utilisée d'IE...

---

Après IE 5,4,3,2,1 :mrgreen: