Position & alignements !

**Casio** · 29/07/2021, 10h03

Salutations,

la grosse quiche en CSS que je suis à réussi à pondre un semblant de code pour afficher en temps réel les domiciles de bénévoles d'une association, mais je n'arrive pas maintenant à centrer cette map.

En effet, elle utilise des "TOP" et "LEFT" pour afficher les coordonnées des bénévoles, mais si je centre la carte, les points de localisations restent collés au bords de la fenêtre et ne suivent pas la carte.

Voici la page de test actuelle.

Voici ce que cela donne dans un include type de test.

A terme, elle doit remplacer cette carte.

Comment faire ?

Merci de votre aide ...

**jreaux62** · 29/07/2021, 15h37

bonjour,

déjà, on peut séparer la carte des adresses.
ensuite, il faut un container (position:relative, qui sera la référence des top/left) en display:inline-block pour les images :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div style="text-align:center;">
<figure id="France" style="position: relative;display:inline-block;margin:10px auto;">
 
    <img src="https://wda-fr.org/pict/France_WDA-clr.png" />
 
	<img
	style="
		top: 78px;
		left: 198px;
		position: absolute;
	"
	src="https://wda-fr.org/pict/wda-circle.png"
	title="Coordonnees du benevole Mathieu CHARREYRE."
	alt="Coordonnees d'un benevole WDA." />
 
	<img
	style="
		top: 82px;
		left: 192px;
		position: absolute;
	"
	src="https://wda-fr.org/pict/wda-circle.png"
	title="Coordonnees du benevole Cyrille ROBIN."
	alt="Coordonnees d'un benevole WDA." />
 
	<img
	style="
		top: 87px;
		left: 202px;
		position: absolute;
	"
	src="https://wda-fr.org/pict/wda-circle.png"
	title="Coordonnees du benevole Gérard NICOLAS."
	alt="Coordonnees d'un benevole WDA." />
 
	<img
	style="
		top: 78px;
		left: 198px;
		position: absolute;
	"
	src="https://wda-fr.org/pict/wda-circle.png"
	title="Coordonnees du benevole Bruno SANCHEZ."
	alt="Coordonnees d'un benevole WDA." />
 
	<img
	style="
		top: 56px;
		left: 152px;
		position: absolute;
	"
	src="https://wda-fr.org/pict/wda-circle.png"
	title="Coordonnees du benevole Association BIOS."
	alt="Coordonnees d'un benevole WDA." />
</figure>
</div>
 
<div id="France-Adresses" style="position: relative;text-align:center;">
	<br />B&eacute;n&eacute;vole : Mathieu CHARREYRE<br />Adresse : c/o WDA, 3 villa Jacquemont, 75017 Paris<br />Ordonnee : 78<br />Abscisse : 198<br />    
	<br />B&eacute;n&eacute;vole : Cyrille ROBIN<br />Adresse : 1 Avenue Eugène FREYSSINET, 78061 Saint-Quentin en Yvelines<br />Ordonnee : 82<br />Abscisse : 192<br />    
	<br />B&eacute;n&eacute;vole : Gérard NICOLAS<br />Adresse : 39 allée de Bréviande, 77350 Le Mée sur Seine<br />Ordonnee : 87<br />Abscisse : 202<br />    
	<br />B&eacute;n&eacute;vole : Bruno SANCHEZ<br />Adresse : 8 rue Marbeau, 75116 Paris<br />Ordonnee : 78<br />Abscisse : 198<br />    
</div>

**NoSmoking** · 29/07/2021, 15h49

Bonjour,

Comment faire ?

de bien des façons

• Tu pourrais passer par un fichier SVG ce qui me paraît à priori le plus adapté.

• Quoiqu'il arrive il ne te faut pas utiliser des unités fixes, le px, mais plutôt passer le positionnement en % dans un même conteneur dimensionné.

Par exemple dans ton cas :

Code html :

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

1
2
3
4
5
6
7
<img style="
  top: 19.9488%;
  left: 52.1053%;
  position: absolute;"
  src="https://wda-fr.org/pict/wda-circle.png"
  title="Coordonnees du benevole Mathieu C$$$$$$$E."
  alt="Coordonnees d'un benevole WDA.">

à la place de

Code html :

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

1
2
3
4
5
6
7
<img style="
  top: 78px;
  left: 198px;
  position: absolute;"
  src="https://wda-fr.org/pict/wda-circle.png"
  title="Coordonnees du benevole Mathieu C$$$$$$$E."
  alt="Coordonnees d'un benevole WDA.">

Nota : ta page à quand même une construction calamiteuse en ce qui concerne la liste

**Casio** · 30/07/2021, 09h01

Merci de vos retours !

ATTENTION, les données brutes proviennent d'une BDD MySQL contenant BEAUCOUP d'autres infos.
J'ai juste rajouté des coordonnées que je me suis embêté à calculer une par une en fonction des adresses des bénévoles.

Une fois les coordonnées dans la BDD, la carte affiche dynamiquement sa position.
Il me suffit de changer les coordonnées pour changer le point.

C'est vraiment au niveau du centrage potentiel de la carte que j'ai un pb.

**Casio** · 30/07/2021, 10h18

Bon, visiblement, c'était le "figure" qui me sauve la vie ... Merci

