Search code examples
htmlcssbuttonoverlapping

Section is covering my button etc in html?

I was trying to do a memory game in html, css and java. I made the button, a timer, and counter for clicks. They disappear when I made my "game section"

I cant figure out how to make it not overlap.. Well Im guessing that is what it is doing. And I cant change the background from black, I have tried html tag etc but cant figure it out. Never had this problem before while making a website etc before.

Html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Memory Game</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="game">
        <div class="controls">
            <button>Start</button>
            <div class="Stats">
                <div class="moves">0 clicks</div>
                <div class="timer">Tid : 0 sek</div>
            </div>
        </div>
  <section class="memory-game">
    <div class="memory-card" data-framework="char-01">
      <img class="front-face" src="img/char-01.png" alt="char-01" />
      <img class="back-face" src="img/guess.png" alt="guess" />
    </div>
    <div class="memory-card" data-framework="char-01">
        <img class="front-face" src="img/char-01.png" alt="char-01" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>

      <div class="memory-card" data-framework="char-02">
        <img class="front-face" src="img/char-02.png" alt="char-02" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-02">
        <img class="front-face" src="img/char-02.png" alt="char-02" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>

      <div class="memory-card" data-framework="char-03">
        <img class="front-face" src="img/char-03.png" alt="char-03" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-03">
        <img class="front-face" src="img/char-03.png" alt="char-03" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>

      <div class="memory-card" data-framework="char-04">
        <img class="front-face" src="img/char-04.png" alt="char-04" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-04">
        <img class="front-face" src="img/char-04.png" alt="char-04" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>

      <div class="memory-card" data-framework="char-05">
        <img class="front-face" src="img/char-05.png" alt="char-05" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-05">
        <img class="front-face" src="img/char-05.png" alt="char-05" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-06">
        <img class="front-face" src="img/char-06.png" alt="char-06" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-06">
        <img class="front-face" src="img/char-06.png" alt="char-06" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-07">
        <img class="front-face" src="img/char-07.png" alt="char-07" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-07">
        <img class="front-face" src="img/char-07.png" alt="char-07" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-08">
        <img class="front-face" src="img/char-08.png" alt="char-08" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-08">
        <img class="front-face" src="img/char-08.png" alt="char-08" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-09">
        <img class="front-face" src="img/char-09.png" alt="char-09" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-09">
        <img class="front-face" src="img/char-09.png" alt="char-09" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-10">
        <img class="front-face" src="img/char-10.png" alt="char-10" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-10">
        <img class="front-face" src="img/char-10.png" alt="char-10" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-11">
        <img class="front-face" src="img/char-11.png" alt="char-11" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-11">
        <img class="front-face" src="img/char-11.png" alt="char-11" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-12">
        <img class="front-face" src="img/char-12.png" alt="char-12" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
      <div class="memory-card" data-framework="char-12">
        <img class="front-face" src="img/char-12.png" alt="char-12" />
        <img class="back-face" src="img/guess.png" alt="guess" />
      </div>
  </section>

  <script src="game.js"></script>
</body>
</html>


CSS:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.game {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.controls {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

button {
    background: #f10606;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 20px;
    border: 0px;
    cursor: pointer;
    font-size: 18pt;
    font-weight: bold;
    font-style: italic;
}

.disabled {
    color: #4d4d4d;
    font-size: 14pt;
    font-weight: bold;
    font-style: italic;
}

.stats {
    color: #ffffff;
    font-size: 14pt;
    font-weight: bold;
    font-style: italic;
}

.border-container {
    position: relative;
}

  body {
    height: 100vh;
    display: flex;
    background: #f10606;
    color: #ffffff;
}

 h1 {
    font-style: italic;
    position: relative;
    left: 50%;
    padding-top: 20px;
}

  .memory-game {
    width: 640px;
    height: 640px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    perspective: 1000px;
}
  
  .memory-card {
    width: calc(25% - 10px);
    height: calc(33.333% - 10px);
    margin: 5px;
    position: relative;
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .5s;
    box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
  
  .memory-card:active {
    transform: scale(0.97);
    transition: transform .2s;
}
  
  .memory-card.flip {
    transform: rotateY(180deg);
}
  
  .front-face,
  .back-face {
    width: 100%;
    height: 100%;
    padding: 20px;
    position: absolute;
    border-radius: 5px;
    background: #ffffff;
    backface-visibility: hidden;
}
  
  .front-face {
    transform: rotateY(180deg);
}

Java if needed: (not done fully, only cards are done)

const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

function flipCard() {
  if (lockBoard) return;
  if (this === firstCard) return;

  this.classList.add('flip');

  if (!hasFlippedCard) {
    hasFlippedCard = true;
    firstCard = this;

    return;
  }

  secondCard = this;
  checkForMatch();
}

function checkForMatch() {
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

  isMatch ? disableCards() : unflipCards();
}

function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);

  resetBoard();
}

function unflipCards() {
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');

    resetBoard();
  }, 1500);
}

function resetBoard() {
  [hasFlippedCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];
}

(function shuffle() {
  cards.forEach(card => {
    let randomPos = Math.floor(Math.random() * 12);
    card.style.order = randomPos;
  });
})();

cards.forEach(card => card.addEventListener('click', flipCard));

Really appreciate the help you can give.

Solution

  • As understand, you add position:absolute on .game for set at center.

    Replace your code

    .game {
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    with this code

     .game {

            display: grid;
            place-items: center;
            width: 100%;
        }