DIV positionnement libre dans une DIV parent

**Speed41** · 17/09/2022, 13h45

Bonjour,

Je cherche a faire un graphique en utilisant des div comme point, je veux les placer dans une div mais le problème est qu'ils sont sur tout l'écran

Code html :

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
  <html>
  	<head>
  		<style>
                        #graphe {
                                width: 100%;
                                height : 300px;
                                border : 50px;
                                border: 1px solid black;
                                background-color: white;
                        }                       
                        .cercle {
                                width: 3px;
                                height: 3px;
                                border-radius: 20px;
                                position: absolute;
                                display: block;
                        }
                        .voie0 { background: green; }
                        .voie1 { background: blue; }
                </style>
  		<html lang='fr'>
  		<title>Infos Maison</title>
  	</head>
  	<body style='background-color:#5DADE2;'>
  		<center>
  			<font size='7'>Graphique</font>
  		</center>
		<br><br>
  		<div id='graphe'>
 
  		</div>
 
  	</body>
  </html>

Je souhaite que les points de mon graphique soient uniquement dans ma div d'ID graphe

Code :

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

1
2
3
4
5
6
var point = document.createElement('div')
point.id = 'Courbe ' + datas[ii][0] + ' le ' + strToDateUS(datas[i][1]);
point.className = 'cercle voie' + datas[ii][0];
document.getElementById('graphe').appendChild(point);
point.style.top = 100 - ((datas[ii][2] - yMin) * 100 / total) + '%';
point.style.left = ii * 100 / (datasX.length+20) + '%';

Nom : graphique.png
Affichages : 202
Taille : 14,3 Ko

Comment faire pour que mon graphique reste dans ma DIV ?

J'utilise les % pour que les points se repositionnent quand je redimensionne ma fenêtre

Il y a peut être une autre solution mais je n'arrive pas voir comment

Merci pour vos conseils

**mathieu** · 17/09/2022, 14h54

j'ai l'impression que c'est plus une question de css, essayez de mettre position : relative;aux points.

et sinon il y a des bibliothèques qui permettent de faire beaucoup de graphiques de ce genre :
https://www.chartjs.org/
https://d3js.org/
https://gionkunz.github.io/chartist-js/

**Speed41** · 17/09/2022, 15h46

Le code sera envoyé par un arduino, donc très peu de place en mémoire

Je vais regarder comment ils procèdent

Merci

**mathieu** · 17/09/2022, 16h31

certaines bibliothèques proposent l'utilisation en tant que ressources externes comme là par exemple :
https://www.chartjs.org/docs/latest/...tallation.html

**NoSmoking** · 17/09/2022, 17h49

Bonjour,

Envoyé par mathieu

j'ai l'impression que c'est plus une question de css, essayez de mettre position : relative;aux points.

c'est effectivement un soucis avec le positionnement des élements donc CSS.

La règle, en raccourci :

Les éléments en position:absolute sont positionnés par rapport à leur ancêtre le plus proche qui est positionné.

dans ton cas c'est par rapport au viewport attendu qu'aucun ancêtre n'est positionné.
Il te faut donc mettre ton élément <div id="graphe"> en [Edit] ~~position:absolute~~ position:relative.

J'en profite pour reprendre ton HTML/CSS :

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Infos Maison</title>
<style>
body {
  background-color: #5DADE2;
}
h1 {
  text-align: center;
}
#graphe {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid #000;
  background-color: #FFF;
}
.cercle {
  display: block;
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 20px;
}
.voie0 {
  background: #008000;
}
.voie1 {
  background: #00F;
}
</style>
</head>
<body>
  <h1>Graphique</h1>
  <div id="graphe"></div>
<script>
  // ici ton code
</script>
</body>
</html>

**melka one** · 18/09/2022, 19h05

petite rectification

Les éléments en position:absolute sont positionnés par rapport à leur ancêtre le plus proche qui est positionné en relative

**NoSmoking** · 19/09/2022, 06h47

petite rectification

Grosse en fait ...

Peut-être aurais-je du me relire plus attentivement, d'autant que dans le code fourni j'écris bien position:relative, mauvais copier/coller, je corrige.

Pour être plus précis, concernant l'ancêtre le plus proche qui est positionné, il n'y a pas que la position:relative qui fonctionne, en fait toutes sauf la position static.

Effectivement les positions relative,absolute,fixed et sticky font l'affaire.

A noter que le fait de mettre une propriété transform, perspective différente de none sur un ancêtre fonctionne également en constituant le bloc englobant, le fameux référent, c'est pour cette raison que j'ai indiqué « La règle, en raccourci »

Ceci étant, j'ai aussi oublié de préciser que, la solution proposée par mathieu d'ajouter la position:relative aux points, sans rien changer d'autre, devrait également fonctionner.

**Speed41** · 20/09/2022, 18h49

Super merci

Avec : position:relative ça marche. Merci pour la précision

Code CSS :

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

1
2
3
4
5
6
7
8
#graphe {
				width: 100%;
				height : 600px;
				border : 50px;
				border: 1px solid black;
				background-color: white;
				position:relative;
			}

J'ai tout recodé pour gérer plein écran mais la c'est beaucoup mieux

Merci à tous

DIV positionnement libre dans une DIV parent

JavaScript

Discussions similaires

Partager

Partager