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