z-index = 99 sur bakckground image impossible par DavidBouhaben - page 1

Bonjour.
Je viens de rencontrer un problème. Je voudrais mettre la classe menu-open-mobile par dessus de header avec le background image pour le cacher complétement mais je n'arrive pas appliquer l z-index, je sais que le z-index fonctionne uniquement avec position.
Ce que j'ai fait est tout simplement mettre le z-index: 99; et position: fixe; dans la classe menu-open-mobile pour quil puisse se mettre au dessus de la classe header et donc de cacher header complétement.mais cela ne fonctionne pas. J'ai essayé aussi de faire autrement donc de mettre z-index: -99; et position: fixed; dans la classe header pour tout simplement le mettre en dessous de la classe meny-open-mobile mais ca aussi, ca ne fonctionne pas. Pouvez vous m’aider s'il vous plait et me débloquer s'il vous plait

Voici mon html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,900i"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/public/css/style.css" />
    <title>David Bouhaben ePortofolio</title>
  </head>
  <body>
    <div class="loading--circle loading--full-hight">
      <div class="loading--box loading--full-hight"></div>
    </div>
    <div class="wrapper menu-open-mobile">
      <div class="wrapper-logo">
        <header class="header">
          <div id="home" class="wellcome logo-container">
            <h1 class="header__logo"><a href="/index.html"><img src="./public/image/Logo-david-bouhaben.png" alt="Logo David Bouhaben"></a></h1>
            <div class="container-hamburger">
            <button class="hamburger-toggle">
              <span class="bar-top"></span>
              <span class="bar-mid"></span>
              <span class="bar-bot"></span>
            </button>
            <nav class="nav">
              <ul>
                <li class="nav__link nav__link--active">Home</li>
                <li class="nav__link"><a href="/about.html">About</a></li>
                <li class="nav__link"><a href="/contact.html">Contact</a></li>
              </ul>
            </nav>
            </div>
          </div>
        </header>
        </div>
      </div>

    </div>
    <script src="./public/JS/loading.js"></script>
    <script src="./public/JS/hamburger.js"></script>
  </body>
</html>

Voici mon css pour menu open mobile

.menu-open-mobile {
  @include media(mobile) {
    background-color: rgba(0, 0, 0, 0.9);
    height: 100%;
    position: fixed;
    z-index: 99;
    width: 100%;
    display: block;

  }
  .nav {
    @include media(mobile) {
      display: none;
    }
  }
}

et le header

.wrapper-logo {
  height: 500px;
  .header {
    width: 100%;
    height: 400px;
    background: url(../../public/image/coffee-header.jpg);
    // background-color: red;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    // position: relative;
    // z-index: -99;
    .wellcome {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 90%;
      position: relative;
      margin: auto;
      bottom: 10%;
    }
    .logo-container {
      height: 200px;
      text-align: center;
    }
    img {
      height: 100%;
      width: 100px;
    }
  }
}

Voici la page

Lamecarlate a écrit:

Bonjour,

peux-tu donner le CSS généré et non le Less/SASS/Stylus/autre ? Afin qu'on puisse copier ton code et le tester de notre côté.

Oui biensur,
Voici mon github pour mon projet : https://github.com/Darkheadbanger/DavidBouhaben_personal_project_CV_ePortofolio
voici le css

@keyframes loading--spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading--exit {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  background: #001534;
}
@media (max-width: 576px) {
  body {
    background: white;
  }
}

body {
  font-family: "Roboto", sans-serif;
  color: #15dea5;
  font-size: 2rem;
  font-weight: 100;
  line-height: 1.7;
}

h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: 5rem;
  font-style: italic;
}

textarea {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-size: 2rem;
}

button {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 2.75rem;
}

.container-hamburger {
  padding: 0;
}
.container-hamburger .hamburger-toggle {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
@media (max-width: 576px) {
  .container-hamburger .hamburger-toggle {
    visibility: visible;
  }
}
.container-hamburger .hamburger-toggle:focus {
  outline-width: 0;
}
.container-hamburger .hamburger-toggle [class*=bar-] {
  background: #3bc1b0;
  display: block;
  transform: rotate(0deg);
  transition: 0.2s ease all;
  border-radius: 14px;
  height: 5px;
  width: 34px;
  margin-bottom: 6px;
}
.container-hamburger .hamburger-toggle .bar-bot {
  margin-bottom: 0;
}
.container-hamburger .opened .bar-top {
  transform: rotate(45deg);
  transform-origin: 2px 3px;
}
.container-hamburger .opened .bar-mid {
  opacity: 0;
}
.container-hamburger .opened .bar-bot {
  transform: rotate(-45deg);
  transform-origin: 0px 3px;
}

.loading--circle {
  display: flex;
  justify-content: center;
}
.loading--circle .loading--box {
  display: flex;
  justify-content: center;
}
.loading--circle .loading--box .percentage {
  color: white;
  font-size: medium;
  font-weight: 900;
  align-items: center;
  position: absolute;
}
@media (max-width: 576px) {
  .loading--circle .loading--box .percentage {
    color: black;
    font-size: medium;
    font-weight: 900;
    align-items: center;
    position: fixed;
  }
}
.loading--circle .loading--full-hight {
  align-items: center;
  position: fixed;
  /* or absolute */
  top: 25%;
  left: 45%;
}
@media (max-width: 576px) {
  .loading--circle .loading--full-hight {
    top: 25%;
    left: 45%;
  }
}
.loading--circle .loading--box::before {
  content: "";
  width: 70px;
  height: 70px;
  border: 10px solid #6c51a4;
  border-radius: 25%;
  transform: rotate(0.16turn);
  animation: loading--spin 1s ease infinite;
}
@media (max-width: 576px) {
  .loading--circle .loading--box::before {
    width: 70px;
    height: 70px;
    border-radius: 25%;
  }
}

.loading--circle::after {
  content: "";
  width: 60px;
  height: 60px;
  border: 10px solid #6c51a4;
  border-top-color: #2f435c;
  border-radius: 50%;
  transform: rotate(1turn);
  animation: loading--spin 0.3s ease infinite;
}
@media (max-width: 576px) {
  .loading--circle::after {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}

.loading--full-hight {
  align-items: center;
  position: fixed;
  /* or absolute */
  top: 25.5%;
  left: 46.5%;
}
@media (max-width: 576px) {
  .loading--full-hight {
    top: 25.5%;
    left: 46.5%;
  }
}

.wrapper-logo {
  height: 500px;
}
.wrapper-logo .header {
  width: 100%;
  height: 400px;
  background: url(../../public/image/coffee-header.jpg);
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}
.wrapper-logo .header .wellcome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  position: relative;
  margin: auto;
  bottom: 10%;
}
.wrapper-logo .header .logo-container {
  height: 200px;
  text-align: center;
}
.wrapper-logo .header img {
  height: 100%;
  width: 100px;
}

@media (max-width: 576px) {
  .menu-open-mobile {
    background-color: rgba(0, 0, 0, 0.9);
    height: 100%;
    position: fixed;
    z-index: 99;
    width: 100%;
    display: block;
  }
}
@media (max-width: 576px) {
  .menu-open-mobile .nav {
    display: none;
  }
}

/*# sourceMappingURL=style.css.map */

Voici le JS pour le hamburger.js

// C'st une fonctione qui appelle lui même
(() => {
  // Je dois pointer vers la classe hamburger
  let hamburgerBtn = document.querySelector(".hamburger-toggle");

  // Je dois créer un evenement cloique qui va communiuqer avec la classe hamburger toggle pour ensuite lui dire d'exectuer le css pour qu'il deviens X
  hamburgerBtn.addEventListener("click", function () {
    let open = this.classList.toggle("opened");
    console.dir(open);
  });
})();

JS pour le loading spinner

// Creation des variables
// Ca ne fonctionne pas, il faut ajouter updateProgress en bas
let pageState = null;
let ProgressPercentage = null;
let animationInterval = 33;

// Creation d'un evenement, une fois que l'evenement du téléchargement de la page est complet (document.readyState == complete) alors on dit que l'état de la page est complet
window.document.addEventListener(
  "readystatechange",
  () => {
    if (document.readyState == "complete") {
      pageState = "complete";
    }
  },
  false
);

function updateProgress() {
  if (pageState == "complete" && ProgressPercentage != null) {
    document.querySelector(".percentage").textContent = "100%";
    document.querySelector(".wrapper").style.display = "none";
    setTimeout(() => {
      // Si le pourcentage arrive à 100% alors on efface la page et on remet une autre page
      document.querySelector(".loading--circle").style.display = "none";
    }, 700);
    setTimeout(() => {
      document.querySelector(".wrapper").style.display = "";
    }, 700);
  } else {
    if (ProgressPercentage == null) {
      ProgressPercentage = 1;
      ProgressPercentage = ProgressPercentage + 1;
    }
    if (ProgressPercentage >= 0 && ProgressPercentage <= 30) {
      animationInterval += 1;
      document.querySelector(".percentage").textContent =
        ProgressPercentage + "%";
    } else if (ProgressPercentage > 30 && ProgressPercentage <= 60) {
      animationInterval += 2;
      console.log("passe2");
      document.querySelector(".percentage").textContent =
        ProgressPercentage + "%";
    } else if (ProgressPercentage > 60 && ProgressPercentage <= 80) {
      animationInterval += 3;
      document.querySelector(".percentage").textContent =
        ProgressPercentage + "%";
    } else if (ProgressPercentage > 80 && ProgressPercentage <= 90) {
      animationInterval += 4;
      document.querySelector(".percentage").textContent =
        ProgressPercentage + "%";
    } else if (ProgressPercentage > 90 && ProgressPercentage <= 95) {
      animationInterval += 80;
      document.querySelector(".percentage").textContent =
        ProgressPercentage + "%";
    } else if (ProgressPercentage > 95 && ProgressPercentage <= 99) {
      animationInterval += 150;
      document.querySelector(".percentage").textContent =
        ProgressPercentage + "%";
    } else if (ProgressPercentage >= 100) {
      document.querySelector(".percentage").textContent = "99%";
    }
    setTimeout(updateProgress, animationInterval);
  }
}

let intervalObject = setInterval(() => {
  // Si le body different de undefined
  let elementBody = document.querySelector("body");
  let elementLoadingCircle = elementBody.querySelector(".loading--circle");
  let elementLoadingBox = elementLoadingCircle.querySelector(".loading--box");
  let percentageDiv = document.createElement("div");
  percentageDiv.className = "percentage";
  percentageDiv.textContent = "0%";
  if (elementBody != undefined) {
    setTimeout(() => {
      clearInterval(intervalObject);
      elementLoadingBox.appendChild(percentageDiv);
      updateProgress();
    });
  }
}, 50);

DavidBouhaben

7 décembre 2021 à 16:17:50

Lamecarlate

7 décembre 2021 à 16:36:41

Bonjour,

peux-tu donner le CSS généré et non le Less/SASS/Stylus/autre ? Afin qu'on puisse copier ton code et le tester de notre côté.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

7 décembre 2021 à 18:07:59

z-index = 99 sur bakckground image impossible

Supprimer

Modérer

Signaler le message aux modérateurs