Discussion :

[marcterrier]

Bonsoir,

grace à l'aide des membres du forum j'avance doucement dans l'utilisation du « Générateur API Javascript »

J'ai ajouté une couche vectorielle *.kml

J'essaie ensuite de contrôler le style de cette couche par ce CSS.

Si vous avez un peu de temps à perdre, cliquez sur le dans ma page et vous comprendrez ma déception…

Quelles modifications dois-je apporter pour modifier la taille et l'aspect de l'info-bulle afin de la rendre conforme au rendu obtenu dans Google Earth avec le même CSS ?

Merci à vous,

Marc

PS : j'ai lu la doc « Affichage de couches KML »

Re-PS : bon, je me suis débrouillé comme j'ai pu : voici le résultat !

[gcebelieu]

Bonjour,

le résultat est déjà pas mal par rapport au premier jet

Pour affiner, notamment sur l'aspect de la bulle, vous pouvez faire votre marché en consultant l'exemple suivant :

http://api.ign.fr/tech-docs-js/examp...ap_popups.html

où il est proposé différentes classes de popups.

[jrenard]

Bonjour,

Sur la base de votre travail, ou des exemples de pop-up proposés par Gilles, vous pouvez aussi surcharger directement le CSS des pop-ups dans votre propre feuille de style pour en adapter le contenu. Les pop-ups sont des éléments ayant pour id "chicken". Par exemple, on peut introduire la surcharge CSS suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#chicken {
    padding: 20px; // marge intérieure
    border-radius: 20px;  / bords arrondis
    margin-top: 10px; // décalage par rapport au marqueur
    margin-left: 10px; // décalage par rapport au marqueur
    border: 1px solid #666666 // Aténuation de la bordure
}

#chicken_close {
    background-image: url('...'); // chemin vers une nouvelle image pour la croix de fermeture
}

Ce qui donne un rendu proche de celui proposé sur Google Earth :



Après, si on veut rajouter une petite flèche, on va commencer à se compliquer la vie avec des images de fond qui vont introduire des contraintes de dimension, mais en bidouillant un peu on devrait pouvoir s'en sortir.

[marcterrier]

Pour affiner, notamment sur l'aspect de la bulle, vous pouvez faire votre marché en consultant l'exemple suivant : http://api.ign.fr/tech-docs-js/examp...ap_popups.html où il est proposé différentes classes de popups.

vous pouvez aussi surcharger directement le CSS des pop-ups dans votre propre feuille de style pour en adapter le contenu.

Bonsoir,

d'abord, merci à vous deux !

Pour mon petit problème, je réfléchis aux avantages/inconvénients des différentes possibilités (XHTML, javascript, CSS) que vous m'avez dévoilées puis je complèterai mon message.

Dans l'immédiat, qui voudrait m'indiquer où je peux trouver des informations concernant les éléments « officiels » du CSS, tels "chicken" ?

Les pop-ups sont des éléments ayant pour id "chicken".

En effet, pour donner une largeur adéquate au pop-up par mon CSS je n'avais trouvé que l'horrible (c'est la première fois que j'y recours) solution suivante :

Code :

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

1
2
3
p {
width: 250px;
}

A bientôt,

Marc

[cmail]

éléments « officiels » du CSS

????
Pas vraiment de norme officielle???? Mais pour bien analyser les css de tes éléments du DOM (dont chicken) dans l'api, il faut utiliser firebug (>>bouton : "cliquer sur un élément à inspecter dans la page") addon de firefox (ou ses équivalents sous chrome ou ie).
Cela te demandera un peu d'apprentissage, mais après tu seras autonome...

[marcterrier]

Bonjour,

Sur la base de votre travail, ou des exemples de pop-up proposés par Gilles, vous pouvez aussi surcharger directement le CSS des pop-ups dans votre propre feuille de style pour en adapter le contenu. Les pop-ups sont des éléments ayant pour id "chicken". Par exemple, on peut introduire la surcharge CSS suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#chicken {
    padding: 20px; // marge intérieure
    border-radius: 20px;  / bords arrondis
    margin-top: 10px; // décalage par rapport au marqueur
    margin-left: 10px; // décalage par rapport au marqueur
    border: 1px solid #666666 // Aténuation de la bordure
}

#chicken_close {
    background-image: url('...'); // chemin vers une nouvelle image pour la croix de fermeture
}

Ce qui donne un rendu proche de celui proposé sur Google Earth

C'est pas gagné
. L'html
. le css

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
body {
font-size: .90em;
font-family: Trebuchet MS;
margin:0;
padding:0;
}

