Menu

Diaporama HTML CSS

Messages postés
17
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
25 novembre 2018
- - Dernière réponse : jordane45
Messages postés
23535
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2018
- 25 nov. 2018 à 21:08
Bonjour,

J'ai un projet "création d'un site web" en classe de Seconde, et j'aimerais insérer un diaporama.
Pouvez-vous m'aider, car j'ai recopier les codes mais cela ne fonctionne pas. Merci pour votre aide et vos réponses !
https://www.pierre-giraud.com/html-css/exercices-html-css/creation-diaporama-html-css.php
Afficher la suite 

Votre réponse

4 réponses

Meilleure réponse
Messages postés
23535
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2018
1
Merci
Bonjour,


1 - Tu as copié les code à quel(s) endroit(s) ?
2 - Quels morceaux du code exactement ?
3 - Où sont situés tes fichiers ?
4 - Où sont placées tes images ?
5 - Quelles noms ont tes images ?
6 - As tu vidé le cache de ton navigateur ?
7 - Qu'est-ce qui s'affiche à l'écran ?
8 - Utilises tu un serveur web (ou un logiciel sur ton ordi qui en simule un comme xampp/Uwamp/ Laragon / wamp/ Eaysyphp ? )
9 - Comment se nomment tes différents fichiers ?
10 - Quelle url tapes tu dans ton navigateur ?


Merci de répondre à TOUTES ces ( 10 ) questions afin que nous puissions essayer de t'aider.

Merci jordane45 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM a aidé 30916 internautes ce mois-ci

jordane45
Messages postés
23535
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2018
-
Et une 11eme question /remarque....
Pense à nous coller ton code (tel que tu l'as écrit) et en utilisant les balises de code.
Commenter la réponse de jordane45
Messages postés
17
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
25 novembre 2018
0
Merci
J'ai fais 2 fichiers, diaporama.html et diaporama.css

"Création d'un diaporama en HTML et en CSS avec passage des images en fondu"
https://www.pierre-giraud.com/html-css/exercices-html-css/creation-diaporama-html-css.php

Mes codes HTML et CSS sans URL images :

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Diaporama</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="diaporama.css">
    </head>  
 <body>
     <h1>Un diaporama en HTML et CSS</h1>
  <h2>Première méthode :</h2>
  <div class="diaporama1">
  
  </div>
 </body> 
</html> 


CSS :

body{
 margin: 0px;
 padding: 0px;
 width: 100%;
}
.diaporama1{
    margin: 0 auto;
 width: 960px; 
 height: 500px;
 border: 3px solid #333;
 background-image: url("imgs/image1.jpg");
 
 webkit-animation-name: diapo1;
 webkit-animation-duration: 9s;
 webkit-animation-timing-function: linear;
 webkit-animation-iteration-count: infinite;
 webkit-animation-direction: normal;
 
 moz-animation-name: diapo1;
 moz-animation-duration: 9s;
 moz-animation-timing-function: linear;
 moz-animation-iteration-count: infinite;
 moz-animation-direction: normal;
 
 animation-name: diapo1;
 animation-duration: 9s
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 animation-direction: normal;
}
@-webkit-keyframes diapo1{
    0%{background-image: url("imgs/image1.jpg");}
    33%{background-image: url("imgs/image2.jpg");} 
 66%{background-image: url("imgs/image3.jpg");}
}

@-moz-keyframes diapo1{
    0%{background-image: url("imgs/image1.jpg");}
    33%{background-image: url("imgs/image2.jpg");} 
 66%{background-image: url("imgs/image3.jpg");}
}

@keyframes diapo1{
    0%{background-image: url("imgs/image1.jpg");}
    33%{background-image: url("imgs/image2.jpg");} 
 66%{background-image: url("imgs/image3.jpg");}
}
jordane45
Messages postés
23535
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2018
-
Tu n'as pas répondu à toutes mes questions.....
MaxBMX17
Messages postés
17
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
25 novembre 2018
-
Tu peux déjà m'aider sur ça ? Comme pour les images où, combien et comment les mettre pour le diaporama.
jordane45
Messages postés
23535
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2018
-
Ben tu places tes images dans ke répertoire indiqué du scrip... imgs et tu les nommes pareils...
MaxBMX17
Messages postés
17
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
25 novembre 2018
-
c'est ce que j'ai fais mais sa ne marche pas
jordane45
Messages postés
23535
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2018
> MaxBMX17
Messages postés
17
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
25 novembre 2018
-
On en revient donc à mes dix questions (ou 11 ) ....
Donc commence par y répondre point par point....
Commenter la réponse de MaxBMX17
Messages postés
17
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
25 novembre 2018
0
Merci
1) J'ai copié les codes HTML et CSS dans les fichiers : diaporama.html et diaporama.css
2) J'ai copié le code entier pour ""Création d'un diaporama en HTML et en CSS avec passage des images en fondu"
3) Mes fichiers diaporama.html et diaporama.css sont situés dans le Notepad
4) Je n'est pas placé d'images, je n'arrive pas, cela ne fonctionne pas
7) Un rectangle s'affiche, les images doivent apparaître à l'interieur en fondu
8) J'utilise Notepad, puis Chrome
9) diaporama.html et diaporama.css

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Diaporama</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="diaporama.css">
    </head>  
 <body>
     <h1>Un diaporama en HTML et CSS</h1>
  <h2>Première méthode :</h2>
  <div class="diaporama1">
  
  </div>
 </body> 
</html> 


CSS :

body{
 margin: 0px;
 padding: 0px;
 width: 100%;
}
.diaporama1{
    margin: 0 auto;
 width: 960px; 
 height: 500px;
 border: 3px solid #333;
 background-image: url("imgs/image1.jpg");
 
 webkit-animation-name: diapo1;
 webkit-animation-duration: 9s;
 webkit-animation-timing-function: linear;
 webkit-animation-iteration-count: infinite;
 webkit-animation-direction: normal;
 
 moz-animation-name: diapo1;
 moz-animation-duration: 9s;
 moz-animation-timing-function: linear;
 moz-animation-iteration-count: infinite;
 moz-animation-direction: normal;
 
 animation-name: diapo1;
 animation-duration: 9s
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 animation-direction: normal;
}
@-webkit-keyframes diapo1{
    0%{background-image: url("imgs/image1.jpg");}
    33%{background-image: url("imgs/image2.jpg");} 
 66%{background-image: url("imgs/image3.jpg");}
}

@-moz-keyframes diapo1{
    0%{background-image: url("imgs/image1.jpg");}
    33%{background-image: url("imgs/image2.jpg");} 
 66%{background-image: url("imgs/image3.jpg");}
}

@keyframes diapo1{
    0%{background-image: url("imgs/image1.jpg");}
    33%{background-image: url("imgs/image2.jpg");} 
 66%{background-image: url("imgs/image3.jpg");}
}
Commenter la réponse de MaxBMX17
Messages postés
23535
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2018
0
Merci
Répondre à toutes les questions... ce n'est pas ton fort....
J'avais indiqué 10 questions.. tu n'as répondu qu'à 7...
Mais bon.. ça devrait suffire.

Donc :


Mes fichiers diaporama.html et diaporama.css sont situés dans le Notepad

Tu les "ouvres" / "edites" / "Visualises" dans notepad... mais ce n'est pas leur emplacement.... !
Donc...Tu les as enregistrés sur ton disque dur.... dans quel endroit ?


4) Je n'est pas placé d'images, je n'arrive pas, cela ne fonctionne pas

Les placer où ????
Car il suffit que tu créés un dossier "imgs" au même niveau que des fichiers ... et que tu y mettes les images en question.
Images qui auront comme noms ceux indiqués dans le fichier css :
image1.jpg image2.jpg image3.jpg
MaxBMX17
Messages postés
17
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
25 novembre 2018
-
Pour les images il faut créé un nouveau fichier HTML "img" avec des balises id
jordane45
Messages postés
23535
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2018
> MaxBMX17
Messages postés
17
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
25 novembre 2018
-
Qu'est-ce que tu racontes ???? un nouveau fichier html "img" ???
Tu as lu ce que je t'ai marqué ?
Tu sais ce qu'est un "dossier" ? ( un répertoire si tu préfères....)
MaxBMX17
Messages postés
17
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
25 novembre 2018
> jordane45
Messages postés
23535
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2018
-
Je l'ai fais ça fonctionne, mais comment remplacer le rectangle (paysage) noir, en carré (portrait) (dimension du smartphone)
jordane45
Messages postés
23535
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 décembre 2018
-
Tu peux jouer avec les attributs height et width.
Commenter la réponse de jordane45