Diaporama HTML CSS

Question

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/

jordane45 · Accepted Answer

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.

MaxBMX17 · Answer

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 : Diaporama

Un diaporama en HTML et CSS

Première méthode :

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

MaxBMX17 · Answer

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 : Diaporama

Un diaporama en HTML et CSS

Première méthode :

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 · Answer

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

Diaporama HTML CSS

4 réponses

Discussions similaires

Newsletters