#chicken {
    padding: 20px; // marge intérieure
    border-radius: 20px;  / bords arrondis
    margin-top: 10px; // décalage par rapport au marqueur
    margin-left: 10px; // décalage par rapport au marqueur
    border: 1px solid #666666 // Aténuation de la bordure
}

#chicken_close {
    background-image: url('...'); // chemin vers une nouvelle image pour la croix de fermeture
}
/* 
p {
margin-left: 1.8em;
width: 250px;
}
*/
a {
color: #ae0a78;
text-decoration: none;
}
acronym {
color: #ae0a78;
border-bottom: 1px dotted;
cursor: help;
}
h2 {
color: #ea9349;
}
img {
border: solid 0px; /* border-radius: 1em; */
margin: .5em;
}
.cadre {
border:solid 1px; border-color:#ae0a78; border-radius:1em;
background-color: #ebeaea;
padding: 1em;
}
.centrer {
text-align: center;
}
/*
.ib {
display: block;
margin: 5% auto 3%;
border: none;
}
*/
.jaune {
border:solid 1px; border-color:#ffffff; border-radius:1em;
background-color: #ffffff;
padding: 1em;
text-align: center;
}
.milieu {
vertical-align: middle;
}

[jrenard]

Bonjour,

Plusieurs choses.

Le CSS associé à votre page est le suivant : http://marc.terrier76.perso.sfr.fr/i...s/st_auban.css
Si vous l'affichez dans une page Web, vous constaterez que son conteu n'est pas celui que vous décrivez. En particulier, aucune trace de style appliqué aux élément #chicken et #chicken_close. Il est donc logique qu'aucune modification de style ne soit opérée sur ces pop-ups. Veillez à bien rechargez votre CSS et à bien pointer dessus depuis votre code HTML.

Ensuite, si vous supprimez le width sur les éléments p, il est logique que la largeur des pop-ups soit diminuée puisque cette largeur était calculée dynamiquement depuis les largeurs de ces éléments internes, en particulier les paragraphes p. Gardez donc ces propriétés CSS et contentez-vous de rajouter celles sur les pop-ups proposées dans mon message précédent.

Enfin, le code appliqué à #chicken_close

Code :

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

background-image: url('...'); // chemin vers une nouvelle image pour la croix de fermeture

ne doit pas être laissé tel quel, ça ne veut rien dire ! Il faut modifier l'URL (les trois petits points) pour pointer en chemin relatif une image ajoutée dans l'arborescence de votre site Web.

Tant qu'on y est, puisqu'on parle de chemin relatif, le chemin vers votre fichier CSS gagnerait à être écrit en chemin relatif et non absolu :

Code :

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

./st-auban_photos/st_auban.css

.

[marcterrier]

Bonjour,

en tenant compte des différents conseils, j'en suis là !

Le CSS associé à votre page ne contient aucune trace de style appliqué aux élément #chicken et #chicken_close ; il est donc logique qu'aucune modification de style ne soit opérée sur ces pop-ups.

Oups ! j'ai voulu que les liens dans les posts ci-dessus restent fonctionnels : j'ai donc fait une copie de l'html en oubliant de changer l'URL du CSS. C'est corrigé.

Si vous supprimez le width sur les éléments p, il est logique que la largeur des pop-ups soit diminuée puisque cette largeur était calculée dynamiquement depuis les largeurs de ces éléments internes, en particulier les paragraphes p. Gardez donc ces propriétés CSS et contentez-vous de rajouter celles sur les pop-ups proposées dans mon message précédent.

Corrigé ! Il y a encore certains éléments du CSS qui ne fonctionnent pas.

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
#chicken {
padding: .5em .5em .5em 1.9em; /* marge intérieure : OUI ! */
border-radius: 20px; /* angles arrondis : OUI ! */
margin-top: 1em; /* décalage par rapport au marqueur : OUI ! */
margin-left: 1em; /* décalage par rapport au marqueur : OUI ! */
border: 1px solid #afafaf; /* Atténuation de la bordure ; couleur grise : SANS EFFET ! */
/* Les deux items ci-dessous ne fonctionnent pas non plus. */
background-color: #e31414;
opacity: 0.5;
}
#chicken_close {
background-image: url('croix_fermeture_fenetre.gif'); /* chemin vers une nouvelle image pour la croix de fermeture */
}
#chicken img {
border: 0px solid; border-radius: 1em;
margin: .5em;
}

