0

Bom, eu estou criando um sistema de cadastro de pessoas usando HTML, CSS, JAVASCRIPT a minha aplicação está funcionando normalmente, a aplicação é bem complexa e é bastante código recomendo a vocês a executar o código logo abaixo, abrindo na página toda, pois ainda não redimensionei a aplicação, mas o problema é bem simples é só posicionar o botão remover com id="remover" na direita em cima das tabela com a class="tabela", porém não está dando certo. Vejam, que o botão remover está posicionado na direita em cima das tabela quando a página é carregada, funcionando normalmente, você realiza o cadastro das pessoas e vai cadastrando normalmente sem problema algum, porém quando você vai cadastrando as pessoas, começa a emcher de tabela na tela com as informações do usuário e com forme vai tendo muita tabela na tela ele vai sair para fora do container que é a div com id="container-de-dados", mas para isso não acontecer coloquei overflow: auto para criar um scroll, mas ao longo que você cadastra mais o menos 4 pessoas, ae que está o problema o botão remover permanece uns 20px a mais na direita da aonde ele estava fazendo o botão ir mais a direita e a tabela mais a esquerda e causando um scroll horizontal e acaba estragando o layout da aplicação. Quem poder ajudar agradeço.

// Função cadastroDePessoas().
function cadastroDePessoas()
{
    // Variáveis com valores fazendo referência aos id no documento html.
    var body = window.document.body;
    var nome = window.document.querySelector("#nome");
    var cpf = window.document.querySelector("#cpf");
    var nomeCorreto = window.document.querySelector("#nome-correto");
    var cpfCorreto = window.document.querySelector("#cpf-correto");
    var botaoCadastrar = window.document.querySelector("#botao");
    var containerDeDados = window.document.querySelector("#container-de-dados");
    var vazioOunao = window.document.querySelector("#titulo3");
    var vermelhoEazul = window.document.querySelector("#vermelho-e-azul");
    var contagemDeCadastro = 0;

    // Variáveis com valores da data do sistema operacional.
    var dataDoSistemaOperacional = new Date();
    var hora = dataDoSistemaOperacional.getHours();
    var minuto = dataDoSistemaOperacional.getMinutes();
    var segundo = dataDoSistemaOperacional.getSeconds();
    var ano = dataDoSistemaOperacional.getFullYear();
    var mes = dataDoSistemaOperacional.getMonth();
    var dia = dataDoSistemaOperacional.getDay();

    // Variável com valor de objeto e contém valores de propriedades que são string.
    const insercoes =
    {
        3 : ".",
        7 : ".",
        11 : "-"
    };

    if (hora < 10)
    {
        hora = "0" + hora;
    }

    if (minuto < 10)
    {
        minuto = "0" + minuto;
    }

    if (segundo < 10)
    {
        segundo = "0" + segundo;
    }

    if (mes < 10)
    {
        mes = "0" + mes;
    }

    if (dia < 10)
    {
        dia = "0" + dia;
    }
    
    // Variável nome contem o evento de input e chamara a função anônima function(){}.
    nome.addEventListener("input", function()
    {
        // Valor de nome recebe o valor de nome convertido para maiúscula.
        nome.value = nome.value.toUpperCase();

        // Se o comprimento do valor de nome for igual a 50 execute este bloco se não passe para o outro.
        if (nome.value.length == 50)
        {
            nomeCorreto.textContent = "Número máximo de caracteres atingido";
            nomeCorreto.style.color = "rgb(255, 0, 0)";
        }

        else if (nome.value.length >= 21)
        {
            nomeCorreto.textContent = "Ótimo Nome"
            nomeCorreto.style.color = "rgb(64, 221, 49)";
        }

        else if (nome.value.length > 10)
        {
            nomeCorreto.textContent = "Nome razoável";
            nomeCorreto.style.color = "rgb(238, 170, 68)";
        }

        else if (nome.value.length > 0)
        {
            nomeCorreto.textContent = "Nome muito pequeno";
            nomeCorreto.style.color = "rgb(255, 0, 0)";
        }
        
        else
        {
            nomeCorreto.textContent = "";
        }
    });

    cpf.addEventListener("input", function(e)
    {
        let nums = cpf.value.match(/\d/g) || []; 
        
        for (let posicaoInserir of Object.keys(insercoes))
        {
          if (nums.length > parseInt(posicaoInserir))
          {
            nums.splice(parseInt(posicaoInserir), 0, insercoes[posicaoInserir]);
          }
        }
        
        cpf.value = nums.join("");

        if (cpf.value.length === 14)
        {
            cpfCorreto.textContent = "CPF no formato correto";
            cpfCorreto.style.color = "rgb(64, 221, 49)";
        }

        else
        {
            cpfCorreto.textContent = "";
        }
    });

    botaoCadastrar.addEventListener("click", function()
    {
        if (nome.value == "")
        {
            nome.style.animation = "animacaoNomeEcpf 0.3s linear";
            nomeCorreto.textContent = "Nome Vazio";
            nomeCorreto.style.color = "rgb(255, 0, 0)";
        }

        if (cpf.value == "")
        {
            cpf.style.animation = "animacaoNomeEcpf 0.3s linear";
            cpfCorreto.textContent = "CPF Vazio";
            cpfCorreto.style.color = "rgb(255, 0, 0)";
        }

        if (nome.value != "" && cpf.value != "")
        {
            criarTabelaDeDados();
            function criarTabelaDeDados()
            {
                ++ contagemDeCadastro;
                vazioOunao.textContent = "";

                var criarConfirmarEnegar, criarBotaoConfirmar, criarBotaoNegar,
                criarBotaoRemover,
                criarTable1,
                criarTr1, criarTr2,
                criarTh1, criarTh2, criarTh3, criarTh4, criarTh5,
                criarTd1, criarTd2, criarTd3, criarTd4, criarTd5;

                const simboloCorreto = String.fromCodePoint(0x02714);
                const simboloChis = String.fromCodePoint(0x000D7);

                criarBotaoRemover = window.document.createElement("button");

                criarConfirmarEnegar = window.document.createElement("div");

                criarBotaoConfirmar = window.document.createElement("div");
                criarBotaoNegar = window.document.createElement("div");

                criarTable1 = window.document.createElement("table");
                
                criarTr1 = window.document.createElement("tr");
                
                criarTr2 = window.document.createElement("tr");
                
                criarTh1 = window.document.createElement("th");
                criarTh2 = window.document.createElement("th");
                criarTh3 = window.document.createElement("th");
                criarTh4 = window.document.createElement("th");
                criarTh5 = window.document.createElement("th");
                
                criarTd1 = window.document.createElement("td");
                criarTd2 = window.document.createElement("td");
                criarTd3 = window.document.createElement("td");
                criarTd4 = window.document.createElement("td");
                criarTd5 = window.document.createElement("td");

                criarConfirmarEnegar.setAttribute("id", "confirmarEnegar");
                criarBotaoConfirmar.setAttribute("id", "confirmar");
                criarBotaoNegar.setAttribute("id", "negar");

                criarBotaoRemover.setAttribute("id", "remover");
                criarBotaoRemover.setAttribute("type", "button");
                criarBotaoRemover.textContent = "remover";

                criarBotaoConfirmar.textContent = simboloCorreto;
                criarBotaoNegar.textContent = simboloChis;

                criarTable1.setAttribute("class", "tabela");
                
                criarTh1.textContent = "Nº";
                criarTh2.textContent = "Nome";
                criarTh3.textContent = "CPF";
                criarTh4.textContent = "Hora do Cadastro";
                criarTh5.textContent = "Data do Cadastro";

                criarTd2.textContent = nome.value;
                criarTd3.textContent = cpf.value;
                criarTd4.textContent = `${hora}:${minuto}:${segundo}`;
                criarTd5.textContent = `${dia}/${mes}/${ano}`;

                criarTable1.appendChild(criarTr1);
                criarTable1.appendChild(criarTr2);

                criarTr1.appendChild(criarTh1);
                criarTr1.appendChild(criarTh2);
                criarTr1.appendChild(criarTh3);
                criarTr1.appendChild(criarTh4);
                criarTr1.appendChild(criarTh5);

                criarTr2.appendChild(criarTd1);
                criarTr2.appendChild(criarTd2);
                criarTr2.appendChild(criarTd3);
                criarTr2.appendChild(criarTd4);
                criarTr2.appendChild(criarTd5);

                criarConfirmarEnegar.appendChild(criarBotaoConfirmar);
                criarConfirmarEnegar.appendChild(criarBotaoNegar);

                containerDeDados.appendChild(criarBotaoRemover);
                containerDeDados.appendChild(criarConfirmarEnegar);
                containerDeDados.appendChild(criarTable1);

                nome.value = "";
                cpf.value = "";
                nomeCorreto.textContent = "";
                cpfCorreto.textContent = "";

                vermelhoEazul.textContent = contagemDeCadastro;
                vermelhoEazul.style.backgroundColor = "rgb(0, 255, 0)";
            
                criarBotaoRemover.addEventListener("click", function()
                {
                    this.style.display = "none";
                    criarConfirmarEnegar.style.display = "block";
                });

                criarBotaoNegar.addEventListener("click", function()
                {
                    criarConfirmarEnegar.style.display = "none";
                    criarBotaoRemover.style.display = "block";
                    criarBotaoRemover.style.left = "570px";
                });

                criarBotaoConfirmar.addEventListener("click", function()
                {
                    criarConfirmarEnegar.style.display = "none";
                    containerDeDados.removeChild(criarTable1);
                    -- contagemDeCadastro;
                    vermelhoEazul.textContent = contagemDeCadastro;
                    
                    if (contagemDeCadastro == 0)
                    {
                        vazioOunao.textContent = "Vazio";
                        vermelhoEazul.style.backgroundColor = "rgb(255, 0, 0)";
                    }
                });
            }
        }
    });

    botaoCadastrar.addEventListener("mousedown", function()
    {
        nome.style.animation = "none";
        cpf.style.animation = "none";
    });
}

// Adicionar evento de load no window e chamar a função cadastroDePessoas().
window.addEventListener("load", cadastroDePessoas);
@charset "utf-8";

html {
    background-color: rgb(88, 88, 88);
}

body {
    width: auto;
    height: 703px;
    margin: 30px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    counter-reset: contador-de-numero;
}

* {
    box-sizing: border-box;
}

::selection {
    background-color: rgb(209, 207, 207);
}

/* --------------------------------------------- Cadastro de pessoas --------------------------------------------- */

#cadastro-de-pessoas {
    width: 50%;
    height: 100%;
    /* border: 1px solid black; */
    border-radius: 10px 0 0 10px;
    border-right: 1px solid rgb(175, 175, 175);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 50px;
    color: rgb(100, 100, 100);
    float: left;
}

#nome, #cpf {
    width: 100%;
    font-size: 20px;
    border: 2px solid rgb(77, 74, 74);
    border-radius: 20px;
    outline: none;
    padding: 10px 10px 10px 20px;
    margin-bottom: 15px;
    /* background-image: url("../imagem/correto.png"); */
    background-repeat: no-repeat;
    background-size: 50px 40px;
    background-position: 99% 0;
    position: relative;
}

#nome:hover, #cpf:hover {
    background-color: rgb(245, 241, 241);
}

#nome:focus, #cpf:focus {
    background-color: rgb(245, 241, 241);
}

#nome-correto, #cpf-correto, #nota3 {
    text-align: left;
    margin: 0;
    margin-bottom: 15px;
}

@keyframes animacaoNomeEcpf {
    0%
    {
        left: 0;
    }

    50%
    {
        left: -10px;
    }

    100%
    {
        left: 10px;
        background-color: rgb(245, 215, 215);
        border: 2px solid rgb(255, 0, 0);
    }
}

#botao {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
    font-size: 20px;
    background-color: rgb(51, 51, 224);
    color: rgb(255, 255, 255);
}

#botao:hover {
    background-color: rgb(73, 73, 221);
}

#vermelho-e-azul {
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
    padding: 5px 10px;
    border-radius: 10px;
}

/* --------------------------------------------- Pessoas de Cadastradas --------------------------------------------- */

#pessoas-cadastradas {
    width: 50%;
    height: 100%;
    /* border: 1px solid black; */
    border-radius: 0 10px 10px 0;
    border-left: 1px solid rgb(175, 175, 175);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 50px;
    color: rgb(100, 100, 100);
    float: left;
}

#container-de-dados {
    width: auto;
    height: 90%;
    border: 1px dashed rgb(175, 175, 175);
    overflow: auto;
    position: relative;
    box-sizing: border-box;
}

#titulo3 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0;
}

.tabela {
    width: 100%;
    height: 100px;
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: 30px;
}

#remover {
    position: relative;
    height: 23px;
    /* left: 286px; */
    left: 284px;
    cursor: pointer;
    background-color: rgb(201, 201, 201);
    border: none;
    color: rgb(102, 102, 102);
    font-weight: bolder;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.4s linear;
    outline: none;
}


/* ------------------------------------------------------------------------------------- */
#confirmarEnegar {
    width: 60px;
    height: 23px;
    border-radius: 5px 5px 0 0;
    border: 1px solid rgb(100, 100, 100);
    position: relative;
    left: 574px;
    display: none;
}

#confirmar, #negar {
    width: 50%;
    height: auto;
    float: left;
    color: rgb(0, 0, 0);
}

#confirmar {
    border-right: 1px solid rgb(100, 100, 100);
    background-color: rgb(0, 255, 0);
    border-radius: 5px 0 0 0;
}

#negar {
    border-left: 1px solid rgb(100, 100, 100);
    background-color: rgb(255, 0, 0);
    border-radius: 0 5px 0 0;
    font-size: 19px;
}

#confirmar:hover {
    cursor: pointer;
    background-color: rgb(16, 190, 16);
}

#negar:hover {
    cursor: pointer;
    background-color: rgb(192, 19, 19);
}
/* ------------------------------------------------------------------------------------- */


#remover:hover {
    background-color: rgb(173, 173, 173);
    color: rgb(80, 79, 79);
}

th {
    background-color: rgb(88, 88, 88);
    color: rgb(255, 255, 255);
}

th, td {
    padding: 5px;
    border: 1px solid rgb(175, 175, 175);
    transition: background-color 0.4s linear;
}

th:hover {
    background-color: rgb(102, 101, 101);
}

th:nth-child(1), td:nth-child(1) {
    background-color: rgb(146, 145, 145);
    color: rgb(255, 255, 255);
}

th:nth-child(1):hover, td:nth-child(1):hover {
    background-color: rgb(170, 169, 169);
}

td:nth-child(1)::after {
    counter-increment: contador-de-numero;
    content: counter(contador-de-numero);
}

td:hover {
    background-color: rgb(245, 241, 241);
}
<!doctype html>
<html lang="pt-br">
<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">
  <meta name="author" content="Leandro do Nascimento">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/script.js"></script>
  <title>Cadastro de Pessoas</title>
</head>
<body>

<div id="cadastro-de-pessoas">
  <h1 id="titulo1">Cadastro de Pessoas</h1>
  <input id="nome" type="text" autocomplete="off" placeholder="Nome Completo:" minlength="8" maxlength="50">
  <p id="nome-correto"></p>
  <input id="cpf" type="text" maxlength="14" placeholder="CPF:">
  <p id="cpf-correto"></p>
  <p id="nota3"></p>
  <button id="botao" type="button">Cadastrar</button>
  <p id="cadastrado">Número de pessoas cadastradas: <span id="vermelho-e-azul">0</span></p>
</div>

<div id="pessoas-cadastradas">
  <h1 id="titulo2">Pessoas Cadastradas</h1>
  <div id="container-de-dados">
    <h1 id="titulo3">Vazio</h1>
  </div>
</div>

</body>
</html>

3
  • 1
    vlw pela dica @hugocsl. Vou tentar modificar o código colocando o botão em outro container deve ser por causa que ele está no mesmo container das tabelas e deve estar fazendo isso! Commented 22/07/2019 às 14:37
  • 1
    what fuck man! 500 points.
    – user157849
    Commented 8/08/2019 às 19:57
  • Tirando o white-space: nowrap; da .tabela parece ter resolvido, testa ai Commented 8/08/2019 às 20:58

2 Respostas 2

3
+500

Cara, vê se ficou como você queria! em vez de definir position: relative e modificar os left para o botão remover e o botão confirmarEnegar simplesmente adicionei float: right para flutuarem a direita, isso foi um extra, pois você comentou sobre o botão remover e o botão confirmarEnegar tava vagando pelo layout eu corrigi isso também.

#remover {
   /* position: relative; */
   height: 23px;
   /* left: 286px; */
   /* left: 284px; */
   float: right;
   cursor: pointer;
   background-color: rgb(201, 201, 201);
   border: none;
   color: rgb(102, 102, 102);
   font-weight: bolder;
   border-radius: 5px 5px 0 0;
   transition: background-color 0.4s linear;
   outline: none;
}

#confirmarEnegar {
   width: 60px;
   height: 23px;
   border-radius: 5px 5px 0 0;
   border: 1px solid rgb(100, 100, 100);
   /* position: relative; */
   /* left: 574px; */
   display: none;
   float: right;
}

E no JavaScript removi a propriedade left que você definiu para o botão remover.

criarBotaoNegar.addEventListener("click", function()
{
   criarConfirmarEnegar.style.display = "none";
   criarBotaoRemover.style.display = "block";
   // criarBotaoRemover.style.left = "570px";
});

A aplicação ficaria assim.

// Função cadastroDePessoas().
function cadastroDePessoas()
{
    // Variáveis com valores fazendo referência aos id no documento html.
    var body = window.document.body;
    var nome = window.document.querySelector("#nome");
    var cpf = window.document.querySelector("#cpf");
    var nomeCorreto = window.document.querySelector("#nome-correto");
    var cpfCorreto = window.document.querySelector("#cpf-correto");
    var botaoCadastrar = window.document.querySelector("#botao");
    var containerDeDados = window.document.querySelector("#container-de-dados");
    var vazioOunao = window.document.querySelector("#titulo3");
    var vermelhoEazul = window.document.querySelector("#vermelho-e-azul");
    var contagemDeCadastro = 0;

    // Variáveis com valores da data do sistema operacional.
    var dataDoSistemaOperacional = new Date();
    var hora = dataDoSistemaOperacional.getHours();
    var minuto = dataDoSistemaOperacional.getMinutes();
    var segundo = dataDoSistemaOperacional.getSeconds();
    var ano = dataDoSistemaOperacional.getFullYear();
    var mes = dataDoSistemaOperacional.getMonth();
    var dia = dataDoSistemaOperacional.getDay();

    // Variável com valor de objeto e contém valores de propriedades que são string.
    const insercoes =
    {
        3 : ".",
        7 : ".",
        11 : "-"
    };

    if (hora < 10)
    {
        hora = "0" + hora;
    }

    if (minuto < 10)
    {
        minuto = "0" + minuto;
    }

    if (segundo < 10)
    {
        segundo = "0" + segundo;
    }

    if (mes < 10)
    {
        mes = "0" + mes;
    }

    if (dia < 10)
    {
        dia = "0" + dia;
    }
    
    // Variável nome contem o evento de input e chamara a função anônima function(){}.
    nome.addEventListener("input", function()
    {
        // Valor de nome recebe o valor de nome convertido para maiúscula.
        nome.value = nome.value.toUpperCase();

        // Se o comprimento do valor de nome for igual a 50 execute este bloco se não passe para o outro.
        if (nome.value.length == 50)
        {
            nomeCorreto.textContent = "Número máximo de caracteres atingido";
            nomeCorreto.style.color = "rgb(255, 0, 0)";
        }

        else if (nome.value.length >= 21)
        {
            nomeCorreto.textContent = "Ótimo Nome"
            nomeCorreto.style.color = "rgb(64, 221, 49)";
        }

        else if (nome.value.length > 10)
        {
            nomeCorreto.textContent = "Nome razoável";
            nomeCorreto.style.color = "rgb(238, 170, 68)";
        }

        else if (nome.value.length > 0)
        {
            nomeCorreto.textContent = "Nome muito pequeno";
            nomeCorreto.style.color = "rgb(255, 0, 0)";
        }
        
        else
        {
            nomeCorreto.textContent = "";
        }
    });

    cpf.addEventListener("input", function(e)
    {
        let nums = cpf.value.match(/\d/g) || []; 
        
        for (let posicaoInserir of Object.keys(insercoes))
        {
          if (nums.length > parseInt(posicaoInserir))
          {
            nums.splice(parseInt(posicaoInserir), 0, insercoes[posicaoInserir]);
          }
        }
        
        cpf.value = nums.join("");

        if (cpf.value.length === 14)
        {
            cpfCorreto.textContent = "CPF no formato correto";
            cpfCorreto.style.color = "rgb(64, 221, 49)";
        }

        else
        {
            cpfCorreto.textContent = "";
        }
    });

    botaoCadastrar.addEventListener("click", function()
    {
        if (nome.value == "")
        {
            nome.style.animation = "animacaoNomeEcpf 0.3s linear";
            nomeCorreto.textContent = "Nome Vazio";
            nomeCorreto.style.color = "rgb(255, 0, 0)";
        }

        if (cpf.value == "")
        {
            cpf.style.animation = "animacaoNomeEcpf 0.3s linear";
            cpfCorreto.textContent = "CPF Vazio";
            cpfCorreto.style.color = "rgb(255, 0, 0)";
        }

        if (nome.value != "" && cpf.value != "")
        {
            criarTabelaDeDados();
            function criarTabelaDeDados()
            {
                ++ contagemDeCadastro;
                vazioOunao.textContent = "";

                var criarConfirmarEnegar, criarBotaoConfirmar, criarBotaoNegar,
                criarBotaoRemover,
                criarTable1,
                criarTr1, criarTr2,
                criarTh1, criarTh2, criarTh3, criarTh4, criarTh5,
                criarTd1, criarTd2, criarTd3, criarTd4, criarTd5;

                const simboloCorreto = String.fromCodePoint(0x02714);
                const simboloChis = String.fromCodePoint(0x000D7);

                criarBotaoRemover = window.document.createElement("button");

                criarConfirmarEnegar = window.document.createElement("div");

                criarBotaoConfirmar = window.document.createElement("div");
                criarBotaoNegar = window.document.createElement("div");

                criarTable1 = window.document.createElement("table");
                
                criarTr1 = window.document.createElement("tr");
                
                criarTr2 = window.document.createElement("tr");
                
                criarTh1 = window.document.createElement("th");
                criarTh2 = window.document.createElement("th");
                criarTh3 = window.document.createElement("th");
                criarTh4 = window.document.createElement("th");
                criarTh5 = window.document.createElement("th");
                
                criarTd1 = window.document.createElement("td");
                criarTd2 = window.document.createElement("td");
                criarTd3 = window.document.createElement("td");
                criarTd4 = window.document.createElement("td");
                criarTd5 = window.document.createElement("td");

                criarConfirmarEnegar.setAttribute("id", "confirmarEnegar");
                criarBotaoConfirmar.setAttribute("id", "confirmar");
                criarBotaoNegar.setAttribute("id", "negar");

                criarBotaoRemover.setAttribute("id", "remover");
                criarBotaoRemover.setAttribute("type", "button");
                criarBotaoRemover.textContent = "remover";

                criarBotaoConfirmar.textContent = simboloCorreto;
                criarBotaoNegar.textContent = simboloChis;

                criarTable1.setAttribute("class", "tabela");
                
                criarTh1.textContent = "Nº";
                criarTh2.textContent = "Nome";
                criarTh3.textContent = "CPF";
                criarTh4.textContent = "Hora do Cadastro";
                criarTh5.textContent = "Data do Cadastro";

                criarTd2.textContent = nome.value;
                criarTd3.textContent = cpf.value;
                criarTd4.textContent = `${hora}:${minuto}:${segundo}`;
                criarTd5.textContent = `${dia}/${mes}/${ano}`;

                criarTable1.appendChild(criarTr1);
                criarTable1.appendChild(criarTr2);

                criarTr1.appendChild(criarTh1);
                criarTr1.appendChild(criarTh2);
                criarTr1.appendChild(criarTh3);
                criarTr1.appendChild(criarTh4);
                criarTr1.appendChild(criarTh5);

                criarTr2.appendChild(criarTd1);
                criarTr2.appendChild(criarTd2);
                criarTr2.appendChild(criarTd3);
                criarTr2.appendChild(criarTd4);
                criarTr2.appendChild(criarTd5);

                criarConfirmarEnegar.appendChild(criarBotaoConfirmar);
                criarConfirmarEnegar.appendChild(criarBotaoNegar);

                containerDeDados.appendChild(criarBotaoRemover);
                containerDeDados.appendChild(criarConfirmarEnegar);
                containerDeDados.appendChild(criarTable1);

                nome.value = "";
                cpf.value = "";
                nomeCorreto.textContent = "";
                cpfCorreto.textContent = "";

                vermelhoEazul.textContent = contagemDeCadastro;
                vermelhoEazul.style.backgroundColor = "rgb(0, 255, 0)";
            
                criarBotaoRemover.addEventListener("click", function()
                {
                    this.style.display = "none";
                    criarConfirmarEnegar.style.display = "block";
                });

                criarBotaoNegar.addEventListener("click", function()
                {
                    criarConfirmarEnegar.style.display = "none";
                    criarBotaoRemover.style.display = "block";
                    // criarBotaoRemover.style.left = "570px";
                });

                criarBotaoConfirmar.addEventListener("click", function()
                {
                    criarConfirmarEnegar.style.display = "none";
                    containerDeDados.removeChild(criarTable1);
                    -- contagemDeCadastro;
                    vermelhoEazul.textContent = contagemDeCadastro;
                    
                    if (contagemDeCadastro == 0)
                    {
                        vazioOunao.textContent = "Vazio";
                        vermelhoEazul.style.backgroundColor = "rgb(255, 0, 0)";
                    }
                });
            }
        }
    });

    botaoCadastrar.addEventListener("mousedown", function()
    {
        nome.style.animation = "none";
        cpf.style.animation = "none";
    });
}

// Adicionar evento de load no window e chamar a função cadastroDePessoas().
window.addEventListener("load", cadastroDePessoas);
@charset "utf-8";

html {
    background-color: rgb(88, 88, 88);
}

body {
    width: auto;
    height: 703px;
    margin: 30px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    counter-reset: contador-de-numero;
}

* {
    box-sizing: border-box;
}

::selection {
    background-color: rgb(209, 207, 207);
}

/* --------------------------------------------- Cadastro de pessoas --------------------------------------------- */

#cadastro-de-pessoas {
    width: 50%;
    height: 100%;
    /* border: 1px solid black; */
    border-radius: 10px 0 0 10px;
    border-right: 1px solid rgb(175, 175, 175);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 50px;
    color: rgb(100, 100, 100);
    float: left;
}

#nome, #cpf {
    width: 100%;
    font-size: 20px;
    border: 2px solid rgb(77, 74, 74);
    border-radius: 20px;
    outline: none;
    padding: 10px 10px 10px 20px;
    margin-bottom: 15px;
    /* background-image: url("../imagem/correto.png"); */
    background-repeat: no-repeat;
    background-size: 50px 40px;
    background-position: 99% 0;
    position: relative;
}

#nome:hover, #cpf:hover {
    background-color: rgb(245, 241, 241);
}

#nome:focus, #cpf:focus {
    background-color: rgb(245, 241, 241);
}

#nome-correto, #cpf-correto, #nota3 {
    text-align: left;
    margin: 0;
    margin-bottom: 15px;
}

@keyframes animacaoNomeEcpf {
    0%
    {
        left: 0;
    }

    50%
    {
        left: -10px;
    }

    100%
    {
        left: 10px;
        background-color: rgb(245, 215, 215);
        border: 2px solid rgb(255, 0, 0);
    }
}

#botao {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
    font-size: 20px;
    background-color: rgb(51, 51, 224);
    color: rgb(255, 255, 255);
}

#botao:hover {
    background-color: rgb(73, 73, 221);
}

#vermelho-e-azul {
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
    padding: 5px 10px;
    border-radius: 10px;
}

/* --------------------------------------------- Pessoas de Cadastradas --------------------------------------------- */

#pessoas-cadastradas {
    width: 50%;
    height: 100%;
    /* border: 1px solid black; */
    border-radius: 0 10px 10px 0;
    border-left: 1px solid rgb(175, 175, 175);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 50px;
    color: rgb(100, 100, 100);
    float: left;
}

#container-de-dados {
    width: auto;
    height: 90%;
    border: 1px dashed rgb(175, 175, 175);
    overflow: auto;
    position: relative;
    box-sizing: border-box;
}

#titulo3 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0;
}

.tabela {
    width: 100%;
    height: 100px;
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: 30px;
}

#remover {
    /* position: relative; */
    height: 23px;
    /* left: 286px; */
    /* left: 284px; */
    float: right;
    cursor: pointer;
    background-color: rgb(201, 201, 201);
    border: none;
    color: rgb(102, 102, 102);
    font-weight: bolder;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.4s linear;
    outline: none;
}


/* ------------------------------------------------------------------------------------- */
#confirmarEnegar {
    width: 60px;
    height: 23px;
    border-radius: 5px 5px 0 0;
    border: 1px solid rgb(100, 100, 100);
    /* position: relative; */
    /* left: 574px; */
    display: none;
    float: right;
}

#confirmar, #negar {
    width: 50%;
    height: auto;
    float: left;
    color: rgb(0, 0, 0);
}

#confirmar {
    border-right: 1px solid rgb(100, 100, 100);
    background-color: rgb(0, 255, 0);
    border-radius: 5px 0 0 0;
}

#negar {
    border-left: 1px solid rgb(100, 100, 100);
    background-color: rgb(255, 0, 0);
    border-radius: 0 5px 0 0;
    font-size: 19px;
}

#confirmar:hover {
    cursor: pointer;
    background-color: rgb(16, 190, 16);
}

#negar:hover {
    cursor: pointer;
    background-color: rgb(192, 19, 19);
}
/* ------------------------------------------------------------------------------------- */


#remover:hover {
    background-color: rgb(173, 173, 173);
    color: rgb(80, 79, 79);
}

th {
    background-color: rgb(88, 88, 88);
    color: rgb(255, 255, 255);
}

th, td {
    padding: 5px;
    border: 1px solid rgb(175, 175, 175);
    transition: background-color 0.4s linear;
}

th:hover {
    background-color: rgb(102, 101, 101);
}

th:nth-child(1), td:nth-child(1) {
    background-color: rgb(146, 145, 145);
    color: rgb(255, 255, 255);
}

th:nth-child(1):hover, td:nth-child(1):hover {
    background-color: rgb(170, 169, 169);
}

td:nth-child(1)::after {
    counter-increment: contador-de-numero;
    content: counter(contador-de-numero);
}

td:hover {
    background-color: rgb(245, 241, 241);
}
<!doctype html>
<html lang="pt-br">
<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">
  <meta name="author" content="Leandro do Nascimento">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/script.js"></script>
  <title>Cadastro de Pessoas</title>
</head>
<body>

<div id="cadastro-de-pessoas">
  <h1 id="titulo1">Cadastro de Pessoas</h1>
  <input id="nome" type="text" autocomplete="off" placeholder="Nome Completo:" minlength="8" maxlength="50">
  <p id="nome-correto"></p>
  <input id="cpf" type="text" maxlength="14" placeholder="CPF:">
  <p id="cpf-correto"></p>
  <p id="nota3"></p>
  <button id="botao" type="button">Cadastrar</button>
  <p id="cadastrado">Número de pessoas cadastradas: <span id="vermelho-e-azul">0</span></p>
</div>

<div id="pessoas-cadastradas">
  <h1 id="titulo2">Pessoas Cadastradas</h1>
  <div id="container-de-dados">
    <h1 id="titulo3">Vazio</h1>
  </div>
</div>

</body>
</html>

6
  • Cara, era isso mesmo que eu queria, o botão ficou do jeito que eu queria, e eu juro que usei float e não funcionou kkkk, valeu já tava desistindo deste programa! Commented 8/08/2019 às 20:18
  • Acho que o problema dele é quando isso acontece... prntscr.com/oq84vc testa a resposta reajustando o tamanho da tela, o btn parece que perde a referencia do final do container
    – hugocsl
    Commented 8/08/2019 às 20:18
  • @hugocsl é quando você cadastra 4 pessoas que os botões permanecem a onde não era para estar, já a responsividade ainda não o fiz. Commented 8/08/2019 às 20:20
  • @LeandroNascimento eh que botar o btn ali era tão de boa que achei mesmo que o problema era outro rss
    – hugocsl
    Commented 8/08/2019 às 20:27
  • 1
    Nossa, nem fala! isso já aconteceu comigo várias vezes, as vezes o problema tá bem na cara, bem simples e nois se mata tentando achar o problema kk. Commented 8/08/2019 às 20:33
0

A maneira mais simples é remover a formatação left do button, inserir uma div para ser o container do button e aplicar uma formatação text-align:right nessa div. Segue um exemplo:

<div style="text-align: right;">
     <button id="remover" type="button">remover</button>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .