Reduire la taille de l'affichage meteo

**F6AAP** · 09/03/2018, 20h21

Bonsoir,

je viens vers vous car j'ai intégré l'affichage météo France sur mon site et je n'arrive pas à afficher
la météo en % par rapport au conteneur.
Le développement a été fait sur un grand écran et lorsque je reviens sur un petit il y a chevauchement

ci-dessous la partie concernée de ma page HTML

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
 
		<div id="conteneur2b">
			<div id="element2b1">
				<div id="meteo">
				<p style="margin-left: 10px;margin-top: 10px;">
 
				<a id="lcm2K13_495"href="http://france.lachainemeteo.com/meteo-france/region/previsions-meteo-basse-normandie-4-0.php">Meteo</a>
				<script src="http://services.lachainemeteo.com/meteodirect/generationjs/javascript?type_affichage=carte&amp;w=300&amp;h=290&amp;idc=lcm2K13&amp;entite=4&amp;type_entite=3&amp;echeance=0&amp;rand=495">
				</script>
				</p>
				</div>
			</div>
			<div id="element2b2"><img src="Docs/Diplome.png">
						<p>Diplôme du 61</p>
			</div>	
			<div id="element2b3">
				<p style="text-align: center;margin: top;font-weight: bold;" >ISS comme s'y vous y étiez</p>
				<div id="element2b31"><img src="Docs/ISS.png">
				<p style="text-align: center;color:#FF00CC;" >Cliquez <a href="Docs/Mission Scott Kelly.pdf" target="_blank">ICI</a> pour plus d'infos</p>
				</div>	
			</div>
			<div id="element2b4">
				<p style="text-align: center;margin: top;font-weight: bold;" >Un aperçu de notre participation à la fête du ciel à L'Aigle</p>
				<div class="diaporama1">
				</div>
				<p style="text-align: center;margin: top;font-weight: bold;" >TM61FDC - Tour ULM 2015	</p>
			</div>	
		</div>
	</div>

ci-dessous le code CSS associé

Code CSS :

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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
 