pour bien analyser les css de tes éléments du DOM (dont chicken) dans l'api, il faut utiliser firebug

Selon Firebug voici donc les attributs de « chicken »

Code :

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

<div id="chicken" class="gpPopup" style="position: absolute; overflow: hidden; border: 1px solid rgb(175, 175, 175); left: -66435px; top: 342967px; background-color: white; opacity: .8; width: 277px; height: 287px; z-index: 751;">

PS : j'ai regardé votre site http://vivlig.free.fr/ : c'est beau, vous avez du goût

A propos de la « croix de fermeture » :

Enfin, le code appliqué à #chicken_close

Code :

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

background-image: url('...'); // chemin vers une nouvelle image pour la croix de fermeture

ne doit pas être laissé tel quel, ça ne veut rien dire ! Il faut modifier l'URL (les trois petits points) pour pointer en chemin relatif une image ajoutée dans l'arborescence de votre site Web.

C'est sûr… Corrigé !

À ce propos, le padding ne permet pas d'espacer la terminaison des lignes du texte par rapport à la croix de fermeture. Padding-right augmente la marge intérieure mais seulement entre la croix et la bordure…

Tant qu'on y est, puisqu'on parle de chemin relatif, le chemin vers votre fichier CSS gagnerait à être écrit en chemin relatif et non absolu :

Code :

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

./st-auban_photos/st_auban.css

.

Oui, vous avez raison, sauf dans ce genre de cas : un fichier kml qui va s'ouvrir localement et pour lequel l'adresse du CSS doit être écrite en absolu afin d'être opérante… J'ai pris l'habitude d'écrire toutes les adresses en absolu ce qui est un défaut, notamment en cas de migration de site.

Je passe à un autre sujet :

Pour affiner, notamment sur l'aspect de la bulle, vous pouvez faire votre marché en consultant l'exemple suivant : http://api.ign.fr/tech-docs-js/examp...ap_popups.html

J'aime bien celui-là !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
/**
* Class: Geoportal.Popup.Anchored.Css.Classic
*
* Inherits from:
* - {<Geoportal.Popup.Anchored.Css>}
*/
Geoportal.Popup.Anchored.Css.Classic= OpenLayers.Class(Geoportal.Popup.Anchored.Css, {
displayClass:Geoportal.Popup.Anchored.Css.prototype.displayClass+'Classic',
dOverlap:8,
cWidth:30,
cHeight:32
});

Où faut-il mettre le code ? Largeur et hauteur du popup sont-elles redimensionnées dynamiquement en fonction du contenu ?

Voici mes fichiers :
. ma page
. son CSS

Merci à vous tous, et bon dimanche

Marc

[cmail]

Vite fait pour que tu passes un dimanche studieux, avant une réponse savante IGN!

As-tu pensé de faire une recherche dans ce forum avec le mot : "anchored"

J'ai trouvé ce fil qui devrait t'intéresser http://www.developpez.net/forums/d10...s/#post6073538
Mais d'autres pourraient aussi t'intéresser....

Étudies aussi le code source de http://ing.musee-resistance-chateaub...p.php?article1 et tu recherches framecloud ou tu fais les modifs adéquates pour avoir anchored

[marcterrier]

Pour affiner, notamment sur l'aspect de la bulle, vous pouvez faire votre marché en consultant l'exemple suivant : http://api.ign.fr/tech-docs-js/examp...ap_popups.html

J'aime bien le rendu de celui-là : « Geoportal.Popup.Anchored.Css.Classic » !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
/**
* Class: Geoportal.Popup.Anchored.Css.Classic
*
* Inherits from:
* - {<Geoportal.Popup.Anchored.Css>}
*/
Geoportal.Popup.Anchored.Css.Classic= OpenLayers.Class(Geoportal.Popup.Anchored.Css, {
displayClass:Geoportal.Popup.Anchored.Css.prototype.displayClass+'Classic',
dOverlap:8,
cWidth:30,
cHeight:32
});

OK ! Ça c'est pour le CSS. Encore que je doute que ça fonctionne seulement avec ces quelque lignes

Mais j'imagine qu'il faut aussi rajouter du code dans l'html, non ?

Par ailleurs, largeur et hauteur du popup sont-elles redimensionnées dynamiquement en fonction du contenu ?

As-tu pensé de faire une recherche dans ce forum avec le mot : "anchored"

Fait !

Voici les articles les plus en rapport avec ma question :
. « Comment choisir un autre type de popup que celui en standard Anchored ? »
. « Déclinaisons du style Anchored »

