Discussion :

[Kazumi]

Bonjour,

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

Code javascript :

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

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 javascript :

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

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 !

[Bisûnûrs]

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

[Bovino]

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 javascript :

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

maDiv.style.width = '100%';

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...

[Kazumi]

J'ai donc modifier ma ligne comme ceci :

Code :

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

	maDiv.style.cssFloat='left';

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

[Bisûnûrs]

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

Cf le message de Bovino :

Ben... c'est un peu

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

Code javascript :

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

maDiv.style.width = '100%';

[Kazumi]

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

Code :

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

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--;
}

[Bovino]

Code :

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

var nbr_machine = length;

[Kazumi]

Code :

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

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

[SylvainPV]

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)

[Bovino]

http://jsfiddle.net/T8nQp/

[Kazumi]

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

[Kazumi]

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.

[Bisûnûrs]

Tu as IE6 ?

[Kazumi]

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

[Bisûnûrs]

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.

[SpaceFrog]

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

Code :

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

1
2
3
 
display: inline-block;
*display: inline;       *display: inline;

pour IE6 et 7

[Bovino]

les clients aiment IE

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

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 !

[Kazumi]

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

[SylvainPV]

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