Forum : problème d'affichage sur page HTML

Bonjour, sur mon code, lorsque la "deuxieme" page appartait, en enlevant les autres éléments et en n'en rajoutant des nouveaux, de multiples degradées se forme sur le footer. J'ai essayer plein de méthode, mais aucune n'a reussi a enlever cette erreur d'affichage, sauf enlever le dégradé 😉
voici ma page : leonard35200.github.io ( a voir en mode dev. pour afficher code, etc,...)
et sinon mon code entier qui est tres long, mais je suis oblige de le fournir en entier ,...

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Le tour de télépathie</title>
<style>

body {
    width: 100%;
    height: 100%;   
    margin: 0;
    padding: 0;
    font-family: sans-serif; 
    text-align: center; 
    background: linear-gradient(rgba(249, 252, 190, 0.66),rgba(187, 233, 243, 0.567)); 
    font-size: 22px; 
}

footer {
    font-size: 15px;
    margin-top: 20px;  /* Ajuste le margin-top si nécessaire */
    padding: 10px;

    width: 100%;
    text-align: center;
}

.grid {
    display: grid;
    gap: 10px;
    margin: auto;
    white-space: nowrap;
 }

 .cell {
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    min-width: 80px;
  }

.big-button {
margin-top: 20px;
padding: 15px 30px;
font-size: 15px;
background: none;
border: none;
cursor: pointer;
}
#titre {
    margin-top: 30px;
    color: #631c73;
}
#retour {
    display: none;

}
#balle {
    width: 100px;
    height: 100px;
    vertical-align: middle;
    margin-bottom: 21px;
}
footer{
    font-size: 15px;
}
.nombre, .smiley {
    display: inline;
    white-space: nowrap;
  }

  .smiley {
    margin-left: 4px;
  }

</style>
</head>
<body>
<h2 id="titre" >Le tour de télépathie</h2>
<p id="texte" >Choisis un nombre de deux chiffres. Soustrait lui, la somme de ses chiffres<br>
Trouve le symbole associé à ce nouveau nombre, retient le, et clique sur la boule magique.</p>

<div style="overflow-x: auto;">
    <div id="symbolGrid" class="grid"></div>
</div>

<button  class="big-button" onclick="reveal()">
    <img id="balle" src="balle-magique.png" alt="boule de cristal">
<br> Clique sur la boule magique !  
</button>
<div class="flex-container">
<h1 class="resultat"id="result" style="margin-top: 30px;"></h1>
</div>
<button class="resultat" id="retour" >Recommencer</button>

<audio id="musiqueBalle" src="musiqueBalle.mp3" preload="auto"></audio>
<script>
const symbolesDebut = [ "😀", "😁", "😂", "😇", "😉", "😊", "😋", "😌", "😍", "😎", "😏", "😑", "😒", "😓", "😕", "😖", "😘", "😜", "😞", "😟",  "😢", "😣", "😤", "😥", "😧", "😨", "😩", "😪", "😬", "😭", "😮", "😱", "😲", "😳", "😴", "😵", "😶", "🙁", "🙂", "🙃", "🙄"];
let symbolesFin = []
let secretSymbol = ""
const grid = document.getElementById("symbolGrid");

let largeurEcran = window.innerWidth;
console.log(largeurEcran);
let nombreColonnesDébut =  Math.floor(largeurEcran / 117);
let nombreColonnesFin = 0;
let listeColonnesPossibles = [4,5,7,11,12,13];

document.addEventListener('DOMContentLoaded', function() {smiley()});
document.addEventListener('DOMContentLoaded', function() {colonne(nombreColonnesDébut, listeColonnesPossibles)});
document.addEventListener('DOMContentLoaded', function() {test()});

function colonne(nombre, liste) {
    let plusProche = liste[0];
    let differenceMin = Math.abs(nombre - liste[0]);

    for (let i = 1; i < liste.length; i++) {
        let differenceActuelle = Math.abs(nombre - liste[i]);

        if (differenceActuelle < differenceMin || (differenceActuelle === differenceMin && liste[i] < plusProche)) {
            plusProche = liste[i];
            differenceMin = differenceActuelle;
        }
    }

    nombreColonnesFin = plusProche;
    console.log(nombreColonnesFin);
    grid.style.gridTemplateColumns = `repeat(${nombreColonnesFin}, 1fr)`;
}

function smiley(){
    while (symbolesFin.length < 10) {
       symboleProvisoire = symbolesDebut[Math.floor(Math.random() * symbolesDebut.length)];
       symbolesFin.push(symboleProvisoire)
       index = symbolesDebut.indexOf(symboleProvisoire);
       symbolesDebut.splice(index, 1);
    }
    secretSymbol = symbolesFin[Math.floor(Math.random() * symbolesFin.length)];
    console.log(symbolesFin)
}
function test (){
    for (let i = 0; i < 100; i++) {
        console.log(symbolesDebut)
        console.log(symbolesFin)
        const sym = (i % 9 === 0) ? secretSymbol : symbolesFin[Math.floor(Math.random() * symbolesFin.length)];
        const div = document.createElement("div");
        div.className = "cell";
        div.innerHTML = `<span class="nombre">${i}:</span><span class="smiley">${sym}</span>`;
        grid.appendChild(div);
    }
}
function reveal() {
    document.getElementById("titre").style.display = "none";
    document.getElementById("texte").style.display = "none";
    document.getElementById("symbolGrid").style.display = "none";
    document.querySelector(".big-button").style.display = "none";
    document.getElementById("result").textContent = `Le symbole auquel tu penses est : ${secretSymbol}`;
    document.getElementById("retour").style.display = "block";
    document.getElementById("retour").onclick = function() {
        window.location.href = "télépathie.html";
    };

    document.getElementById("result").style.marginTop = "5%";
    var audio = document.getElementById("musiqueBalle");
    audio.play();
}

</script>
</body>
<footer class="footer">
    <p>&copy; 2025 Léonard Loquet. Tous droits réservés.</p>
    <a href="https://www.flaticon.com/fr/icones-gratuites/boule-de-cristal" title="boule de cristal icônes" >Boule de cristal icônes créées par Freepik - Flaticon</a>
</footer>
</html>

Merci a tous ceux qui sont venu jusqu'ici !!!

problème d'affichage sur page HTML

4 réponses