Je rappelle après les avoir lus attentivement…

J'ai trouvé ce fil qui devrait t'intéresser http://www.developpez.net/forums/d10...s/#post6073538 Mais d'autres pourraient aussi t'intéresser....

Sans rapport avec ma question, non ?

Étudies aussi le code source de http://ing.musee-resistance-chateaub...p.php?article1 et tu recherches framecloud ou tu fais les modifs adéquates pour avoir anchored

Pas de « framecloud » dans le source MAIS

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
	//options_popup : contient les informations permettant d'affiner le comportement des popups associées à la couche gpx
	{
	"hover" : false,
	"onSelect" : function openPopup(f){
		f.popup= new OpenLayers.Popup.FramedCloud(
			"chicken",//identifiant
			f.geometry.getBounds().getCenterLonLat(),
			null, // taille null pour qu'elle s'adapte automatiquement
			"<div id=\"popup_content\"><div id=\"popup_head\"><b>"+f.data.name+"<\/b><\/div><div id=\"popup_body\">"+f.data.desc+"<\/div><div>"+f.data.cmt+"<\/div><\/div>",  //message dans la popup
			null,
			true // Booleen pour activer la closeBox
			); 
		viewer.getMap().addPopup(f.popup);
		},
	"onUnselect" : function closePopup(f) {
			Geoportal.Control.unselectFeature(f);
		}
	}
);

ET : recherche « Framedcloud » sur Developpez.com

Merci,

Marc

[marcterrier]

Oups ! Faut que je me calme ; je dois ennnuyer du monde avec mes histoires de popup…

Merci pour ces propositions qui pourraient améliorer l'affichage de cette fenêtre.
Da façon générale, nous sommes conscients que les diverses pop-ups pouvant être affichées par l'API n'ont pas toujours un rendu visuel des plus esthétiques, et cela fait partie des chantiers sur lesquels il faudra se pencher que d''améliorer un peu le design de ces fenêtres.

Trouvé dans le post : Correction à la fenêtre flottante « Mesure d'azimut »

[jrenard]

Bonjour,

ravi de voir que les choses avancent, et dans le bon sens ! Je reviens sur quelques points soulevés depuis vendredi.

Il y a encore certains éléments du CSS qui ne fonctionnent pas.

Effectivement, il s'agit d'éléments définis dans le fichier CSS mais qui sont ensuite surchargés par le code Javascript (parce qu'il y a une mise en forme dynamique depuis l'API par exemple). Cela se voit dans Firebug :



Sous l'entrée #chicken, en bas, ce sont les éléments de style appliqués depuis votre CSS/ Sous l'entrée element.style, en haut, ce sont les éléments de style définis après coup par le Javascript. On constate que certaines propriétés sont déclarés des deux cotés, et dans ce cas-là c'est la dernière déclaration qui l'emporte, écrasant les valeurs définies dans votre CSS (ce qui fait qu'elles apparaissent barrées dans Firebug pour signifier qu'elles ne sont pas prises en compte). Pour éviter cela, il faut sur ces propriétés particulières indiquer qu'elles doivent prendre le pas sur toute autre valeur qui serait définie par la suite, en leur ajoutant le mot-clé "!important". Par exemple :

Code :

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

1
2
background-color: #e31414 !important;
opacity: 0.5 !important;

Avec ça, tout rentrera dans l'ordre

À ce propos, le padding ne permet pas d'espacer la terminaison des lignes du texte par rapport à la croix de fermeture. Padding-right augmente la marge intérieure mais seulement entre la croix et la bordure…

C'est logique, le pading-right introduit une marge intérieure à la div #chicken par rapport à son contenu la div #chicken_GroupDiv, donc tout le contenu en bloc se voit affecter cette marge. Pour faire des marges un peu plus fines entre les différents éléments de la pop-up, il faudra jouer sur les propriétés margin (marge extérieure) et padding (marge intérieure) de ses éléments internes, notamment #chicken_GroupDiv et #chicken_ContentDiv

[cmail]

Je ne veux pas trop perturber le fil, mais...
Faire appel aux popups d'OL c'est bien mais cela me semble compliquer si on veut modifier en profondeur le css. Par contre sur http://essai.obs43.fr/essaiPOI_2.htm tu pourras voir une ébauche pour s'autonomiser de ces popups où le controle css est des plus simples....

[marcterrier]

Le padding ne permet pas d'espacer la terminaison des lignes du texte par rapport à la croix de fermeture. Padding-right augmente la marge intérieure mais seulement entre la croix et la bordure…

