Elementos não centralizam e a caixa de fundo não aparece

gelinho 890 · Março 22, 2023

Boa noite, os elementos não centralizam e a caixa de fundo não aparece

Sou novato em html e estou fazendo um projeto simples de calculadora de html, css e javascript seguindo um tutorial disponível no youtube.

No entanto não consigo alcançar o resultado demonstrado no anexo 1

Meu resultado, anexo 2

Já coloquei o código no chat gpt para ver se ele encontrava o erro e me guiasse para o caminho correto, porém sem resultados, a cada tentativa demonstra uma resolução diferente para o problema e nenhuma delas chega ao resultado do anexo 1.

Código:

<!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">
    <title>Calculadora</title>
    <style>
       
        .fundo{
            background-image: linear-gradient(45deg,black, crimson);
            height: 100vj;
            color: white;
            font-family: Arial, Helvetica, sans-serif;
        }
        .calculadora{
            position: absolute;
            background-color: rgb(0, 0, 0);
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50);
            border-radius: 15px;
            padding: 15px;

        }
    </style>
</head>
<body>
    <div class="fundo">
        <h1>Calculadora Básica</h1>
    </div class= "calculadora">
     <h1>Calculadora</h1>
     <p id= "resultado"></p>
     <table>
        <tr>
            <td><button>C</button></td>
            <td><button><</button></td>
            <td><button>/</button></td>
            <td><button>X</button></td>
        </tr>
        <tr>
            <td><button>7</button></td>
            <td><button>8</button></td>
            <td><button>9</button></td>
            <td><button>-</button></td>
        </tr>
        <tr>
            <td><button>4</button></td>
            <td><button>5</button></td>
            <td><button>6</button></td>
            <td><button>+</button></td>
        </tr>
        <tr>
            <td><button>1</button></td>
            <td><button>2</button></td>
            <td><button>3</button></td>
            <td rowspan="2"><button>=</button></td>
        </tr>
        <tr>
            <td colspan="2"><button>0</button></td>
            <td><button>.</button></td>
        </tr>
     </table>
</body>
</html>

Obrigado pela atenção

lowys · Março 22, 2023

Sugiro que estude um pouco sobre grid
e ao invés de usar tabela, use grid

Rayane Portela · Setembro 2

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

}
</style>
</head>
<body>
<div class="fundo">
<h1>Calculadora Básica</h1>
<div class= "calculadora">
<h1>Calculadora</h1>
<p id= "resultado"></p>
<table>
<tr>
<td><button>C</button></td>
<td><button><</button></td>
<td><button>/</button></td>
<td><button>X</button></td>
</tr>
<tr>
<td><button>7</button></td>
<td><button>8</button></td>
<td><button>9</button></td>
<td><button>-</button></td>
</tr>
<tr>
<td><button>4</button></td>
<td><button>5</button></td>
<td><button>6</button></td>
<td><button>+</button></td>
</tr>
<tr>
<td><button>1</button></td>
<td><button>2</button></td>
<td><button>3</button></td>
<td rowspan="2"><button>=</button></td>
</tr>
<tr>
<td colspan="2"><button>0</button></td>
<td><button>.</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>

Editado Setembro 2 por Rayane Portela

lowys · Setembro 3

9 horas atrás, Rayane Portela disse:

transform: translate(-50%,-50);

faltou especificar a unidade de medida do outro 50

-50 o q?

Editado Setembro 3 por lowys

Entrar

Elementos não centralizam e a caixa de fundo não aparece

Pergunta

gelinho 890

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

Rayane Portela

Link para o comentário

Compartilhar em outros sites

lowys

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades