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

HTML Discussion :

Mettre des images pardessus une autre image dans mon site


Sujet :

HTML

  1. #1
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut Mettre des images pardessus une autre image dans mon site
    Bonjour,
    Sur mon site :
    http://st-florent-meteo-clopiniere.akeonet.com/
    il y a trois images représentant une station météo.
    Je souhaiterais mettre à la place des petites images grises (dans les carrés), les images cliquables de couleur qui sont en dessous.
    Et la même chose sur les images grises en ligne au bas de la station.
    Mais je ne sais pas comment faire.

    Pour l'instant, j'ai mis les petites images cliquables entre les deux images de la station dans une ligne à part.
    Je ne mis connais pas trop en informatique, mais avec un modèle et des explications, je dois pouvoir m'en sortir.

    Voici les petites images :
    Nom : Terre_Station.png
Affichages : 138
Taille : 2,0 Ko Nom : Pluie_Station.png
Affichages : 140
Taille : 1,9 Ko Nom : Soleil_Station.png
Affichages : 147
Taille : 2,1 Ko Nom : Horloge_Station.png
Affichages : 134
Taille : 2,1 Ko Nom : Temperature_Station.png
Affichages : 136
Taille : 833 octets Nom : Humidite_Station.png
Affichages : 138
Taille : 1,2 Ko Nom : Vent_Station.png
Affichages : 141
Taille : 1,5 Ko Nom : Graphique_Station.png
Affichages : 136
Taille : 1,7 Ko

    Voici l'arborescence de mon site sur mon PC :
    Nom : Arborescence PC.JPG
Affichages : 152
Taille : 13,8 Ko

    Voici les fichiers qui constituent ma page d'accueil :
    Nom : Dossier M_C.JPG
