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 l'arborescence de mon site :
Voici les fichietrs qui sont forment la page d'accueil
Voici le code qui fait ma page d'accueil :
<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"
- "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>
<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 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> <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 style="width: 1450px;"><br>
<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;">
Cliquer
--> <a
href="2016/Septembre/Pressions.html"><img
style="border: 0px solid ; width: 30px; height: 30px;"
alt="Icone Terre" src="Icones/Terre_Station.png"></a>
<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>
<a
href="2016/Septembre/Soleil.html"><img
style="border: 0px solid ; width: 30px; height: 29px;"
alt="Icone Soleil" src="Icones/Soleil_Station.png"></a>
<img
style="width: 26px; height: 26px;" alt="Horloge"
src="Icones/Horloge_Station.png">
<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>
<a
href="2016/Septembre/Humidite.html"><img
style="border: 0px solid ; width: 19px; height: 30px;"
alt="Icone Humidité" src="Icones/Humidite_Station.png"></a>
<a
href="2016/Septembre/Vent.html"><img
style="border: 0px solid ; width: 42px; height: 30px;" alt="Icone Vent"
src="Icones/Vent_Station.png"></a>
<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
12 réponses
Salut,
Il va falloir utiliser les positions absolute et relative.
Le tuto de Graph' pourra t'aider = Le positionnement en CSS
Bon courage
Salut,
Il faut avouer que le site n'est pas très attrayant. On ne comprend pas trop quelles informations tu souhaites mettre en avant.
Cela dit, en ce qui concerne ton problème, je pense que tu peux suivre le conseil de @MrCastor et regarder le tuto qu'il te propose.
En gors, il faut jouer avec le positionnement absolue / relatif de tes éléments que tu souhaites superposer.
Bonsoir,
Vous avez raison, mais bon.....
Mon site sert juste à faire des statistiques, pour les agriculteurs du coin.
Je mets le temps actuel avec les premières images (quand, j'ai le temps) avec les données fournies par mon logiciel "GraphWeather" qui les mets directement sur le site :
L'ensoleillement, les précipitation (quand il y en a) et les données de la première station (la mienne).
Les autres sont des données et des images que je fais sur Excel et que je transpose sur la page d'accueil
Si je pouvais cliquer sur chaque image, j'obtiendrais les tableaux qui correspondent, je pourrais enlever les images grises et mettre de la couleur, mais tant que je ne sais pas......
S'il faut que j'apprenne le CSS pour si peu, je pense en avoir pour des mois.
Attention, je ne suis qu'un humble amateur, je n'ai pas de prétention (c'est un loisir).
En attendant, merci de me répondre, d'avoir des conseils et des critiques, c'est comme ça que l'on fait avancer le "chmilblique ..."
Juste un petit conseil, le mieux est de séparer le html du css (style).
Pour cela tu créer un fichier style.css (que tu mets à la racine du site, plus simple dans un premier temps ;) )
dans ton fichier html, tu fais une liaison entre les balises head
<link href="style.css" rel="stylesheet">et ensuite pour chaque élément tu ajoute un ID ou une class. Un ID permet de séléctionner un seul élément et les Class permettent d'appliquer des propriétés (css, js etc...) à plusieurs éléments
du coup la partie html
<p id="texte">Hello</p>
<li class="lien">Lien1</li>
<li class="lien">Lien2</li>
<li class="lien">Lien3</li>partie css
#texte{ color: #000 } //là je cible la balise <p> je lui applique une couleur
.lien { color: red } // là je cible les balises <li> je leur applique une couleurJe t'ais fait un bout de ton code pour que tu comprenne mieux.
Attention, innutile de mettre plusieurs <br> pour avoir un espace entre 2 éléments, utilise plutôt margin et padding (base css)
bout de code html (Comme tu peux le voir, un élément peut avoir plusieurs class, celles-ci seront séparé par un espace)
<!DOCTYPE html>
<html lang="fr">
<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">
<!-- LIAISON STYLE CSS-->
<link href="style.css" rel="stylesheet">
</head>
<body class="white" alink="#33ff33" link="#dcd296" vlink="#dcd296">
<h1 class="text-center w-1450">
<span id="title-m">M</span>
<span class="color-green-1">é</span>
<span id="title-t">t</span>
<span id="title-e2">é</span>
<span id="title-o">o</span> "St Florent des bois" - "La Clopinière" - "La Sicaudière"
</h1>
<h2 class="text-center w-1450">Commune des "Rives de L'Yon"</h2>
<div class="text-center">
<a href="mailto:st-florent-meteo-clopiniere@akeonet.com">
<img id="messagerie" alt="Messagerie" src="Icones/Messagerie.gif">
</a><br>
</div>
<div class="text-center w-1450">Relevés météo avec une station amateur "Oregon WMR200" placée à "La Clopinière"<br>
<strong class="yellow">Il y a la possibilité de voir les relevés effectués depuis 2011</strong><br>
<span class="color-green-1">Pressions - Températures - Hauteur de pluie - Vitesse de Vent - Heures de Soleil</span><br>
<span class="white"></span><br>
<span class="yellow">La date et l'heure de la station ci-dessous indique la dernière mise à jour</span><br>
</div>
<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>
</body>
</html>fichier css
body {
background-color: rgb(0, 51, 153);
}
.w-1450{
width: 1450px;
}
/*span du titre h1*/
#title-m {
color: red;
}
.color-green-1 {
color: rgb(51, 255, 51);
}
#title-t {
color: rgb(255, 255, 51);
}
#title-e2 {
color: rgb(102, 255, 255);
}
#title-o {
color: rgb(204, 51, 204);
}
/**/
.text-center {
text-align: center;
}
#messagerie {
border: 0px solid ;
width: 50px;
height: 39px;
}
.yellow {
color: yellow;
}
.white {
color: white;
}Ce n'est pas le sujet mais c'est un minimum, avec l'indentation, tu es sûr de ne pas oublier les balises fermante !
Lorsque je parlais de l'horreur, je parlais du code ^^. Pour le site chacun ses goût mais pour ceux qui n'ont pas lâme d'un graphiste, penchez vous sur bootsrtrap ou materialize ça fera le job
ah ok donc en fait c'est pas toi qui écris le code ??? tu utilise l'interface pour placer tes image etc...?