Dans cette page !

C'est logique, le pading-right introduit une marge intérieure à la div #chicken par rapport à son contenu la div #chicken_GroupDiv, donc tout le contenu en bloc se voit affecter cette marge. Pour faire des marges un peu plus fines entre les différents éléments de la pop-up, il faudra jouer sur les propriétés margin (marge extérieure) et padding (marge intérieure) de ses éléments internes, notamment #chicken_GroupDiv et #chicken_ContentDiv

"chicken_close", qui contient la croix de fermeture, est positionné en absolu :

Code :

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

<div id="chicken_close" class="gpPopupCloseBox" style="width: 17px; height: 17px; position: absolute; right: 1px; top: 1px;"></div>

et, sauf erreur, on voit dès le départ ce que cela entraine : le texte justifié à gauche se range contre la bordure gauche de "chicken" mais pas celui qui est justifié à droite !

La position de "chicken_close" est déterminée par référence aux limites de son conteneur qui me semble être "chicken_GroupDiv"

Selon ce que j'ai pu lire, il faudrait ménager un espace plus important pour la boîte en position absolue "chicken_close" afin de lui éviter de trop recouvrir le contenu de "chicken_GroupDiv".

J'ai essayé des valeurs de marge et même de taille sur les différentes <div> mais ça n'est pas opérant !

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
#chicken {
padding: .5em .5em .5em 1.8em; /* marge intérieure : OUI ! */
border-radius: 1em; /* angles arrondis : OUI ! */
margin: 1em 0em 0em 1em; /* décalage de l'angle supérieur gauche de #chicken par rapport au marqueur : OUI ! */
border: 1px solid #efefef !important; /* Atténuation de la bordure ; couleur grise : OUI ! */
background-color: #efefef !important;
opacity: 0.8 !important;
box-shadow: 8px 8px 12px #555 !important;
/* max-width: 20em !important; */
}
#chicken_close {
background-image: url('croix_fermeture_fenetre.gif'); /* chemin vers une nouvelle image pour la croix de fermeture */
margin-left: 2em;
}
#chicken img {
border: 0px solid; border-radius: 1em;
margin: .5em;
}
/*
#chicken_contentDiv {
margin: 0em 0em 0em 0em; 
padding: 0em 1em 0em 0em; 
width: 15em !important;
}
#chicken_close {
width: 5em !important;
position: absolute; right: 1px; top: 1px;
}*/

Peut-être faudrait-il donner une dimension/largeur à "chicken_GroupDiv",

Code :

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

<div id="chicken_GroupDiv" style="position: relative; overflow: hidden;">

mais laquelle ?

Marc

[marcterrier]

Ravi de voir que les choses avancent, et dans le bon sens !

Bonjour,

je suis satisfait - il m'en faut peu, hein ? - du résultat.

Comparez avec celui obtenu au début de ce fil de discussion avec le popup non retouché du « Générateur API Javascript »

Le CSS est à votre disposition :

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
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
/*******************************************************************************
*                                                                              *
*                    Le CSS du fichier « viewer_container.html »               *
*                                                                              *
*                             « viewer_container.css  »                        *
*                                                                              *
********************************************************************************/

/*******************************************************************************
*                                                                              *
*                 pour « surcharger » le CSS du pop-up de l'API                *
*                 il faut connaître le nom de l'élément à modifier…            *
*                                                                              *
********************************************************************************/

#chicken {
margin: 1em 0em 0em 1em; /* décalage de l'angle supérieur
                         gauche du <div> par rapport au marqueur */
padding: 0.4em 0em 1em 0em; /* marge intérieure */
border-radius: 1em; /* angles arrondis */

/*******************************************************************************
*                                                                              *
*  Pour éviter la surcharge dynamique des propriétés de certains des éléments  *
*  définis dans ce CSS par le code Javascript de l'API il faut, sur ces        *
*  propriétés particulières, indiquer qu'elles doivent prendre le pas sur      *
*  toute autre valeur qui serait définie par la suite en leur ajoutant         *
*  la propriété « !important »                                                 *
*                                                                              *
********************************************************************************/

border: 1px solid #efefef !important; /* Atténuation de la bordure ; couleur 
                                      grise */
background-color: #efefef !important;
opacity: 0.8 !important;
box-shadow: 8px 8px 12px #555; /* OMBRE sous la bordure droite et la bordure
                               inférieur du popup */
}
#chicken_close {
background-image: url("croix_fermeture_fenetre.gif"); /* l'image pour la croix
                                                      de fermeture */
}

/*******************************************************************************
*                                                                              *
*  C'est ici qu'il faut éventuellement modifier les propriétés des IMAGES      *
*  contenues dans le popup. Si vous modifiez l'aspect des images directement   *
*  par le CSS de la balise <img> cela peut avoir des conséquences sur l'aspect *
*  des « tuiles » du Géoportail. Regardez ce qu'il ne faut PAS faire :         *
*  « http://marc.terrier76.perso.sfr.fr/i...eoportail.html »        *
*                                                                              *
********************************************************************************/

#chicken img {
max-width: 20em; /* ç'est la largeur déclarée ici qui prendra le pas sur celle de l'image */
border: 0px solid; border-radius: 1em;
/* les deux propriétés ci-dessous servent à centrer l'image */
display: block;
margin: auto;
}
#chicken_contentDiv {
padding-right: .75em; /* éloigne la fin de la ligne du texte de la croix */
margin-left: 1.37em; /* fait passer le texte sous la croix en le rapprochant de la bordure droite de la fenêtre */
}
.gpPopupBody {
padding-top: 2em; /* éloigne le haut du texte de la croix */
}
p {
width: 20em; /* indispensable pour attribuer une largeur aux popup qui contiennent du texte | <p> le texte </p> | */
}

/*******************************************************************************
*                                                                              *
*                     la suite concerne seulement l'aspect                     *
*                     des éléments CONTENUS dans le popup                      *
*                                                                              *
********************************************************************************/

body {
font-size: 0.90em;
font-family: Trebuchet MS;
margin:0;
padding:0;
}
a {
color: #ae0a78;
text-decoration: none;
}
.cadre {
border:solid 1px; border-color:#bcacac; border-radius:1em;
background-color: #fff;
padding: 1em;
}
.centrer {
text-align: center;
}
.milieu {
vertical-align: middle;
}
.ombre {
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 8px 8px 12px #555;
}

Je garde - un temps - la discussion ouverte pour les commentaires des membres du forum et aussi parce que j'ai posé dans ce post des questions adjacentes encore sans réponse.

Merci de votre aide,

Marc

[marcterrier]

Bonsoir cmail,

Par contre sur http://essai.obs43.fr/essaiPOI_2.htm tu pourras voir une ébauche pour s'autonomiser de ces popups où le controle css est dès plus simples…

J'ai regardé : je me sens bien incapable d'en retirer « la substantifique moelle ».

Je me suis demandé pourquoi tu voulais que les popups se ferment seulement en cliquant sur leur croix. J'imagine que c'est pour pouvoir manipuler la carte en arrière plan pendant que l'un d'eux est ouvert. Quand à l'ouverture au survol, c'est sympa, mais seulement quand il n'y a pas trop de POI sur la carte.

À propos d'une de mes questions précédentes qui t'avait interpellé

Dans l'immédiat, qui voudrait m'indiquer où je peux trouver des informations concernant les éléments « officiels » du CSS, tels "chicken" ?

Voila de quoi je parlais.

C'est plus commode pour étudier les propriétés des balises une fois qu'on a commencé à cerner le problème avec Firebug.

Enfin, comme tu le verras ici, je suis à peu près satisfait du résultat de mes recherches (mais, vu le temps passé, heureusement que je ne suis pas développeur)

Merci de ton aide,

Marc

[cmail]

Ce que je proposais était juste un petit exemple à adapter en fonction de tes besoins.... Mais si tu n'en as pas besoin, ce n'est pas grave...

[marcterrier]

Trouvé ça, par hasard :

http://www.developpez.net/forums/arc...hp/f-1255.html

En dépit du nom du fichier, cela recense des posts récents… On dirait un fil RSS.

Peut-on passer des paramètres via l'URL pour faire un tri par ordre chronologique (les derniers modifiés en tête de liste) ?

[marcterrier]

Ce que je proposais était juste un petit exemple à adapter en fonction de tes besoins.... Mais si tu n'en as pas besoin, ce n'est pas grave...

Mes notions de JavaScript sont dès plus succintes. Je ne crois pas pouvoir comprendre seul le source du lien que tu m'as proposé.

Ceci dit, j'ai vu que tu ne répugnais pas à « mettre les mains dans le cambouis » pour aider les débutants

Bonne soirée,

Marc

[cmail]

Mes notions de JavaScript sont dès plus succintes. Je ne crois pas pouvoir comprendre seul le source du lien que tu m'as proposé.

Si, si, tu peux! Mais il faut un peu s'accrocher....