#conteneur2b
{
	display: flex;
	position: absolute;
	top: 660px;
/*	background-color: #FFFF33; */
	width: 97%;
	height: 400px;
	margin-left:0px;
	margin-right: 0px;
	margin-top: 0px;
}
div#element2e2 img
{
	width :280px;
	height: 100px;
	margin-top: 10px;
}
div#element2b1
{
	float:left;
	width:21%;
	height:320px;
	max-width: 100%;
	background-color:#99FF33;
	border: 2px solid black;
	margin-left:65px;
	margin-right: 0px;
	margin-top: 10px;
	text-align: center;	
	order: 1;
}
div#element2b2
{
	float:center;
	width:13%;
	height:320px;
	max-width: 100%;
	background-color:#99FF33;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	text-align: center;	
	order: 2;
	z-index: 1;
}
div#element2b2 img
{
	width :190px;
	height: 250px;
	margin-top: 10px;
}
div#element2b2 img:hover
{
	width: 285px;text-align: center;
	height: 375px;
}
div#element2b2 p
{
	text-align: center;
}
div#element2b3
{
	float:rigth;
	text-align: center;
	width:28%;
	height:320px;
	background-color:#99FF33;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	order: 4;	
}
div#element2b31 img
{
	width :400px;
	height: 200px;
	margin-top: 10px;
	text-align: center;
}
div#element2b4
{
	float:rigth;
	text-align: center;
	width:28%;
	height:320px;
	background-color:#99FF33;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	order: 3;	
}
.diaporama1
{
	display: flex;
	margin: 0 auto;
	width: 280px;
	height: 172px;
	border: 3px solid #333;
	background-image: url(Docs/image1.JPG);
 
	webkit-animation-name: diapo1;
	webkit-animation-duration: 9s;
	webkit-animation-timing-function: linear;
	webkit-animation-iteration-count: infinite;
	webkit-animation-direction: normal;
 
	moz-animation-name: diapo1;
	moz-animation-duration: 9s;
	moz-animation-timing-function: linear;
	moz-animation-iteration-count: infinite;
	moz-animation-direction: normal;	
 
	animation-name: diapo1;
	animation-duration: 15s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
 
@-webkit-keyframes diapo1
{
	0%{background-image: url(Docs/image1.JPG);}
	14%{background-image: url(Docs/image2.JPG);}
	28%{background-image: url(Docs/image3.JPG);}
	42%{background-image: url(Docs/image4.JPG);}
	56%{background-image: url(Docs/image5.JPG);}
	70%{background-image: url(Docs/image6.JPG);}
	84%{background-image: url(Docs/image7.JPG);}
}
 
@-moz-keyframes diapo1
{
	0%{background-image: url(Docs/image1.JPG);}
	14%{background-image: url(Docs/image2.JPG);}
	28%{background-image: url(Docs/image3.JPG);}
	42%{background-image: url(Docs/image4.JPG);}
	56%{background-image: url(Docs/image5.JPG);}
	70%{background-image: url(Docs/image6.JPG);}
	84%{background-image: url(Docs/image7.JPG);}
}
 
@keyframes diapo1
{
	0%{background-image: url(Docs/image1.JPG);}
	14%{background-image: url(Docs/image2.JPG);}
	28%{background-image: url(Docs/image3.JPG);}
	42%{background-image: url(Docs/image4.JPG);}
	56%{background-image: url(Docs/image5.JPG);}
	70%{background-image: url(Docs/image6.JPG);}
	84%{background-image: url(Docs/image7.JPG);}
}

J’espère que quelqu'un pourra m'aider

et en attendant votre réponse,

mes remerciements

Cordialement

**vttman** · 10/03/2018, 10h53

Tester ceci, j'ai fait du ménage en espérant
que ça arrange l'affichage ...

Code CSS :

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
124
125
126
127
128
129
#conteneur2b
{
	display: flex;
	position: absolute;
	top: 660px;
	width: 97%;
	margin:0px;
}
div#element2e2 img
{
	margin-top: 10px;
}
div#element2b1
{
	width:21%;
	background-color:#99FF33;
	border: 2px solid black;
	margin-left:65px;
	margin-right: 0px;
	margin-top: 10px;
	text-align: center;	
	order: 1;
}
div#element2b2
{
 
	background-color:#99FF33;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	text-align: center;	
	order: 2;
	z-index: 1;
}
div#element2b2 img
{
	margin-top: 10px;
}
div#element2b2 img:hover
,div#element2b2 p
{
	text-align: center;
}
div#element2b3
{
	text-align: center;
	background-color:#99FF33;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	order: 4;	
}
div#element2b31 img
{
	margin-top: 10px;
	text-align: center;
}
div#element2b4
{
	text-align: center;
	width:28%;
	min-height:100px;
	background-color:#99FF33;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	order: 3;	
}
.diaporama1
{
	min-width:90%;
	min-height:100px;
	margin: 0 auto;
	border: 3px solid #333;
	background-image: url(Docs/image1.JPG);
 	webkit-animation-name: diapo1;
	webkit-animation-duration: 9s;
	webkit-animation-timing-function: linear;
	webkit-animation-iteration-count: infinite;
	webkit-animation-direction: normal;
 
	moz-animation-name: diapo1;
	moz-animation-duration: 9s;
	moz-animation-timing-function: linear;
	moz-animation-iteration-count: infinite;
	moz-animation-direction: normal;	
 
	animation-name: diapo1;
	animation-duration: 15s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
 
@-webkit-keyframes diapo1
{
	0%{background-image: url(Docs/image1.JPG);}
	14%{background-image: url(Docs/image2.JPG);}
	28%{background-image: url(Docs/image3.JPG);}
	42%{background-image: url(Docs/image4.JPG);}
	56%{background-image: url(Docs/image5.JPG);}
	70%{background-image: url(Docs/image6.JPG);}
	84%{background-image: url(Docs/image7.JPG);}
}
 
@-moz-keyframes diapo1
{
	0%{background-image: url(Docs/image1.JPG);}
	14%{background-image: url(Docs/image2.JPG);}
	28%{background-image: url(Docs/image3.JPG);}
	42%{background-image: url(Docs/image4.JPG);}
	56%{background-image: url(Docs/image5.JPG);}
	70%{background-image: url(Docs/image6.JPG);}
	84%{background-image: url(Docs/image7.JPG);}
}
 
@keyframes diapo1
{
	0%{background-image: url(Docs/image1.JPG);}
	14%{background-image: url(Docs/image2.JPG);}
	28%{background-image: url(Docs/image3.JPG);}
	42%{background-image: url(Docs/image4.JPG);}
	56%{background-image: url(Docs/image5.JPG);}
	70%{background-image: url(Docs/image6.JPG);}
	84%{background-image: url(Docs/image7.JPG);}
}

**F6AAP** · 10/03/2018, 13h27

Bonjour,

Merci pour la réponse.

J'ai mis à jour mon fichier index.css avec les modifications apportées mais cela n'a rien changé à l'affichage de la météo.

La taille n'a pas été réduite.

D'une façon générale comment peut-on modifié ce genre d'élément en pourcentage et non pas en pixels.

En pratique quand j'ai voulu adapter la taille de la météo j'ai "joué" sur les paramètre w=300&h=290&amp de la ligne suivante du HTLM

<script src="http://services.lachainemeteo.com/meteodirect/generationjs/javascript?type_affichage=carte&w=300&h=290&idc=lcm2K13&entite=4&type_entite=3&echeance=0&rand=495">

j’espère que cette précision pourra aider à m'éclairer pour résoudre mon problème.

ordialement

**vttman** · 10/03/2018, 13h41

ça n'a rien changé ? ou plutôt le fichier n'a pas été pris en compte (ctrl+f5 sur le site) ...
Si toujours pas de changement en vue ... Ouvrir le site en navigation privée et/ou sur un autre navigateur ?

Sinon donner l'adresse du site Web ...

Invité · 10/03/2018, 15h23

Bonjour,

le script <script src="http://services.lachainemeteo.com/meteodirect/generationjs/javascript?type_affichage=carte&w=300&h=290...............> va créer une iframe, avec en paramètres w=300 et h=290.
L'inconvénient, c'est que ces dimensions sont aussi répercutées A L'INTERIEUR de l'iframe (sur les div et autre img...

Bref, en CSS seul, ce n'est pas possible de modifier tout ça.

Une petite amélioration consiste à ajouter au CSS :

Code css :

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

1
2
3
#element2b1 { width:300px !important; }
#meteo, #meteo p { margin:0 !important; width:300px !important; }
.MDWidget, .MDWidget div, .MDWidget iframe { max-width:100%; min-width:100%; width:auto !important; }

on "bloque" le 1er div à 300px.

Ensuite, grâce aux media queries, il faut modifier la disposition des boites en fonction de la largeur quand celle-ci est trop petite pour les afficher sur une seule ligne.

N.B. Vouloir réduire la carte en % n'a pas de sens ici, car elle va vite devenir illisible.

**F6AAP** · 13/03/2018, 09h31

Bonjour,

Merci pour les réponses, maintenant tout est ok pour le cadrage.

J'ai fait les tests sous Windows 7 et Windows 10 avec différents navigateurs : satisfait à 100%.

Merci de votre aide, pour moi le sujet est résolu

Cordialement

Reduire la taille de l'affichage meteo [HTML 5]

HTML

Discussions similaires

Partager

Partager