DIV positionnement libre dans une DIV parent

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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) + '%';

Pièce jointe 625591

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

17/09/2022, 14h54
mathieu

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/
17/09/2022, 15h46
Speed41

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

Je vais regarder comment ils procèdent

Merci
17/09/2022, 16h31
mathieu

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

Bonjour,

Citation:

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 :

Citation:

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:

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>

18/09/2022, 19h05
melka one

petite rectification

Citation:

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

:)
19/09/2022, 06h47
NoSmoking

Citation:

petite rectification

:nono: Grosse en fait ... :oops:

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.

Super merci

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

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