Voici le code actuel :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<?php
        // Serveur
        require __DIR__ . "/../moteurs/app-data.php";
 
        // Connexion SQL
        require __DIR__ . "/../moteurs/cnx-moteur.php";
 
        // Check benevoles
        $req = $connexion->query ("SELECT * FROM $table4 WHERE Actif = 'Oui' AND debarras <> '' ORDER BY Date ASC");
 
        // Nombre de benevoles
        //$aboadh = $req->num_rows;
 
        // Antennes officielles WDA
        $coord_Ant_Paris = explode(",", "62,194");
        $coord_Ant_PACA = explode(",", "285,295");
        $coord_Ant_Normandie = explode(",", "39,152");
        $coord_Ant_Vendee = explode(",", "146,78");
        $coord_Ant_Charente = explode(",", "198,130");
        $coord_Ant_Belgique = explode(",", "0,257");
        $coord_Ant_Bretagne = explode(",", "95,85");
?>
 
<div style="text-align:center;">
	<figure id="France" style="position: relative;display: inline-block;margin: 10px auto;">
 
    <img src="https://wda-fr.org/pict/France_WDA-clr.png" />
 
    <?php while ($donnees = $req->fetch_assoc()):
    
        $nom = utf8_encode($donnees['Prenom']) . " " . utf8_encode($donnees['Nom']);
        $adresse = utf8_encode($donnees['Adresse']);
        $coordonnees = $donnees['maps'];
        if ($coordonnees != "") {
            $axe = explode(",", $coordonnees);
            ?>
 
            <img
            style="
                top: <?php echo $axe[0] . "px"; // Ordonnee ?>;
                left: <?php echo $axe[1] . "px"; // Abscisse ?>;
                position: absolute;
            "
            src="https://wda-fr.org/pict/wda-circle.png"
            title="Coordonnees du benevole <?php echo $nom; ?>."
            alt="Coordonnees d'un benevole WDA." />
 
            <?php
            // Debugg
            //echo "<br />B&eacute;n&eacute;vole : " . $nom . "<br />"; // Nom
            //echo "Adresse : " . $adresse . "<br />"; // Adresse
            //echo "Ordonnee : " . $axe[0] . "<br />"; // Oordonnee
            //echo "Abscisse : " . $axe[1] . "<br />"; // Abscisse
        }
        endwhile
    ?>
 
    <img
        style="
            top: <?php echo $coord_Ant_Paris[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Paris[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_PACA[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_PACA[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_Normandie[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Normandie[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_Vendee[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Vendee[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_Charente[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Charente[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_Belgique[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Belgique[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
    <img
        style="
            top: <?php echo $coord_Ant_Bretagne[0] . "px"; // Ordonnee ?>;
            left: <?php echo $coord_Ant_Bretagne[1] . "px"; // Abscisse ?>;
            position: absolute;
        "
        src="https://wda-fr.org/pict/Local-point.png"
        title="Coordonnees d'une antenne WDA."
        alt="Coordonnees d'une antenne WDA." />
 
	</figure>
</div>

**NoSmoking** · 31/07/2021, 16h57

En fait j'avais également compris que tu avais en plus une dimension variable de ta carte !

Envoyé par Casio

ATTENTION, les données brutes proviennent d'une BDD MySQL contenant BEAUCOUP d'autres infos.
J'ai juste rajouté des coordonnées que je me suis embêté à calculer une par une en fonction des adresses des bénévoles.

cela n'est pas un soucis dans le sens où tu peux tout à fait faire le calcul côté serveur, une simple règle de trois.

Tout cela n'est donc effectivement pas utile si ta carte a des dimensions invariables et donc n'a pas a être « responsive ».

Envoyé par Casio

c'était le "figure" qui me sauve la vie

Non c'est le fait d'avoir un même contenant référent « ajusté » pour toutes tes images.

PS : si c'est résolu alors merci de passer cette discussion en résolue

**Casio** · 03/08/2021, 10h20

Pour une raison inconnue, la map est plus grosse que l'originale, et sort donc de mon gabarit responsive du coup.

Comment je peux l'adapter ?

**jreaux62** · 03/08/2021, 11h12

bonjour,

j'ai retrouvé ça dans mes archives :

https://codepen.io/jreaux62/pen/BVyoBY
la carte est responsive, et les coordonnées indiquées en %

Dans ton cas, une simple règle de trois permet de passer des coordonnées en px -> en %

Les dimensions de ta carte de france (https://wda-fr.org/pict/France_WDA-clr.png) sont :

380 x 391px

soit :

Code php :

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

1
2
3
4
5
<?php
// dimensions de la carte de france
$W_map = 380;
$H_map = 391;
?>

et en reprenant ton code :

Code php :

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

1
2
3
4
5
6
            <img
            style="
                top: <?php echo ($axe[0]*100/$H_map) . "%"; // Ordonnee ?>;
                left: <?php echo ($axe[1]*100/$W_map) . "%"; // Abscisse ?>;
                position: absolute;
            "

Tu peux aussi :

enregistrer les coordonnées en % en bdd (au lieu des px)
choisir une carte plus grande (960px de large, par exemple, pour peu que les proportions soient les même)

Position & alignements !

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager