Partage
  • Partager sur Facebook
  • Partager sur Twitter

Diaporama fond d'écran ne fonctionne pas

15 juin 2021 à 17:33:10

Bonjour, je suis en train de m'arracher les cheveux (ceux qui restent), j'ai créé un diaporama d'arrière fond pour un site que je suis en train créé, il fonctionne très bien quand je l'utilise sous wamp et je charge les mêmes fichiers sur mon hébergeur et quand je vérifie le bon fonctionnement, le diaporama ne fonctionne plus, est-ce quelqu'un peu m'aider. Merci d'avance.

/* Définition des polices fournies par Rénovation Laguillon */

@font-face
{
    font-family: 'contbold';src:url('fonts/contb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'contmedium';src:url('fonts/contm.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'contlight';src:url('fonts/contl.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Eléments principaux de la page */



body{background-color: #fff;font-family: 'contbold', Arial, sans-serif;color: #cc6600height: 100vh;background-position: center center;background-size: cover;background-repeat: no-repeat;backface-visibility: hidden;animation: slideBg 18s linear infinite 5s;animation-timing-function: ease-in-out;background-image: url('../diapo/1.jpg');}

#bloc_page{width: 100%;margin: auto;}

section h1, footer h1, nav a{font-weight: normal;text-transform: uppercase;}

/* Header */

header{display: flex;justify-content: space-between;align-items: flex-end;width: 100%;position: fixed;height: 100px;top: 0;left: 0;background-color: rgba(000, 000, 000, 0.4);}

#titre_principal{display: flex;flex-direction: column;}

#logo{display: flex;flex-direction: row;align-items: baseline;width: 100px;height: 100px;float: right;}

#logo img{width: 100%;height: 100%;}

/* Navigation */
nav{width: auto;margin: 0 auto;margin-top: -20%;padding-bottom: 24px;}

nav ul{list-style-type: none;display: flex;}

nav li{margin-right: 15px;}

nav ul li {
    display: inline;
        list-style-type: circle;
}

nav a{font-size: 1.3em;color: #fff;text-decoration: none;font-size: 2.1em;text-shadow: 2px 2px 4px black;}

nav a:hover{color: #cc6600;border-bottom: 3px solid #cc6600;}



/* diaporama fond ecran */

/*#carroussel{width: 100%;height: 100vh;background-position: center center;background-size: cover;background-repeat: no-repeat;backface-visibility: hidden;animation: slideBg 18s linear infinite 5s;animation-timing-function: ease-in-out;background-image: url('../diapo/1.jpg');top: 0;left: 0;}*/
@keyframes slideBg{

     0%{background-image: url('../diapo/1.jpg');background-size: cover;}

    25%{background-image: url('../diapo/2.jpg');background-size: cover;}

    50%{background-image: url('../diapo/3.jpg');background-size: cover;}

    75%{background-image: url('../diapo/4.jpg');background-size: cover;}

    100%{background-image: url('../diapo/5.jpg');background-size: cover;}
}

/* Position texte */
article{width: 600px;height: 375px; margin: 0 auto; margin-top: 115px;padding-left: 25px;padding-right: 25px;padding-top: 20px;padding-bottom: 20px;background-color: rgba(000, 000, 000, 0.4);overflow: auto;scrollbar-visibility: hidden;}
article p {width: 100%;margin: auto;font-family: contmedium;color: #fff;text-shadow: 2px 2px 4px black;font-size: 1.6em;text-align: justify;}

article::-webkit-scrollbar { 
    display: none;  /* Chrome Safari */
}
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
  overflow-y:scroll;
  overflow-x:hidden;
}

/* postion texte contact */
.contact p {width: 100%;margin: auto;font-family: contmedium;color: #fff;text-shadow: 2px 2px 4px black;font-size: 1.4em;text-align: left;}
.contact ul li{color: #fff;font-family: 'contlight'; font-size: 20px;}
.contact a{color : #cc6600;text-decoration: none;}
/* Format pied de page */
footer{position: fixed;width: 100%;text-align: center;margin-top: 30px;bottom: 0;height: 70px;clear:both;font-family: 'contlight';color: #fff;font-size: 12px;background-color: rgba(000, 000, 000, 0.4);left: 0;}
footer a{text-decoration: none;color: #2980B9;}



  • Partager sur Facebook
  • Partager sur Twitter
15 juin 2021 à 17:36:37

Bonsoir, quelle est l’URL de la page concernée?

  • Partager sur Facebook
  • Partager sur Twitter
15 juin 2021 à 18:25:22

Bonsoir, voici le lien du site provisoire : https://amiral-pc-test.000webhostapp.com/index.php
  • Partager sur Facebook
  • Partager sur Twitter
15 juin 2021 à 22:20:08

Bonsoir,  2.jpg  != 2.JPG 

Le serveur, qui tourne généralement sous Linux, c'est  pas comme sur Windows qui est trop permissif.  Le serveur est sensible à la casse , ce qui veux dire que si tu écris une majuscule pour une minuscule, le serveur ne trouve pas le fichier car c'est deux noms différents.

Tu peux voir que tu as des 404 en ouvrant l'onglet réseau des outils de développements (F12 sur la plupart des navigateur).

D'autre erreur en passent ton code au validateur

La balise <img> ne sort jamais sans son attribut alt obligatoire.

L53 on n'écrit pas de titre dans un paragraphe. A corriger.

  • Partager sur Facebook
  • Partager sur Twitter