IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Position & alignements !


Sujet :

Positionnement en CSS

  1. #1
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    311
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 311
    Points : 59
    Points
    59
    Par défaut Position & alignements !
    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 ...
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  2. #2
    Membre actif Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 133
    Points : 265
    Points
    265
    Par défaut
    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>

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 925
    Points
    38 925
    Par défaut
    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

  4. #4
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    311
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 311
    Points : 59
    Points
    59
    Par défaut
    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.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  5. #5
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    311
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 311
    Points : 59
    Points
    59
    Par défaut
    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>
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 925
    Points
    38 925
    Par défaut
    En fait j'avais également compris que tu avais en plus une dimension variable de ta carte !
    Citation 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 ».

    Citation 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

  7. #7
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    311
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 311
    Points : 59
    Points
    59
    Par défaut
    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 ?
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  8. #8
    Membre actif Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 133
    Points : 265
    Points
    265
    Par défaut
    bonjour,

    j'ai retrouvé ça dans mes archives :


    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)

  9. #9
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    311
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 311
    Points : 59
    Points
    59
    Par défaut
    Le passage ne pourcentage fonctionne bien pour les pastilles W (quelques mm de décalage mais c'est jouable).

    Par contre, si je mets un width sur l'Img de la France ou sur son DIV, tout est décalé :

    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
    <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" width="80%" />
     
        <?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]*100/$H_map) . "%"; // Ordonnee ?>;
                    left: <?php echo ($axe[1]*100/$W_map) . "%"; // 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." />
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  10. #10
    Membre actif Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 133
    Points : 265
    Points
    265
    Par défaut
    bonjour,

    comme je l'ai dit plus haut, c'est la balise <figure> qui, ici, sert de référence aux top/left.
    C'est donc elle qu'il faut dimensionner.
    ET, évidemment; la carte doit "suivre, avec width:100%;
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <figure id="France" style="position: relative;display:inline-block;margin:10px auto;width:80%;">
     
        <img src="https://wda-fr.org/pict/France_WDA-clr.png" style="width:100%;" />

  11. #11
    Membre actif Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 133
    Points : 265
    Points
    265
    Par défaut
    Je te propose une amélioration : affichage de l'adresse au survol

    CSS (dans le <head>, entre balises <style></style>) :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #carteFrance { text-align:center; }
    #carteFrance > div { position:relative; display:inline-block; margin:10px auto; width:80%; }
    #carteFrance > div > img { width:100%; } /* la carte de France */
    #carteFrance > div figure { position:relative; display:inline-block; }
    /* tooltip : coordonnées au survol */
    #carteFrance > div figure figcaption { position:absolute; width:200px; bottom:130%;/*tooltip au dessus*/ left:50%; transform:translate(-50%); 
       background:#fff; border:1px solid #ccc; padding:5px;
       display:none; /*on masque*/ }
    #carteFrance > div figure:hover figcaption { display:block; }

    Code php : 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
    <section id="carteFrance">
    	<div>
     
        <img src="https://wda-fr.org/pict/France_WDA-clr.png" style="width:100%;" />
     
    <?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); // $axe[0] : Ordonnee - $axe[1] : Abscisse
    ?>
    		<figure style="top:<?php echo ($axe[0]*100/$H_map); ?>%; left:<?php echo ($axe[1]*100/$W_map); ?>%;">
    			<img
    			src="https://wda-fr.org/pict/wda-circle.png"
    			title="Coordonnees du benevole <?php echo $nom; ?>."
    			alt="Coordonnees d'un benevole WDA." />
    			<figcaption><?php echo $adresse; // adresse ?><figcaption>
    		</figure>

    A NOTER : dans mon dernier code, j'ai remplacé :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div style="text-align:center;">
    	<figure id="France" style="position: relative;display: inline-block;margin: 10px auto;">
    par :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <section id="carteFrance">
    	<div>
    -> C'est CE <div> qui sert de référence
    Explication :
    • comme il est en display:inline-block; il prend les mêmes dimensions que la carte de France.
    • il sert de référence, car il est en position:relative;

  12. #12
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    311
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 311
    Points : 59
    Points
    59
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Je te propose une amélioration : affichage de l'adresse au survol

    (...)
    Houlà, je venais à peine de comprendre des trucs, que tout change

    Les coordonnées des pastilles sont du coup toutes fausses :

    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
    <?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;
     
            // dimensions de la carte de France
            $W_map = 380;
            $H_map = 391;
     
            // Antennes officielles WDA
            $coord_Ant = array (
                    array("Paris",62,194),
                    array("PACA",285,295),
                    array("Normandie",39,154),
                    array("Vendee",146,78),
                    array("Charente",198,130),
                    array("Belgique",0,257),
                    array("Bretagne",95,85)
            );
    ?>
     
    <style>
            #carteFrance { text-align:center; }
            #carteFrance > div { position:relative; display:inline-block; margin:10px auto; width:80%; }
            #carteFrance > div > img { width:100%; } /* la carte de France */
            #carteFrance > div figure { position:relative; display:inline-block; }
            /* tooltip : coordonnées au survol */
            #carteFrance > div figure figcaption { position:absolute; width:200px; bottom:130%;/*tooltip au dessus*/ left:50%; transform:translate(-50%); 
               background:#fff; border:1px solid #ccc; padding:5px;
               display:none; /*on masque*/ }
            #carteFrance > div figure:hover figcaption { display:block; }
            /*#France{
                    position:relative;
                    display:inline-block;
                    margin: 10px auto;
                    width: 50%;*/
                    /*cursor: -moz-zoom-in; 
                    cursor: -webkit-zoom-in; 
                    cursor: zoom-in;*/
                    /* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
                    /*-webkit-transition: all 1s ease; /* Safari et Chrome */
                    /*-moz-transition: all 1s ease; /* Firefox */
                    /*-ms-transition: all 1s ease; /* Internet Explorer 9 */
                    /*-o-transition: all 1s ease; /* Opera */
                    /*transition: all 1s ease;
            }
            #France:hover {
                    /* L'image est grossie de 25% */
                    /*-webkit-transform:scale(1.25); /* Safari et Chrome */
                    /*-moz-transform:scale(1.25); /* Firefox */
                    /*-ms-transform:scale(1.25); /* Internet Explorer 9 */
                    /*-o-transform:scale(1.25); /* Opera */
                    /*transform:scale(1.25);*/
            }
    </style>
     
    <section id="carteFrance">
    	<div>
     
        <img src="https://wda-fr.org/pict/France_WDA-clr.png" style="width:100%;" />
     
        <?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);
                ?>
     
                <figure style="top:<?php echo ($axe[0]*100/$H_map); ?>%; left:<?php echo ($axe[1]*100/$W_map); ?>%; position: absolute;">
                    <img src="https://wda-fr.org/pict/wda-circle.png" title="Coordonnees du benevole <?php echo $nom; ?>." alt="Coordonnees d'un benevole WDA." />
    				<figcaption><?php echo $adresse; // adresse ?><figcaption>
                </figure>
     
                <?php
                    }
            endwhile;
     
                    foreach ($coord_Ant as $CA) {
                            ?>
    			<figure style="top: <?php echo ("$CA[1]"*100/$H_map) . "%"; ?>; left: <?php echo ("$CA[2]"*100/$W_map) . "%"; ?>; position: absolute;
                                    ">
                    <img src="https://wda-fr.org/pict/Local-point.png" title="Antenne WDA <?php echo "$CA[0]"; ?>." alt="Coordonnees d'une antenne WDA." />
    			</figure>
    			<?php
                    }
        ?>
     
    	</div>
    </section>

    Sinon, j'vais avancé sur le code :

    Citation Envoyé par jreaux62 Voir le message
    (...)

    comme je l'ai dit plus haut, c'est la balise <figure> qui, ici, sert de référence aux top/left.
    C'est donc elle qu'il faut dimensionner.
    ET, évidemment; la carte doit "suivre, avec width:100%;

    (...)
    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
    <?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;
     
            // dimensions de la carte de France
            $W_map = 380;
            $H_map = 391;
     
            // Antennes officielles WDA
            $coord_Ant = array (
                    array("Paris",62,194),
                    array("PACA",285,295),
                    array("Normandie",39,154),
                    array("Vendee",146,78),
                    array("Charente",198,130),
                    array("Belgique",0,257),
                    array("Bretagne",95,85)
            );
    ?>
     
    <style>
            #France{
                    position:relative;
                    display:inline-block;
                    margin: 10px auto;
                    width: 50%;
                    /*cursor: -moz-zoom-in; 
                    cursor: -webkit-zoom-in; 
                    cursor: zoom-in;*/
                    /* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
                    /*-webkit-transition: all 1s ease; /* Safari et Chrome */
                    /*-moz-transition: all 1s ease; /* Firefox */
                    /*-ms-transition: all 1s ease; /* Internet Explorer 9 */
                    /*-o-transition: all 1s ease; /* Opera */
                    /*transition: all 1s ease;
            }
            #France:hover {
                    /* L'image est grossie de 25% */
                    /*-webkit-transform:scale(1.25); /* Safari et Chrome */
                    /*-moz-transform:scale(1.25); /* Firefox */
                    /*-ms-transform:scale(1.25); /* Internet Explorer 9 */
                    /*-o-transform:scale(1.25); /* Opera */
                    /*transform:scale(1.25);*/
            }
    </style>
     
    <div style="text-align:center;">
    	<figure id="France">
     
        <img src="https://wda-fr.org/pict/France_WDA-clr.png" style="width:100%;" />
     
        <?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]*100/$H_map) . "%"; // Ordonnee ?>;
                    left: <?php echo ($axe[1]*100/$W_map) . "%"; // 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
                    }
            endwhile;
     
                    foreach ($coord_Ant as $CA) {
                            ?>
    			<img
    				style="
                                            top: <?php echo ("$CA[1]"*100/$H_map) . "%"; // Ordonnee ?>;
                                            left: <?php echo ("$CA[2]"*100/$W_map) . "%"; // Abscisse ?>;
                                            position: absolute;
                                    "
    				src="https://wda-fr.org/pict/Local-point.png"
    				title="Antenne WDA <?php echo "$CA[0]"; ?>."
    				alt="Coordonnees d'une antenne WDA." />
    			<?php
                    }
        ?>
     
    	</figure>
    </div>
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 925
    Points
    38 925
    Par défaut
    Sans redimensionnement :
    Si ton but est de présenter, sans redimensionnement, l'image simplement centrée, la solution t'a été donnée, en unités fixes, et de plus tu peux directement mettre la width sur le conteneur et pour une méthode de centrage il existe :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    ton-conteneur {
      display: block;
      position: relative;
      width: 480px;
      margin: auto;
    }
    sans déclaration de la largeur tu peux également faire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    ton-contneur {
      display: inline-block;
      position: relative;
      left: 50%;
      transform: translate(-50%);
    }
    Adaptable :
    Maintenant si tu souhaites que l'ensemble s'adapte à son conteneur, donc en passant par des dimensions en pourcentage, il est des choses à prendre en compte.

    • Le conteneur doit être positionné pour servir de référent, ça tu l'as compris ;
    • Le conteneur et l'image « principale » doivent avoir les mêmes dimensions, fixes ou relatives ;
    • L'image « principale » doit être en display:block afin de ne pas présenter d'espace en dessous d'elle. Les images « secondaires » étant redimensionnées par rapport à celle-ci mais positionnées par rapport au conteneur il pourrait donc apparaître un décalage dans le positionnement.
    • Les dimensions des images « secondaires » doivent également être exprimées en pourcentage afin d'éviter les distorsions et décalages lors d'un redimensionnement.

    Ce dernier point est important si tu ne veux pas tout cassé !

    Bonus :
    J'ai finalisé un fichier de démo qui montre la démarche, celui-ci fait appel à JavaScript pour l'affectation des dimensions et des positions mais cela est facilement transposable côté serveur pour peu que tu définisses les dimensions de chacune des images utilisées.

    Le fichier en ligne : Superposition d'images positionnées

  14. #14
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    311
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 311
    Points : 59
    Points
    59
    Par défaut
    Oki, j'ai mis à jour ne virant figure, et en simplifiant.

    Cela me donne ceci :

    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
    <style>
            #France{
                    display: inline-block;        /* occupe la place nécessaire à son contenu dans le flux */
                    position: relative;           /* pour servir de référent */
                    width: 80%;
                    max-width: 50em;
                    left: 50%;                    /* centrage horizontal */
                    transform: translate(-50%);
            }
     
            #France img:first-child {
                    width: 100%;                  /* 100% du conteneur */
                    position: relative;           /* rétabli dans le flux */
                    display: block;               /* pour supprimer l'espace sous image */
            }
     
            #France img {
                    position: absolute;
            }
    </style>
     
    <div id="France">
     
        <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]*100/$H_map) . "%"; ?>;left:<?php echo ($axe[1]*100/$W_map) . "%"; ?>;"
                src="https://wda-fr.org/pict/wda-circle.png"
                title="Coordonnees du benevole <?php echo $nom; ?>."
                alt="Coordonnees d'un benevole WDA." />
                <?php
                    }
            endwhile;
     
                    foreach ($coord_Ant as $CA) {
                            ?>
    			<img
    				style="top:<?php echo ("$CA[1]"*100/$H_map) . "%"; ?>;left:<?php echo ("$CA[2]"*100/$W_map) . "%"; ?>;"
    				src="https://wda-fr.org/pict/Local-point.png"
    				title="Antenne WDA <?php echo "$CA[0]"; ?>."
    				alt="Coordonnees d'une antenne WDA." />
    			<?php
                    }
        ?>
     
    </div>

    Mais les marqueurs secondaires (Antennes) sont bizarrement imprécis par rapport au premiers marqueurs (Benevoles).
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  15. #15
    Membre actif Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 133
    Points : 265
    Points
    265
    Par défaut
    bonjour,

    ta carte de France fait 380 x 391px.
    Normal que tu sois précis "à une vache près".


  16. #16
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    311
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 311
    Points : 59
    Points
    59
    Par défaut
    J'ai calibré l'ensemble des 41 bénévoles par rapport à cette carte.

    J'avoue ne pas avoir le courage de tout refaire.

    Ceci étant, je ne comprends pas pkoi les marqueurs antenne ne sont pas précis comme ceux des bénévoles.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  17. #17
    Membre actif Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 133
    Points : 265
    Points
    265
    Par défaut
    Question subsidiaire :
    • as-tu enregistré les coordonnées GPS de chaque antenne/adresse ?
      (tu peux aller sur Google Maps pour les trouver)

    car il suffit alors de connaitre celles des 4 coins de la carte pour faire une règle de trois.

    N.B. 41 adresses à trouver/positionner, ce n'est pas la mer à boire...

  18. #18
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    311
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 311
    Points : 59
    Points
    59
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Question subsidiaire :
    • as-tu enregistré les coordonnées GPS de chaque antenne/adresse ?
      (tu peux aller sur Google Maps pour les trouver)

    car il suffit alors de connaitre celles des 4 coins de la carte pour faire une règle de trois.

    N.B. 41 adresses à trouver/positionner, ce n'est pas la mer à boire...
    Je serais totalement incapable de faire cela.

    J'ai tout fait à la main, en zoomant ... Presque 2 hrs.
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  19. #19
    Membre actif Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 133
    Points : 265
    Points
    265
    Par défaut


    1. copier l'adresse à chercher
    2. sur l'icone rouge : "clic droit" -> on obtient les coordonnées GPS

    Nom : google-maps-coords-gps.jpg
Affichages : 47
Taille : 360,8 Ko

    La seule "difficulté" sera de trouver les coordonnées des coins de la carte de France que tu auras choisie.

    Si je prends celle-ci (Carte de France gratuite), on peut extrapoler les coordonnées des coins (en vert) avec les longitudes/latitudes des "limites" en rouge.

    Nom : carte-de-france-coords-gps.jpg
Affichages : 48
Taille : 77,5 Ko

    N.B. ne pas tenir compte de la Corse, qui n'est pas forcément à sa position réelle.
    Ce qui va poser un problème si tu as des adresses en Corse.

  20. #20
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    5 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 5 611
    Points : 13 941
    Points
    13 941
    Par défaut
    Salut

    Citation Envoyé par jreaux62
    N.B. ne pas tenir compte de la Corse, qui n'est pas forcément à sa position réelle.
    Ce qui va poser un problème si tu as des adresses en Corse.
    l’échelle est elle aussi souvent différente entre le continent est l'ile, souvent la Corse est plus grande.
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    👉 → → Ma page perso sur DVP ← ← 👈

Discussions similaires

  1. position fixed et alignement vertical
    Par cedrick21 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 06/11/2012, 18h52
  2. Position absolute et alignement sour IE.
    Par Gaetch dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 04/05/2012, 18h33
  3. Problème d'alignement de menu en position absolue
    Par Spike21 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 31/01/2009, 02h33
  4. Le vertical-align en position relative pour du texte
    Par bigltnt dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 27/03/2007, 09h10
  5. Position des lignes dans l'environnement align
    Par rahimk dans le forum Mathématiques - Sciences
    Réponses: 7
    Dernier message: 03/01/2007, 16h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo