28106 sujets

CSS et mise en forme, CSS3

Bonsoir, 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;}


Voici le lien du site provisoire : https://amiral-pc-test.000webhostapp.com/index.php afin de visualiser le souci.
Modérateur
Et l'eau,

diapo/2.jpg
diapo/3.jpg
etc.

404 !
Meilleure solution
Le problème semble résolu.

Ce serait aimable de nous indiquer la solution et de marquer le sujet comme résolu.