Comment placer des div avec margin-left et margin-top

**derzy971** · 20/04/2010, 17h48

Bonjour,

je réalise une petite application qui me permet de créer et placer automatiquement des div, mais si toutes mes div se créent normalement, leur placement n'est pas exactement, il semblait que le div renvoi systématiquement à la ligne.

je vous montre mon code, peut-être pourrez-vous m'aider

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Organigrammes</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="./css/org.css" />
    </head>
    <body>
		<script type="text/javascript">
		function addDiv(id,nom,responsable,gauche,top,width,color,taille,align,hauteur)
		{
			var canvas=document.getElementById('canvas');
			var cadre=document.createElement('span');
			cadre.setAttribute("id",id);
			cadre.setAttribute("style","background-color:"+color+";margin-left:"+gauche+"px;margin-top:"+top+"px;width:"+width+"px;font-size:"+taille+"px;text-align:"+align+";height:"+hauteur+"px;float:left;");
			var serv=document.createElement('p');
			var text_serv=document.createTextNode(nom);
			serv.appendChild(text_serv);
 
			var resp=document.createElement('p');
			var text_resp=document.createTextNode(responsable);
			resp.appendChild(text_resp);
 
			cadre.appendChild(serv);
			cadre.appendChild(resp);
 
			canvas.appendChild(cadre);
 
		}
	</script>
 
 
		<div id="canvas"></div>
						<script type="text/javascript">
					addDiv("1","tete","tete","528","15","200","#C2E4F9","10","center","34");
				</script>
							<script type="text/javascript">
					addDiv("2","corps","corps","0","59","200","#C2E4F9","10","center","34");
				</script>
							<script type="text/javascript">
					addDiv("3","jambe","jambe","0","103","200","#C2E4F9","10","center","34");
				</script>
 
 
	</body>
</html>

ce code devrait me donner normalement cette figure :
http://www.hostingpics.net/viewer.ph...3308normal.jpg
or ce que j'obtiens c'est ceci :
http://www.hostingpics.net/viewer.ph...78resultat.jpg

le problème c'est que je peux pas modifier les marges puisqu'elles sont extraites d'un base de données, donc j'aimerais savoir s'il y a une façon de supprimer toutes les marges d'un div ou s'il y a une façon d'ignoré les div déjà crées

merci d'avance pour vos réponses

**derzy971** · 20/04/2010, 20h11

apparemment les div se placent par rapport aux éléments déjà placés, y a-t-il une façon de passer outre ? c'est-à-dire de placer les nouvelles div comme si c'était le première élément

**derzy971** · 20/04/2010, 22h03

en ajoutant position:relative; sa semble s'améliorer (la position left est la bonne mais reste le top qui n'est toujours pas le bon) un peu mais c'est pas encore sa

**derzy971** · 21/04/2010, 15h19

j'ai plus ou moins réussi
en mettant position:absolute et en utilisant left et top, les div se placent bien
mais la hauteur des div augmente et sa je sais pas pourquoi, si je fixe la hauteur si j'augmente la taille du texte la hauteur de la div elle ne suivra pas
Auriez-vous une idée ?

**symfony30000** · 21/04/2010, 17h18

si tu définie la propriété height de tes div il est normal qu'elle reste de hauteur fixe.

ps: on ne voit plus tes exemples de ce que tu souhaites dans ton premier poste

**derzy971** · 21/04/2010, 18h14

maintenant mon problème c'est par rapport à la hauteur des div qui augmente dès qu'on passe les div en position:absolute
voila ce que je devrais avoir :
http://www.hostingpics.net/viewer.php?id=566509ex1.jpg
et voila ce que j'obtiens :
http://www.hostingpics.net/viewer.php?id=598941ex2.jpg

les div grandissent de quelques millimètres, vers le bas
je ne vois pas du tout quel est le problème, pourquoi elles grandissent

Quelqu'un aurait-il une idée pour résoudre ce problème ?

Toutes vos idées peuvent mettre utiles .

Merci

**derzy971** · 21/04/2010, 18h37

ben voila
j'ai eu une idée pour arranger ce problème
comme les textes se trouvaient chacun des un <p>
j'ai attribué au 2 un class à qui dans la css j'ai mis margin-bottom:0px
je n'aime pas vraiment ça, mais sa a le mérite de mettre les div dans les 2 modes (création - modification) identiques

Comment placer des div avec margin-left et margin-top

Positionnement en CSS

Discussions similaires

Partager

Partager