How do I leave the right-aligned button on top of the table?

Asked

Viewed 134 times

0

Well, I’m creating a system of registering people using HTML, CSS, JAVASCRIPT my application is working normally, the application is very complex and it is quite code I recommend you to run the code right below, opening the whole page, because I have not resized the application yet, but the problem is very simple to just position the button remover with id="remover" on the right above the table with the class="tabela", but it’s not working. Look, the button remover is positioned on the right above the table when the page is loaded, working normally, you perform the registration of people and will register normally without any problem, but when you will register people, starts the table emcher on the screen with user information and with forme will taking a lot of table on the screen it will go out of the container that is div with id="container-de-dados", but for that not to happen I put overflow: auto to create a scroll, but along that you register at least 4 people, and that’s the problem the button remover remains a 20px the most on the right of where he was making the button go more to the right and the most to the left table and causing a scroll horizontal and ends up ruining the layout of the application. Who can help thank.

// 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>

html css
  • 1

    vlw for the @hugocsl tip. I will try to modify the code by placing the button in another container should be because it is in the same container of the tables and should be doing this!

  • 1

    fuck what man! 500 points.

  • Apart from the white-space: nowrap; of .tabela seems to have solved, forehead there

2 answers

3


Dude, see if it looks like you wanted it! instead of setting position: relative and modify the left to the button remover and the button confirmarEnegar simply added float: right to float right, that was an extra, as you commented on the button remover and the button confirmarEnegar was wandering around the layout I fixed that too.

#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;
}

And in the Javascript I removed the property left that you set to the button remover.

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

The application would look like this. 

// 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>

  • Man, that’s what I wanted, the button was the way I wanted it, and I swear I used float and it didn’t work kkkk, thanks I was giving up this program!

  • I think his problem is when this happens... http://prntscr.com/oq84vc tests the response by readjusting the screen size, btn seems to lose the reference of the end of the container

  • @hugocsl is when you register 4 people that the buttons remain where they were not meant to be, already the responsiveness has not yet done it.

  • @Leandronascimento eh that putting the btn there was so good that I really thought that the problem was another rss

  • @hugocsl didn’t happen this, when I resized the screen! both buttons remain still there right they don’t stay in the center.

  • 1

    Gosh, don’t even talk! This has happened to me several times, sometimes the problem is right in the face, very simple and nois kills itself trying to find the problem kk.

Show 1 more comment

0

The simplest way is to remove the formatting left of button, insert a div to be the container of button and apply a formatting text-align:right in that div. Follow an example:

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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.