Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

não consigo manipular uma div html no css

meu html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="./js/script.js" defer></script>
    <title>mario jump</title>
</head>
<body>
    <div class="game-board">
        <img src="./imagens/pipe.png" alt="pipe">

    </div>

</body>
</html>

css:

  • { margin: 0; padding: 0; box-sizing: border-box; }

.game-board { width: 80%; height: 500px; border: 1px solid black; margin: 0 auto; position: relative; }

.pipe { position: absolute; bottom: 0; width: 80px; }

enquanto no video está assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidadeo meu está assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Oi, Thiago. Faltou usar a class pipe na img


<img src="./imagens/pipe.png" alt="pipe" class="pipe">

copiei seu codigo, ficou assim:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="./js/script.js" defer></script>
    <title>mario jump</title>
</head>
<body>
    <div class="game-board">
        <img src="./imagens/pipe.png" alt="pipe" class="pipe">
    </div>

</body>
</html>

mas não teve mudança, div tb tinha a class ''game-board'' definida, passei para a area de css fiz igual eu vi no video mas apareceu como na segunda foto que eu havia mandado, aqui o link do video que eu to tomando como base: https://www.youtube.com/watch?v=r9buAwVBDhA talvez possa facilitar para entender meu problema.

solução!

Oi, Thiago. O Seu problema era colocar a imagem na parte inferior (bottom) e isso foi resolvido com a inclusão da classe pipe na imagem

Verifique se o style.css e o html estão na mesma

Verifique tb se o style.css está ok


* { 
      margin: 0; 
      padding: 0; 
      box-sizing:  border-box; 
  }

.game-board { 
    width: 80%; 
    height: 500px; 
    border: 1px solid black; 
    margin: 0 auto; 
    position: relative; }

.pipe { 
    position: absolute; 
    bottom: 0; 
    width: 80px; 
  }