Mettre des images pardessus une autre image dans mon site

Invité · 28/09/2016, 15h14

Si tu ne remontres pas ton code, je ne vois rien non plus...

N.B. As-tu fais un copier-coller de mon code, ou pas ?

[EDIT] Sur ton site "en ligne", je vois :

Code :

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

<img style="width: 800px; height: 200px;" alt="Septembre" src="file:///F:/Meteo/Meteo_Clopiniere/Septembre.jpg">

"file:///F:/file:///F:/Meteo/Meteo_Clopiniere/........" : ce sont les URL des images EN LOCAL (sur ton ordinateur)

**PoppyGuy** · 28/09/2016, 15h23

Je n'ai pas changer de code ?
J'ai recopié le tiens.
J'ai mis cette page en index.html et je ne vois pas mes images.
Regarde sur le site.

J'avoue que je suis perdu, alors que je commençais à comprendre

Invité · 28/09/2016, 15h40

Dans Komposer :
1/ Clique sur l'onglet "Source" (en bas)

2/ Sélectionne TOUT le code, et COPIE-COLLE-le dans un document txt (afin d'en avoir une sauvegarde, au cas où...)

3/ Remplace TOUT le code par celui-ci :

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
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
	<title>Météo St Florent des Bois - La Clopinière - La Sicaudiere</title>
	<meta content="Guy" name="author">
 
  <base href="http://st-florent-meteo-clopiniere.akeonet.com/" />
 
	<script type="text/javascript">
        function affichePage()
        {
                // récupération des données : annee / mois / pages
                var annee = document.getElementById('annee').value;
                var mois = document.getElementById('mois').value
                var pages = document.getElementById('pages').value
 
                if( annee != '' && mois != '' && pages != '' )
                {
                        var url = '/'+ annee + '/' + mois + '/' + pages +'.html';
                        document.location.href = url; // on affiche la page
                }
        }
        </script>
 
	<style>
* { margin:0; padding:0; }
body {
  width:100%; height:100%;
  max-width:1450px;
  margin:0 auto;
  text-align:center; 
  color:white; 
  background-color:rgb(0, 51, 153);
}
a { color:#dcd296; }
a:hover { color:#33ff33; }
a:visited { color:#dcd296; }
 
/* ------------------ */
/* Images avec icones */
.Bloc-Stats {
  position: relative;
  display: inline-block;
}
 
/* grande image */
.Bloc-Stats #Station-Mois-image {
  position: relative;
  display: block;
  border: 0;
  width: 792px;
  height: 548px;
}
 
/* icones */
.Bloc-Stats img.ico {
  position: absolute;
  display: block;
  border: 0;
  width: auto;
  height: 30px;
}
 
.Bloc-Stats img.ico-Terre {
  top: 94px;
  left: 90px;
}
 
.Bloc-Stats img.ico-Pluie {
  top: 210px;
  left: 90px;
}
 
.Bloc-Stats img.ico-Soleil {
  top: 328px;
  left: 90px;
}
 
/* ... (et ainsi de suite) ... */
 
.Bloc-Stats img.ico-Horloge {
  top: 364px;
  left: 238px;
}
 
.Bloc-Stats img.ico-Thermometre {
  top: 274px;
  left: 353px;
}
 
.Bloc-Stats img.ico-Humidite {
  top: 274px;
  left: 476px;
}
 
.Bloc-Stats img.ico-Vent {
  top: 94px;
  left: 520px;
}
 
.Bloc-Stats img.ico-Graphique {
  top: 300px;
  left: 520px;
}
        </style>
</head>
 
<body>
 
	<h1><span style="color: red;">M</span><span style="color: rgb(51, 255, 51);">é</span><span style="color: rgb(255, 255, 51);">t</span><span style="color: rgb(102, 255, 255);">é</span><span style="color: rgb(204, 51, 204);">o</span> "St Florent des bois" - "La Clopinière" - "La Sicaudière"</h1>
 
	<h2>Commune des "Rives de L'Yon"</h2>
 
	<div>
		<a href="mailto:st-florent-meteo-clopiniere@akeonet.com"><img style="border: 0px solid ; width: 50px; height: 39px;" alt="Messagerie" src="Icones/Messagerie.gif"></a> 
	</div>
 
	<br>
 
	<div>
		Relevés météo avec une station amateur "Oregon WMR200" placée à "La Clopinière"<br>
		<big><span style="color: yellow;">Il y a la possibilité de voir les relevés effectués depuis 2011</span></big><br>
		<span style="color: rgb(51, 255, 51);">Pressions - Températures - Hauteur de pluie - Vitesse de Vent - Heures de Soleil</span><br>
		<span style="color: white;"></span><br>
		<span style="color: yellow;">La date et l'heure de la station ci-dessous indique la dernière mise à jour</span><br style="color: yellow;">
	</div>
 
	<br>
 
	<div>
		<!-- liste déroulante pour les années -->
		<select id="annee" name="annee" size="1" onchange="affichePage();">
			<option value="">Choisir une Année</option>
			<option value="2015">2015</option>
			<option value="2014">2014</option>
			<option value="2013">2013</option>
			<option value="2012">2012</option>
			<option value="2011">2011</option>
		</select>
		<!-- liste déroulantes pour les mois -->
		<select id="mois" name="mois" size="1" onchange="affichePage();">
			<option value="">Choisir un mois</option>
			<option value="Janvier">Janvier</option>
			<option value="Fevrier">Fevrier</option>
			<option value="Mars">Mars</option>
			<option value="Avril">Avril</option>
			<option value="Mai">Mai</option>
			<option value="Juin">Juin</option>
			<option value="Juillet">Juillet</option>
			<option value="Aout">Aout</option>
			<option value="Septembre">Septembre</option>
			<option value="Octobre">Octobre</option>
			<option value="Novembre">Novembre</option>
			<option value="Decembre">Decembre</option>
		</select>
		<!-- liste déroulante pour les pages -->
		<select id="pages" name="pages" size="1" onchange="affichePage();">
			<option value="">Choisir une page</option>
			<option value="Pluie">Pluie</option>
			<option value="Pressions">Pressions</option>
			<option value="Soleil">Soleil</option>
			<option value="Temperatures">Temperatures</option>
			<option value="Vent">Vent</option>
		</select>
	</div>
 
	<br>
 
	<div>
		<img style="width: 800px; height: 200px;" alt="Septembre" src="Septembre.jpg"><br>
		<br>
		<div>
			<div style="font-weight: bold;"><a href="2016/Janvier/Pluie_Soleil.html"><span style="text-decoration: underline;"><img style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Janvier" src="Icones/Bouton_Janvier.png"></span></a> 
				<a href="2016/Fevrier/Pluie_Soleil.html"><img style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Fevrier" src="Icones/Bouton_Fevrier.png"></a> 
				<a href="2016/Mars/Pluie_Soleil.html"><img style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Mars" src="Icones/Bouton_Mars.png"></a> 
				<a href="2016/Avril/Pluie_Soleil.html"><img style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Avril" src="Icones/Bouton_Avril.png"></a> 
				<a href="2016/Mai/Pluie_Soleil.html"><img style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Mai" src="Icones/Bouton_Mai.png"></a> 
				<a href="2016/Juin/Pluie_Soleil.html"><img style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Juin" src="Icones/Bouton_Juin.png"></a> 
				<a href="2016/Juillet/Pluie_Soleil.html"><img style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Juillet" src="Icones/Bouton_Juillet.png"></a> 
				<a href="2016/Aout/Pluie_Soleil.html"><img style="border: 0px solid ; width: 71px; height: 29px;" alt="BT_Août" src="Icones/Bouton_Aout.png"></a> 
				<a href="2016/Septembre/Pluie_Soleil.html"><img style="border: 0px solid ; width: 90px; height: 29px;" alt="Septembre" src="Icones/Bouton_Septembre.png"></a><br>
			</div>
 
			<div >
				<img style="width: 650px; height: 350px;" alt="Précipitations et Statistiques" src="Precipitations.jpg"><br>
				<a href="Developpez.html"><img style="border: 0px solid ; width: 71px; height: 29px;" alt="Essais" src="Icones/Bouton_Essais.png"></a><br>
				<img src="WMR200-2.jpg" alt="Station GW" style="width: 791px; height: 557px;"><br>
				<h2>Ensoleillement du jour en cours</h2>
				<img style="width: 901px; height: 564px;" alt="Soleil" src="Ensoleillement.JPG"><br>
				<br>
				<h2>Température - Pression - Humidité - Vent et Statistiques du jour en cours</h2>
				<img src="GraphWeather.jpg" alt="GW" style="width: 800px; height: 700px;"><br>
				<br>
 
 
				<div class="Bloc-Stats">
					<img style="width: 792px; height: 548px;" alt="Station mois" src="WMR200_Mois_Excel.png"><br>
 
					<a href="2016/Septembre/Pressions.html"><img class="ico ico-Terre" alt="Icone Terre" src="Icones/Terre_Station.png"></a>
					<a href="2016/Septembre/Pluie.html"><img class="ico ico-Pluie" alt="Icone Pluie" src="Icones/Pluie_Station_Blanc.png"></a>
					<a href="2016/Septembre/Soleil.html"><img class="ico ico-Soleil" alt="Icone Soleil" src="Icones/Soleil_Station.png"></a>
					<img class="ico ico-Horloge" alt="Horloge" src="Icones/Horloge_Station.png">
					<a href="2016/Septembre/Temperatures.html"><img class="ico ico-Thermometre" alt="Icone Thermomètre" src="Icones/Temperature_Station.png"></a>
					<a href="2016/Septembre/Humidite.html"><img class="ico ico-Humidite" alt="Icone Humidité" src="Icones/Humidite_Station.png"></a>
					<a href="2016/Septembre/Vent.html"><img class="ico ico-Vent" alt="Icone Vent" src="Icones/Vent_Station.png"></a>
					<img class="ico ico-Graphique" alt="Graphique" src="Icones/Graphique_Station.png">
				</div>
 
				<img style="width: 794px; height: 553px;" alt="Station Année" src="WMR200_Annee_Excel.png"><br>
				<br>
				<br>
				<h2>Graphique des précipitations du mois en cours</h2>
				<img style="width: 910px; height: 451px;" alt="Graphique Pluie" src="Pluie.png"><br>
				<br>
				<br>
				<br>
				<h2>Graphique des heures de Soleil du mois en cours</h2>
				<img src="Soleil.png" alt="Graphique Soleil" style="width: 910px; height: 451px;"><br>
				<br>
				<br>
				<h2>Graphique de la Vitesse du Vent du mois en cours</h2>
				<img style="width: 910px; height: 451px;" alt="Graphique Vent" src="Vitesse_Vent.png"><br>
				<br>
				<br>
				<br>
				<h4><big>Nombre de jours et d'heures de <span style="color: rgb(51, 204, 0);">Pluie</span>, de <span style="color: yellow;">Soleil</span>, et de <span style="color: rgb(255, 204, 153);">Vent</span> du mois en cours</big></h4>
 
				<span style="text-decoration: underline;"></span><img style="width: 910px; height: 554px;" alt="Mois" src="Mois.png"><br>
 
				<br>
 
				<h4><big>Mini et Maxi du mois en cours</big></h4>
 
				<img style="width: 910px; height: 454px;" alt="Mini Maxi" src="Mini_Maxi.png"><br>
 
			</div>
		</div>
	</div>
 
</body>
</html>

**PoppyGuy** · 28/09/2016, 16h07

D'accord, je vois ce que tu veux me dire.

Moi, ce que je voulais dire, c'est que les deux cas m'intéresse sur les 3 stations.
Dans les image de la station et en bas.

Sur ma station (tactile), je touche une petite image sur l'écran et le voyant représentant la même image en bas s'allume.

Je comprends pour les petites images, mais, il y a quelque chose qui me chagrine, quand, je suis sur Kompozer, les petites images sont à coté de la station et quand je suis sur le site, elles sont bien en place.

**PoppyGuy** · 28/09/2016, 17h23

Voilà ce que ça donne sur "Kompozer" (pour les petites images)
Nom : Images à coté.JPG
Affichages : 279
Taille : 73,1 Ko

Invité · 28/09/2016, 19h00

Envoyé par PoppyGuy

...les deux cas m'intéresse sur les 3 stations...

Voilà pour le mois : http://codepen.io/jreaux62/pen/yaXqwL

1/ Pour les icones "en bas", j'ai copier-collé le code HTML des icones "dedans", en ajoutant aux class : ".....-bas"

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
				<div class="Bloc-Stats">
					<img style="width: 792px; height: 548px;" alt="Station mois" src="WMR200_Mois_Excel.png"><br>
 
					<a href="2016/Septembre/Pressions.html"><img class="ico ico-Terre" alt="Icone Terre" src="Icones/Terre_Station.png"></a>
					<a href="2016/Septembre/Pluie.html"><img class="ico ico-Pluie" alt="Icone Pluie" src="Icones/Pluie_Station_Blanc.png"></a>
					<a href="2016/Septembre/Soleil.html"><img class="ico ico-Soleil" alt="Icone Soleil" src="Icones/Soleil_Station.png"></a>
					<img class="ico ico-Horloge" alt="Horloge" src="Icones/Horloge_Station.png">
					<a href="2016/Septembre/Temperatures.html"><img class="ico ico-Thermometre" alt="Icone Thermomètre" src="Icones/Temperature_Station.png"></a>
					<a href="2016/Septembre/Humidite.html"><img class="ico ico-Humidite" alt="Icone Humidité" src="Icones/Humidite_Station.png"></a>
					<a href="2016/Septembre/Vent.html"><img class="ico ico-Vent" alt="Icone Vent" src="Icones/Vent_Station.png"></a>
					<img class="ico ico-Graphique" alt="Graphique" src="Icones/Graphique_Station.png">
 
            <!-- icones en bas -->
					<a href="2016/Septembre/Pressions.html"><img class="ico ico-Terre-bas" alt="Icone Terre" src="Icones/Terre_Station.png"></a>
					<a href="2016/Septembre/Pluie.html"><img class="ico ico-Pluie-bas" alt="Icone Pluie" src="Icones/Pluie_Station_Blanc.png"></a>
					<a href="2016/Septembre/Soleil.html"><img class="ico ico-Soleil-bas" alt="Icone Soleil" src="Icones/Soleil_Station.png"></a>
					<img class="ico ico-Horloge-bas" alt="Horloge" src="Icones/Horloge_Station.png">
					<a href="2016/Septembre/Temperatures.html"><img class="ico ico-Thermometre-bas" alt="Icone Thermomètre" src="Icones/Temperature_Station.png"></a>
					<a href="2016/Septembre/Humidite.html"><img class="ico ico-Humidite-bas" alt="Icone Humidité" src="Icones/Humidite_Station.png"></a>
					<a href="2016/Septembre/Vent.html"><img class="ico ico-Vent-bas" alt="Icone Vent" src="Icones/Vent_Station.png"></a>
					<img class="ico ico-Graphique-bas" alt="Graphique" src="Icones/Graphique_Station.png">
 
				</div>

=>
Il suffit de rajouter les code HTML pour CHAQUE station (en prenant soin de modifier les liens <a href="..."> des icones).

2/ Dans la partie CSS, j'ai ajouter les coordonnées des icones "en bas".

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
* { margin:0; padding:0; }
body {
  width:100%; height:100%;
  max-width:1450px;
  margin:0 auto;
  text-align:center; 
  color:white; 
  background-color:rgb(0, 51, 153);
}
a { color:#dcd296; }
a:hover { color:#33ff33; }
a:visited { color:#dcd296; }
 
/* ------------------ */
/* Images avec icones */
.Bloc-Stats {
  position: relative;
  display: inline-block;
}
 
/* grande image */
.Bloc-Stats #Station-Mois-image {
  position: relative;
  display: block;
  border: 0;
  width: 792px;
  height: 548px;
}
 
/* icones */
.Bloc-Stats img.ico {
  position: absolute;
  display: block;
  border: 0;
  width: auto;
  height: 30px;
}
 
.Bloc-Stats img.ico-Terre {
  top: 94px;
  left: 90px;
}
 
.Bloc-Stats img.ico-Pluie {
  top: 210px;
  left: 90px;
}
 
.Bloc-Stats img.ico-Soleil {
  top: 328px;
  left: 90px;
}
 
/* ... (et ainsi de suite) ... */
 
.Bloc-Stats img.ico-Horloge {
  top: 364px;
  left: 238px;
}
 
.Bloc-Stats img.ico-Thermometre {
  top: 274px;
  left: 353px;
}
 
.Bloc-Stats img.ico-Humidite {
  top: 274px;
  left: 476px;
}
 
.Bloc-Stats img.ico-Vent {
  top: 94px;
  left: 520px;
}
 
.Bloc-Stats img.ico-Graphique {
  top: 296px;
  left: 518px;
}
 
/* ------------------ */
/* icones en bas */
.Bloc-Stats img.ico-Terre-bas {
  top: 484px;
  left: 102px;
}
.Bloc-Stats img.ico-Pluie-bas {
  top: 484px;
  left: 186px;
}
.Bloc-Stats img.ico-Soleil-bas {
  top: 484px;
  left: 266px;
}
.Bloc-Stats img.ico-Horloge-bas {
  top: 484px;
  left: 346px;
}
.Bloc-Stats img.ico-Thermometre-bas {
  top: 484px;
  left: 434px;
}
.Bloc-Stats img.ico-Humidite-bas {
  top: 484px;
  left: 514px;
}
.Bloc-Stats img.ico-Vent-bas {
  top: 484px;
  left: 584px;
}
.Bloc-Stats img.ico-Graphique-bas {
  top: 484px;
  left: 666px;
}
/* ------------------ */

=> Normalement (si les 3 images des stations sont similaires = même dimensions et positions des icones), ce code CSS est SUFFISANT.

JUSTE à rajouter pour les 2 autres grandes images (stations) :

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
/* grande image pour JOURNEE en cours */
.Bloc-Stats #Station-Journee-image {
  position: relative;
  display: block;
  border: 0;
  width: 792px; /* mettre les dimensions correctes */
  height: 548px;
}
 
/* grande image pour ANNEE */
.Bloc-Stats #Station-Annee-image {
  position: relative;
  display: block;
  border: 0;
  width: 792px; /* mettre les dimensions correctes */
  height: 548px;
}

3/ Quant à Komposer......
Ce n'est pas le meilleur....

Apparement, il ne comprends pas l'instruction display:inline-block;.
Du coup, les icones sont mal placées.

=> Voilà une ASTUCE : mettre la même largeur au bloc que celle de la grande image :

Code html :

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

1
2
<div class="Bloc-Stats" style="margin: 0 auto; width: 792px;">
     <img style="width: 792px; height: 548px;" alt="Station mois".........................

**PoppyGuy** · 28/09/2016, 20h25

Bonsoir,
J'ai essayé tout ça, mais je n'arrive pas à avoir la concordance avec la site.
Sur mon éditeur, j'ai enlevé tout le reste, pour ne laisser que les 3 stations.
Sur ma page html sur le PC, les petites images sont là (mais pas à leur place)
Sur le site, la station mois n'apparait pas et toutes les images ne sont pas à leur place.
Dommage, ça devenait bon.....

Edit :
Apparemment, sur le site tout est bon, à part que ma mise à jour de la journée, ne se fait plus et que je ne peux rien faire rajouter ce que j'ai enlevé etc.... , puisque ça ne se reflète pas sur la site.
J'arrête pour ce soir (je ne suis pas du soir), je verrais ça demain de bonne heure 6h ou 7h
Le résultat est ce que je voulais
Merci beaucoup de ton aide
Cordialement

**PoppyGuy** · 29/09/2016, 07h26

Bonjour,
Donc, toi, tu arrive à avoir les images correctement placées avec "Kompozer".
J'ai supprimé Kompozer et je l'ai réinstallé (pas de changement, les images sont toujours décalées bizarre...bizarre)

Cela change-t-il beaucoup de chose si je veux mettre les station l'une à coté de l'autre ?

Invité · 29/09/2016, 08h42

Bonjour,

1/ voir mon ASTUCE

2/ les mettre cote à cote
-> il faut diminuer la taille des images-station
donc modifier les coordonnées des icones.

**PoppyGuy** · 29/09/2016, 10h53

Bonjour,

Pour les images à coté, j'ai trouvé !! (c'est mieux le matin)
il fallait que je décale l'image de la station à gauche, donc tout est OKAY !!! (à part que c'est à gauche sur l'interface Kompozer et au centre dans le site,mais bon....)

Sinon, j'ai un autre problème, quand je choisi une image, je n'ai pas de chemin, j'ai juste le nom du fichier tel que :

Code :

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

src="WMR200_Annee_Excel.png">

Par contre a une image, je n'arrive pas à avoir la même chose, j'ai le chemin :

Code :

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

src="file:///F:/Meteo/Meteo_Clopiniere/WMR200_GW.jpg">

et j'ai beau changer et mettre comme les autres, après je n'ai plus d'image cela doit provenir de Kompozer, il faut que j'arrive à trouver la solution ?

Bref :

1/ voir mon ASTUCE

Que veux tu dire ??

Donc à propos de mettre 2 stations à côté l'une de l'autre (pour essayer voir ce que cela donne), j'ai largement la place sans changer les dimensions.
Mais comment fait-on pour les mettre dans la même div (si c'est ça qu'il faut faire) ?

Invité · 29/09/2016, 11h15

1/ Enlève le <div> que tu as ajouté, et mets :

=> Voilà une ASTUCE : mettre la même largeur au bloc que celle de la grande image :

Code :

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

1
2
<div class="Bloc-Stats" style="margin: 0 auto; width: 792px;">
     <img style="width: 792px; height: 548px;" alt="Station mois".........................

2/

...j'ai largement la place sans changer les dimensions...

A moins que tu sois LE SEUL à regarder ton site, il faut que tu penses que tout le monde n'a pas le même ordinateur que toi !

Il faut privilégier à lisibilité du site, même sur "petits" écrans.

3/ Je viens de faire un tour sur le site de Komposer : http://kompozer.net/

On peut y lire :

"Latest stable version: 0.7.10 (2007-08-30)"
"Latest development version: 0.8b3 (2010-02-28)"

Autrement dit, pas de mise à jour depuis 2010 !

**PoppyGuy** · 29/09/2016, 11h34

D'accord, pour tout.
Par contre je galère, je n'arrive plus à avoir les mise à jour du logiciel, parce que j'ai toujours ce chemin qui m'en pèche d'avoir les images
Pour les images mois et année, pas de problème, mais pour l'image du jour plus possible.
Bref, je ne sais pas ce que je vais faire.
Connais-tu un interface pour faire un site comme je fais avec Kompozer, car les éditeurs de sites préétablit je ne connais pas.

Invité · 29/09/2016, 12h27

Envoyé par PoppyGuy

Connais-tu un interface pour faire un site...

Je suis justement en train d'en chercher un, gratuit, que tu puisses prendre en main facilement.

Je viens de télécharger Izispot pour le tester...

1/ Téléchargement et installation facile.
2/ On peut démarrer un nouveau projet, et chosir un "Modèle de site" (le modèle "Week-end" semble approprié pour toi )
3/ le menu à gauche permet (entre autre) l'"édition" / "aperçu",... des pages
4/ En mode "édition",

des onglets (en haut) permettent d'afficher la page "vue" ou les codes ("Source HTML")
des onglets (en bas) permettent de modifier/ajouter des textes / images / liens / ...

Bon.

Après essai(s), le mode "Edition" n'est pas terrible :

les style CSS (dans le <head>) ne sont pas pris en compte (les icônes s'affichent SOUS l'image).
-> Il ne le sont que dans le mode "Aperçu".

C'est un peu génant...

=> à toi de tester

**PoppyGuy** · 29/09/2016, 16h15

Je regarde ça

**PoppyGuy** · 29/09/2016, 17h25

Je souhaiterais ajouter une image Humidite1 (sur l'écran).

Dans un premier temps :
1) Dans la partie css, j'ai ajouté :

Code :

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

1
2
3
4
5
}
 
.Bloc-Stats img.ico-Humidite1 {
top: 274px;
left: 476px;

2) J'ai crée une image "Humidite1.png"

Pourquoi, je ne vois pas l'image sur la page
Je voudrais faire la même chose pour "Temperature1"

Invité · 29/09/2016, 18h06

Et quel est le code HTML associé ?

Important : une "petite image" s'appelle une icône.

**PoppyGuy** · 29/09/2016, 19h10

Mais c'est bien-sûr suis-je bête !!!

J'ai tout simplement oublié de mettre le code html correspondant, c'est mieux comme ça, je vois "l'icône" (ça fonctionne)

Merci encore de ton aide.
Cordialement

**PoppyGuy** · 30/09/2016, 11h08

Bonjour,
Je vais pouvoir mettre le post en résolu, et grâce à toi.
Si j'ai quand même d'autres questions, pourrais-je quand même les mettre sur ce message ou faire un autre post
Merci de ton aide
Cordialement

Invité · 30/09/2016, 12h01

Bonjour,

puisque cette discussion est résolue, le mieux sera d'en ouvrir une nouvelle.

Mettre des images pardessus une autre image dans mon site

HTML

Discussions similaires

Partager

Partager