Discussion :

[Alexino2]

Bonsoir,

j'aimerais afficher mes div horizontalement, ce que je ne comprend pas c'est pourquoi pourquoi mon appendChild affiche Horizontalement des "images" mais verticalement des "div"...

mon code :

Code :

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

1
2
3
4
5
6
7
8
9
 
var monDivPrincipale=document.createElement("div");
monDivPrincipale.style.cssText="position:absolute;"
 
     var monDiv1=document.createElement("div");
     var monDiv2=document.createElement("div");
 
monDivPrincipale.appendChild(monDiv1);
monDivPrincipale.appendChild(monDiv2);

Là, l'empilement sur ma fenetre se fait verticalement.

si je remplace mes div secondaire comme ceci

Code :

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

1
2
3
 
      var monDiv1=document.createElement("img");
      var monDiv2=document.createElement("img");

Là, le appendChild ajoute horitonlament mes image, mais je veux que ce soit mes "div" qui s'empilent horizontalment !

Si quelqu'un avait une astuce ?

[Auteur]

bonjour,

Les div sont des balises de type "bloc" donc ton nouveau div sera affiché sous le précédent.
Les images sont des balises "inline", chaque nouvelle image sera affichée à côté de la précédente.


Si tu veux un affichage horizontal des div :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var monDivPrincipale=document.createElement("div");
monDivPrincipale.style.float = "left";
monDivPrincipale.style.clear = "both";
 
     var monDiv1=document.createElement("div");
     var monDiv2=document.createElement("div");
 
monDiv1.style.float = "left";
monDiv2.style.float = "left";
 
monDivPrincipale.appendChild(monDiv1);
monDivPrincipale.appendChild(monDiv2);

Une parenthèse

Code :

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

1
2
 
monDivPrincipale.style.cssText="position:absolute;"

remplace cette ligne par

Code :

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

1
2
 
monDivPrincipale.style.position="absolute";

[Alexino2]

Ca marche pas les float, j'aurais omis quelque chose ?

[SpaceFrog]

boule de crystal dis moi ce que notre ami à fait ...

[Alexino2]

je redonne le code plus précis et les élement que j'emboite :

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
 
monFond=document.createElement("form"); 
monFond.id='maRecherche';
monFond.style.cssText="position:absolute;float:left;clear:both;cursor:default;
 margin:6px; font-size:14px; line-height:14px; text-align:left; 
font-weight:bold; font-family:Comic Sans MS; width=500px;height:500px;" ;
monFond.innerHTML="<br />Saississez votre recherche : <br />";
var toto=getDocXML();
    for(i=0;i<toto.length;i++)
	{ 
            var leSrc=toto.getElementsByTagName("image")[i].childNodes[0].data;
            appendChild(mesSousDiv(leSrc));
        }
 
//et mes Sous div :
function mesSousDiv(leSrc)
{
    var monSDiv=document.createElement("div");
    monSDiv.id="resultatRec";
    monSDiv.style.float = "left";
        var monImage=document.createElement("img"); 
	monImage.id="monIma";
	monImage.style.margin='10px';
	monImage.style.cursor='pointer';
	monImage.src=leSrc;
   monSDiv.appendChild(monImage);
         return monSDiv;  
}

Pour le cssText, ca marche très bin sous IE + mozilla, mais le problème n'est pas là...

[grimsk]

je sais pas si ca va regler ton probleme mais ta mis un = au lieu d'un : dans le width

Code :

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

1
2
3
monFond.style.cssText="position:absolute;float:left;clear:both;cursor:default;
 margin:6px; font-size:14px; line-height:14px; text-align:left; 
font-weight:bold; font-family:Comic Sans MS; width=500px;height:500px;" ;

et question pour auteur pourquoi tu lui à enlevé son étoile dans son cahier :

Une parenthèse

Code :

monDivPrincipale.style.cssText="position:absolute;"
remplace cette ligne par

Code :

monDivPrincipale.style.position="absolute";

jai jamais utiliser monFond.style.cssText .. mais c'est problèmatique?

[Alexino2]

Pour le problème du width ca change pas grand chose,

pour le cssText, même en remplacant par ton code, ca change rien non plus, mes div continue à s'emboiter verticalement, pourtant, le fond à une capacité de 500px, les sous div de 150px de largeur...

Mes curseurs prouvent bien qu'il y a de la place dans le fond, et pourtant... je m'arrache les cheveux lol...

Si je retourne une image dans la fonction comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function mesSousDiv(leSrc)
{
    //var monSDiv=document.createElement("div");
    //monSDiv.id="resultatRec";
   // monSDiv.style.float = "left";
        var monImage=document.createElement("img"); 
	monImage.id="monIma";
	monImage.style.margin='10px';
	monImage.style.cursor='pointer';
	monImage.src=leSrc;
  // monSDiv.appendChild(monImage);
         return monImage;  
}

Bah là y'a pas de probleme, même sans les float ;'( mais moi veut retourner un div, car je vais mettre d'autres éléments dedans...

[Alexino2]

Boudiou !!!! Qu'est ce que jai galérer, après des dizaines et des dizaines de recherches, j'ai enfin trouvé mon bonheur héhé

la solution est simple en plus, mais personne n'y avait vraiment pensé, suffit de rajouté ça à mes div :

Code :

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

1
2
3
4
5
 
monDivPrincipale.style.position='relative';
monDivPrincipale.style.display='inline';
 
mesSousDiv.style.display='inline';

Et là plus de problème !!