Diaporama HTML CSS [Fermé]

Signaler
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019
-
Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
-
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-apprendre-coder-cours/creation-diaporama/

4 réponses

Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617
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.
3
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 59496 internautes nous ont dit merci ce mois-ci

Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617
Et une 11eme question /remarque....
Pense à nous coller ton code (tel que tu l'as écrit) et en utilisant les balises de code.
Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617
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
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

Pour les images il faut créé un nouveau fichier HTML "img" avec des balises id
Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617 >
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

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....)
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019
>
Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020

Je l'ai fais ça fonctionne, mais comment remplacer le rectangle (paysage) noir, en carré (portrait) (dimension du smartphone)
Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617
Tu peux jouer avec les attributs height et width.
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

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-apprendre-coder-cours/creation-diaporama/

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");}
}
Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617
Tu n'as pas répondu à toutes mes questions.....
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

Tu peux déjà m'aider sur ça ? Comme pour les images où, combien et comment les mettre pour le diaporama.
Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617
Ben tu places tes images dans ke répertoire indiqué du scrip... imgs et tu les nommes pareils...
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

c'est ce que j'ai fais mais sa ne marche pas
Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617 >
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

On en revient donc à mes dix questions (ou 11 ) ....
Donc commence par y répondre point par point....
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

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");}
}