Diaporama HTML CSS

MaxBMX17 Messages postés 67 Date d'inscription Statut Membre Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 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-apprendre-coder-cours/creation-diaporama/

Afficher la suite

A voir également:

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Et une 11eme question /remarque....
Pense à nous coller ton code (tel que tu l'as écrit) et en utilisant les balises de code.

Réponse 2 / 4

MaxBMX17 Messages postés 67 Date d'inscription Statut Membre Dernière intervention 1

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Tu n'as pas répondu à toutes mes questions.....

MaxBMX17 Messages postés 67 Date d'inscription Statut Membre Dernière intervention 1

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Ben tu places tes images dans ke répertoire indiqué du scrip... imgs et tu les nommes pareils...

MaxBMX17 Messages postés 67 Date d'inscription Statut Membre Dernière intervention 1

c'est ce que j'ai fais mais sa ne marche pas

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > MaxBMX17 Messages postés 67 Date d'inscription Statut Membre Dernière intervention

On en revient donc à mes dix questions (ou 11 ) ....
Donc commence par y répondre point par point....

Réponse 3 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 67 Date d'inscription Statut Membre Dernière intervention 1

Pour les images il faut créé un nouveau fichier HTML "img" avec des balises id

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > MaxBMX17 Messages postés 67 Date d'inscription Statut Membre Dernière intervention

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 67 Date d'inscription Statut Membre Dernière intervention 1 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

Je l'ai fais ça fonctionne, mais comment remplacer le rectangle (paysage) noir, en carré (portrait) (dimension du smartphone)

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Tu peux jouer avec les attributs height et width.

Réponse 4 / 4

MaxBMX17 Messages postés 67 Date d'inscription Statut Membre Dernière intervention 1

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

Discussions similaires

probleme CSS ne s'applique pas

Comment coder la taille des boutons coté html ?

"L'archive n'a pas pu être installée. Il manque le fichier style.css à ce

Mettre une opacity sur un background-image

Mettre mon loader seulement pour charger ma page

faire un menu horizontale

Votre réponse

Discussions similaires