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?