Affichages : 148
Taille : 43,8 Ko

    Voici le code actuel de ma page d'accueil :
    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
    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
    <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">
    <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>
    </head>
    <body
    style="color: white; background-color: rgb(0, 51, 153); width: 1450px;"
    alink="#33ff33" link="#dcd296" vlink="#dcd296">
    <h1 style="text-align: center; width: 1450px;"><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"
    -&nbsp; "La Clopinière" - "La Sicaudière"</h1>
    <h2 style="text-align: center; width: 1450px;">Commune des "Rives de
    L'Yon"</h2>
    <div style="text-align: center;"><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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br>
    </div>
    <br>
    <div style="text-align: center; width: 1450px;">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&nbsp; 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 style="text-align: center; width: 1450px;">
    <!-- 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 style="text-align: center; width: 1450px;"><img
    style="width: 800px; height: 200px;" alt="Septembre"
    src="Septembre.jpg"><br>
    <br>
    <div style="text-align: center;">
    <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp;
    <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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 style="width: 1450px;"><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img
    style="width: 650px; height: 350px;"
    alt="Précipitations et Statistiques" src="Precipitations.jpg"><br>
    <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>
    <h2><br>
    </h2>
    <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>
    <h2><br>
    </h2>
    <img style="width: 792px; height: 548px;" alt="Station mois"
    src="WMR200_Mois_Excel.png"><br>
    <div style="text-align: left;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; Cliquer
    --&gt;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <a
    href="2016/Septembre/Pressions.html"><img
    style="border: 0px solid ; width: 30px; height: 30px;"
    alt="Icone Terre" src="Icones/Terre_Station.png"></a>
    &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <a
    href="2016/Septembre/Pluie.html"><img
    style="border: 0px solid ; width: 30px; height: 30px;"
    alt="Icone Pluie" src="Icones/Pluie_Station_Blanc.png"></a>
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a
    href="2016/Septembre/Soleil.html"><img
    style="border: 0px solid ; width: 30px; height: 29px;"
    alt="Icone Soleil" src="Icones/Soleil_Station.png"></a>&nbsp;&nbsp;
    &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<img
    style="width: 26px; height: 26px;" alt="Horloge"
    src="Icones/Horloge_Station.png">&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;<a
    href="2016/Septembre/Temperatures.html"><img
    style="border: 0px solid ; width: 13px; height: 30px;"
    alt="Icone Thermomètre" src="Icones/Temperature_Station.png"></a>&nbsp;&nbsp;
    &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; <a
    href="2016/Septembre/Humidite.html"><img
    style="border: 0px solid ; width: 19px; height: 30px;"
    alt="Icone Humidité" src="Icones/Humidite_Station.png"></a>
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; <a
    href="2016/Septembre/Vent.html"><img
    style="border: 0px solid ; width: 42px; height: 30px;" alt="Icone Vent"
    src="Icones/Vent_Station.png"></a>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
    &nbsp;&nbsp; &nbsp;&nbsp; <img style="width: 21px; height: 25px;"
    alt="Graphique" src="Icones/Graphique_Station.png"><br>
    </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><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<br>
    </big></big></h4>
    <big><big>
    <span style="text-decoration: underline;"></span><img
    style="width: 910px; height: 554px;" alt="Mois" src="Mois.png"><br>
    </big></big>
    <big><big><br>
    </big>
    </big>
    <h4><big><big>Mini et Maxi du mois en cours<br>
    </big></big></h4>
    <big><big>
    <img style="width: 910px; height: 454px;" alt="Mini Maxi"
    src="Mini_Maxi.png"><br>
    </big></big>
    <br>
    <br>
    <br>
    <big><big>
    </big></big></div>
    </div>
    </div>
    </body>
    </html>
    Merci de votre aide
    Cordialement

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1 solution :
    • mettre l'image principale + les icones dans un <div> en position:relative; ;
    • positionner sur l'image chaque icone avec position:absolute; top:....px; left:....px; ;



    Pour BIEN faire, il est préférable de :
    • mettre TOUT les styles CSS dans un fichier externe, OU dans la partie <head>, entre balises <style>
    • ajouter des id (unique) et/ou des class (multiples) sur les éléments HTML


    Si on suppose que toutes les grandes images sont les mêmes* (et donc que les icônes seront placées exactement aux mêmes positions)
    • on met une class "Bloc-Stats" sur le <div> englobant chaque série "grande image + icones associées"
    • chaque icone a une classe générique "ico" (pour les styles communs), et une class spécifique : "ico-Terre", "ico-Pluie", "ico-Soleil",... (class, car il peut y avoir plusieurs séries d'icone sur la page)
    • on positionne chaque icone à la place voulue par top:...px; left:...px; (coordonnées relatives au coin haut gauche de la grande image)


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="Bloc-Stats">
    	<img id="Station-Mois-image" alt="Station mois" src="WMR200_Mois_Excel.png">
     
    	<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>
    CSS dans la partie <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
    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
    .Bloc-Stats {
      position: relative;
      display: inline-block;
    }
     
    /* la 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: 30px;
      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) ... */

    * sinon, il faut identifier chaque bloc, et positionner chaque icone sur chaque image.
    Dernière modification par Invité ; 27/09/2016 à 09h31.

  3. #3
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut
    Bonjour,
    Merci de ta réponse rapide, je regarde ça dans la journée (avec mes connaissances, ça risque d'être un peu long), et te tiens au courant.

    Les 3 images de la station sont de la même taille, mais viennent de dossier différents.
    1) La 1ère "WMR200-2.jpg" vient du dossier "F:/GraphWeather/Stylesheets/Wmr200"
    2) La 2ème "WMR200_Mois_Excel.png" vient du dossier" Meteo_Clopiniere"
    3) La 3ème "WMR200_Année_Excel.png" vient du dossier "Meteo_Clopiniere"

    L'éditeur de mon site est "Kompozer"

    Cordialement

  4. #4
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut
    Bonsoir,
    1) J'ai Choisi une nouvelle feuille.
    2) J'ai copier le code
    3) J'ai inséré le css
    4) J'ai réussi à déplacer une image dans un carré.
    5) J'ai changé le nom de la 2ème grande image (c'est bon)

    Mais....
    1) Mes 2 grandes images sont placées complètement à gauche, je ne sais pas comment les bouger, elles ont l'air d'être centrées (d'après l'icône centré), mais elles ne le sont pas.
    2) J'ai un texte qui apparaît sur la page avant les boutons : style="text-decoration: underline;">

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Le code (CSS+ HTML) ?
    Une page en ligne ?

    Remarque : les codes que j'ai donné fonctionnent tel quel.
    Il suffisait de les copier-coller, et de compléter les coordonnées des autres icones.
    Dernière modification par Invité ; 28/09/2016 à 08h18.

  6. #6
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut
    Bonjour,
    C'est ce que j'ai fait, j'ai juste ajouté une icône dans css, et je l'ai déplacé.
    Voici le code de la page:
    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
    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
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
    <title>Essais Guy</title>
    <style>
    .Bloc-Stats {
    position: relative;
    display: inline-block;
    }
     
    /* la 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: 30px;
    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;
    }
     
    .Bloc-Stats img.ico-Graphique {
    top: 298px;
    right: 905px;
     
    }
    /* ... (et ainsi de suite) ... */
    </style>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
    <meta content="Guy" name="author">
    </head>
    <body style="color: white; background-color: rgb(0, 51, 153);"
    alink="#33cc00" link="yellow" vlink="#ff0000">
    <br>
    <br>
    <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>
    <h1 style="text-align: center; width: 1450px;"><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"
    -&nbsp; "La Clopinière" - "La Sicaudière"</h1>
    <h2 style="text-align: center; width: 1450px;">Commune des "Rives de
    L'Yon"</h2>
    <div style="text-align: center; width: 1450px;"><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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br>
    </div>
    <br>
    <div style="text-align: center; width: 1450px;">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&nbsp; 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 style="text-align: center; width: 1450px;">
    <!-- 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 style="text-align: center; width: 1450px;"><img
    style="width: 800px; height: 200px;" alt="Septembre"
    src="Septembre.jpg"><br>
    <br>
    <div style="text-align: center;">
    <div style="font-weight: bold;">
    <div style="text-align: right;"><a href="2016/Janvier/Pluie_Soleil.html"><span>
    <div class="Bloc-Stats"> <img id="Station-Mois-image"
    alt="Station mois" src="WMR200_Mois_Excel.png"> <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
    style="border: 0px solid ; width: 24px; height: 29px;"
    src="Icones/Graphique_Station.png" alt="Graphique"
    class="ico ico-Graphique"> </div>
    </span></a></div>
    <br>
    <br>
    <a href="2016/Janvier/Pluie_Soleil.html"><span>style="text-decoration:
    underline;"&gt;<img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Janvier"
    src="Icones/Bouton_Janvier.png"></span></a>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp;
    <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp; <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>
    <br>
    </div>
    <div style="text-align: left;" class="Bloc-Stats"> <img
    id="Station-Mois-image" alt="Station mois" src="WMR200_Annee_Excel.png">
    <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>
    </div>
    </div>
    </body>
    </html>
    Le problème, c'est que je n'ai pas la même chose entre la page dans mon éditeur et la page quand je clic dans l'explorateur sur le fichier.

    1) Quand j'ouvre avec "Kompozer", mes images sont à gauches.
    2) Quand je clic dans l'explorateur sur le fichier "Devoppez.html" les images sont à gauche

    Ouuppsss !!!, je viens de m'apercevoir que si je clic sur les petites images couleurs, j'ai bien la liaison avec les tableaux.
    Si je mets juste tes codes, ça fonctionne sauf que la station, n'est pas au milieu de la page

  7. #7
    Invité
    Invité(e)
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    /* ... (et ainsi de suite) ... */
    C'est là qu'il faut continuer pour les autres icones.

    [EDIT] Je viens de tester le code : http://codepen.io/jreaux62/pen/QKgvyv

    (voir l'image "Statistiques du Mois en cours")

    QUESTION : Les icones doivent être :
    • 1/ ALIGNEES dans la partie BASSE de l'image,
    • 2/ ou SUR les différentes cases de l'image (à coté des mots "Pression...", "Pluie...")

    ??
    (ce qui modifie les coordonnées à indiquer)

    1/ Alignées 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
    .Bloc-Stats {
    position: relative;
    display: inline-block;
    }
     
    /* la 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: 484px;
      left: 102px;
    }
     
    .Bloc-Stats img.ico-Pluie {
      top: 484px;
      left: 186px;
    }
     
    .Bloc-Stats img.ico-Soleil {
      top: 484px;
      left: 266px;
    }
     
    .Bloc-Stats img.ico-Horloge {
      top: 484px;
      left: 346px;
    }
     
    .Bloc-Stats img.ico-Thermometre {
      top: 484px;
      left: 434px;
    }
     
    .Bloc-Stats img.ico-Humidite {
      top: 484px;
      left: 514px;
    }
     
    .Bloc-Stats img.ico-Vent {
      top: 484px;
      left: 584px;
    }
     
    .Bloc-Stats img.ico-Graphique {
      top: 484px;
      left: 666px;
    }

    2/
    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
    .Bloc-Stats {
    position: relative;
    display: inline-block;
    }
     
    /* la 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-Graphique {
      top: 300px;
      left: 520px;
    }
    Dernière modification par Invité ; 28/09/2016 à 10h38.

  8. #8
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut
    Bonjour,
    Oui, là, j'ai tout compris.
    Ce que je ne comprend pas, c'est comment bouger l'image de la station, elle n'est pas au centre

  9. #9
    Invité
    Invité(e)
    Par défaut
    1/ Améliore l'INDENTATION du code (tabulations, passage à la ligne), pour MIEUX voir et corriger

    2/ Mets ton code en ligne.

    N.B. J'ai édité mon message précédent, avec les coordonnées de icones !

  10. #10
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut
    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
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
    <title>Essai2</title>
    <style>
    .Bloc-Stats {
    position: relative;
    display: inline-block;
    }
     
    /* la 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: 30px;
    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;
    }
    .Bloc-Stats img.ico-Humidite {
    top: 190px;
    left: 440px;
    }
     
    .Bloc-Stats img.ico-Vent {
    top: 94px;
    left: 515px;
     
    /* ... (et ainsi de suite) ... */
    </style>
    </head>
    <body style="color: white; background-color: rgb(0, 51, 153);"
    alink="#33cc00" link="yellow" vlink="#ff0000">
    <br>
    <div style="text-align: center;" class="Bloc-Stats"> <img
    id="Station-Mois-image" alt="Station mois" src="WMR200_Mois_Excel.png">
    <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>
    </body>
    </html>

  11. #11
    Invité
    Invité(e)
    Par défaut
    "en ligne" = sur ton serveur/site.

    Et tu n'as pas répondu à ma question.

  12. #12
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut
    Ma page est en ligne, en cliquant sur le bouton essais.
    Je regarde pour l'autre question, sur mon éditeur de site, je ne peux pas.

  13. #13
    Invité
    Invité(e)
    Par défaut
    Vu.

    Voilà ce qu'on trouve dans ton code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div style="text-align: center; width: 1450px;"><img style="width: 800px; height: 200px;" alt="Septembre" src="Septembre.jpg"><br>
    <br>
    <div style="text-align: center;">
     
    <div style="font-weight: bold;">
    <div style="text-align: right;"><a href="2016/Janvier/Pluie_Soleil.html"><span>
    <div class="Bloc-Stats">
    ...........
    Un tas de <div> qui ne servent à rien, sauf à mettre le souk dans la page...

    Il faut absolument y mettre de l'ordre !
    1. => supprimer les <div> et autre éléments inutiles (des <span> et <a...> pas fermés, mal placés,.........)
    2. => améliorer l'INDENTATION ! (le code est illisible, et donc très difficile à corriger)


    N.B. Je suppose que ce souk est généré automatiquement par Komposer.
    Si possible, il faut éditer le code, non sous forme "formaté", mais "Source"*, pour pouvoir modifier directement le code HTML/CSS

    *onglet en bas ! (j'ai téléchargé Komposer exprès pour toi ! )


    Notamment :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <h1 style="text-align: center; width: 1450px;">
    ...
    <div style="text-align: center; width: 1450px;">
    ...
    => il faut supprimer partout style="text-align: center; width: 1450px;" !

    Et mettre dans le CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    body {
     width:100%;
     max-width:1450px;
     margin:0 auto;
     text-align:center; 
    }
    Dernière modification par Invité ; 28/09/2016 à 12h29.

  14. #14
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Vu.
    *onglet en bas ! (j'ai téléchargé Komposer exprès pour toi ! )
    C'est drôlement sympa de ta part

    Si je supprime les balises, tout viens vers la gauche

  15. #15
    Invité
    Invité(e)
    Par défaut
    Voilà le code de ta page, correctement indenté : http://codepen.io/jreaux62/pen/QKgvyv
    à copier-coller tel quel.
    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
    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
    <!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">
     
    	<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; /* largeur maxi */
      margin:0 auto;
      text-align:center; /* tous les textes centrés */
      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: 484px;
      left: 102px;
    }
    .Bloc-Stats img.ico-Pluie {
      top: 484px;
      left: 186px;
    }
    .Bloc-Stats img.ico-Soleil {
      top: 484px;
      left: 266px;
    }
    .Bloc-Stats img.ico-Horloge {
      top: 484px;
      left: 346px;
    }
    .Bloc-Stats img.ico-Thermometre {
      top: 484px;
      left: 434px;
    }
    .Bloc-Stats img.ico-Humidite {
      top: 484px;
      left: 514px;
    }
    .Bloc-Stats img.ico-Vent {
      top: 484px;
      left: 584px;
    }
    .Bloc-Stats img.ico-Graphique {
      top: 484px;
      left: 666px;
    }
    /* ------------------ */
            </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>
    N.B. Je n'ai pas tout corrigé...
    Il y avait notamment des balises <big><big>...</big></big> (en double),....

  16. #16
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut
    Je ne vois plus les petites images

  17. #17
    Invité
    Invité(e)
    Par défaut
    SUR les statistiques du mois.

  18. #18
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    SUR les statistiques du mois.
    Si mais plus dans les carrés

  19. #19
    Invité
    Invité(e)
    Par défaut
    C'était ma question (à laquelle tu n'avais pas répondu).

    Là, les icones sont alignés dans la partie basse de l'image (là où il me semble être le plus ergonomique pour "penser à" cliquer dessus)

    Pour les mettre dans les "carrés", il suffit d'en modifier les coordonnées (top:...; left:...; )

    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
    /* 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;
    }
    Dernière modification par Invité ; 28/09/2016 à 14h34.

  20. #20
    Membre à l'essai Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 70
    Points : 24
    Points
    24
    Par défaut
    Les deux m'intéressent.

    Maintenant, je comprends le principe et la façon de faire, mais là, je ne comprends plus rein car je suis sur ma page PC de "Kompozer" je vois les petites images pas à leur place (je ne devrais pas avoir de problème pour les remettre).

    Mais, pour l'instant, je ne vois plus rien sur le site (au niveau des images de la station) ?
    Je cherche pourquoi.

    Edit : Effectivement, il y avait un problème de chemin

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. remplacer une image par une autre image
    Par artichaudd dans le forum Langage
    Réponses: 10
    Dernier message: 22/12/2010, 16h00
  2. [Liens] Image vers une autre image
    Par Arn°oO dans le forum Flash
    Réponses: 3
    Dernier message: 26/02/2008, 10h30
  3. Comment savoir si une image touche à une autre image ?
    Par Daniel_P dans le forum VB 6 et antérieur
    Réponses: 79
    Dernier message: 30/11/2007, 19h48
  4. Réponses: 3
    Dernier message: 06/02/2007, 12h04
  5. Mettre une image sur une autre image et tableau
    Par Michaël dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 19/06/2005, 19h31

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