I have a question in the html and css of this code

0

Failing to adjust the CSS below.

I made a code where jokempo play with the machine but the score is out of the player and computer divs. I've done everything to put it but it will not.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Pedra, papel, tesoura</title>
    <style type="text/css">
        * {
            font-family: Helvetica;
            font-weight: 400;
        }

        #titulo {
            color: #0984e3;
            text-align: center;
        }


        #placar {
            display: flex; 
            align-content: center;
            justify-content: center;
        }


        #jogador #computador {
            position: relative;
            flex-grow: 1;
            border-radius: 5px;
            width: 200px;
            padding: 20px;
            color: #fff;
        }
        #jogador {
            background-color: #ff7675;
        }
        #computador {
            background-color: #74b9ff
        }
        #versus {
            font-size: 40px;
            text-align: center;
            width: 70px;
        }

        #jogador-nome, #computador-nome; {
            padding: 0px;
            margin: 0px;
        }
        #jogador-nome {
            text-align: left;
        }
        #computador-nome {
            text-align: right;
        }
        #jogador-pontos, #computador-pontos {
            position: absolute;
            top: 8px;
            font-size: 32px;
        }
        #jogador-pontos {
            right: 20px;
        }
        ul#jogador-escolha li, ul#computador-escolha li {
            list-style: inline;
            text-align: center;
            margin: 0;
            padding: 0; 
        }

        ul#jogador-escolha li, ul#computador-escolha li {
            display: inline;

        }
        ul#jogador-escolha li a, ul#computador-escolha li a {
            opacity: .2;

        }
        ul#jogador-escolha li a:hover, ul#jogador-escolha li a.selecionado, ul#computador-escolha li a.selecionado {
            opacity: 1;

        }
        ul#jogador-escolha li a img, ul#computador-escolha li a img {
            max-width: 80px;
        }
        #mensagens {
            background-color: #636e72;
            font-size: 32px;
            border-radius: 5px;
            margin: 40px 0;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="principal">
        <h1 id="titulo">Pedra, Papel e Tesoura</h1>
        <div id="placar">
            <div id="jogador">
                <h2 id="jogador-nome">Jogador</h2>
                <span id="jogador-pontos">0</span>
                <ul id="jogador-escolha">
                    <li><a id="jogador-escolha-1" onclick="jogar(1)"><img src="pedra.png"></a></li>
                    <li><a id="jogador-escolha-2" onclick="jogar(2)"><img src="papel.png"></a></li>
                    <li><a id="jogador-escolha-3" onclick="jogar(3)"><img src="tesoura.png"></a></li>
                </ul>
            </div>
            <div id="versus">vs</div>
                <div id="computador">
                <h2 id="computador-nome">Computador</h2>
                <span id="computador-pontos">0</span>
                <ul id="computador-escolha">
                    <li><a id="computador-escolha-1"><img src="pedra.png"></a></li>
                    <li><a id="computador-escolha-2"><img src="papel.png"></a></li>
                    <li><a id="computador-escolha-3"><img src="tesoura.png"></a></li>
                </ul>
            </div>
        </div>
        <div id="mensagens">&nbsp;</div>
    </div>
    <script>
        var jogadorEscolha = 0;
        var jogadorPontuacao = 0;
        var computadorEscolha = 0;
        var computadorPontuacao = 0;
        var ganhador = -1;


        function jogar(escolha) {
            jogadorEscolha = escolha;

            computadorEscolha = Math.floor((Math.random() * (3 - 1 + 1))) + 1 ;

            //  1 - Pedra 
            //  2 - Papel
            //  3 - Tesoura

            if ((jogadorEscolha == 1) && (computadorEscolha == 1)) {
                ganhador = 0;

            }

            else if ((jogadorEscolha == 1) && (computadorEscolha == 2)) {
                ganhador = 2;

            }

            else if ((jogadorEscolha == 1) && (computadorEscolha == 3)) {
                ganhador = 1;

            }


             else if ((jogadorEscolha == 2) && (computadorEscolha == 1)) {
                ganhador = 1;

            }

            else if ((jogadorEscolha == 2) && (computadorEscolha == 2)) {
                ganhador = 0;

            }

            else if ((jogadorEscolha == 2) && (computadorEscolha == 3)) {
                ganhador = 2;


            }
            else if ((jogadorEscolha == 3) && (computadorEscolha == 1)) {
                ganhador = 2;

            }

            else if ((jogadorEscolha == 3) && (computadorEscolha == 2)) {
                ganhador = 1;


            }

            else if ((jogadorEscolha == 3) && (computadorEscolha == 3)) {
                ganhador = 0;

            }

            document.getElementById("jogador-escolha-1").classList.remove('selecionado');
            document.getElementById("jogador-escolha-2").classList.remove('selecionado');
            document.getElementById("jogador-escolha-3").classList.remove('selecionado');

            document.getElementById("computador-escolha-1").classList.remove('selecionado');
            document.getElementById("computador-escolha-2").classList.remove('selecionado');
            document.getElementById("computador-escolha-3").classList.remove('selecionado');


            document.getElementById("jogador-escolha-" + jogadorEscolha).classList.add('selecionado');
            document.getElementById("computador-escolha-" + computadorEscolha).classList.add('selecionado');

            if(ganhador == 0 ){
                document.getElementById('mensagens').innerHTML = 'Empate';

            }
            else if(ganhador == 1 ){
                document.getElementById('mensagens').innerHTML = 'Jogador ganhou!';
                jogadorPontuacao++;
            } 

            else if(ganhador == 2 ){
                document.getElementById('mensagens').innerHTML = 'Computador ganhou!';
                computadorPontuacao++;
            } 

            document.getElementById('jogador-pontos').innerHTML = jogadorPontuacao;
            document.getElementById('computador-pontos').innerHTML = computadorPontuacao;

        }
    </script>
</body>
</html>
    
asked by anonymous 21.05.2018 / 02:49

1 answer

1

If you want to put inside the divs, the problem is the position:absolute that you are using in the punctuation classes.

Using only display:flex , flex-direction:column already keeps the score just below the name without leaving the screen. The position:absolute will ignore the "parent" div and basically you would set the top, left, right, bottom of your position, which in this case I do not think is the best use.

Check below if this is what you need:

var jogadorEscolha = 0;
        var jogadorPontuacao = 0;
        var computadorEscolha = 0;
        var computadorPontuacao = 0;
        var ganhador = -1;


        function jogar(escolha) {
            jogadorEscolha = escolha;

            computadorEscolha = Math.floor((Math.random() * (3 - 1 + 1))) + 1 ;

            //  1 - Pedra 
            //  2 - Papel
            //  3 - Tesoura

            if ((jogadorEscolha == 1) && (computadorEscolha == 1)) {
                ganhador = 0;

            }

            else if ((jogadorEscolha == 1) && (computadorEscolha == 2)) {
                ganhador = 2;

            }

            else if ((jogadorEscolha == 1) && (computadorEscolha == 3)) {
                ganhador = 1;

            }


             else if ((jogadorEscolha == 2) && (computadorEscolha == 1)) {
                ganhador = 1;

            }

            else if ((jogadorEscolha == 2) && (computadorEscolha == 2)) {
                ganhador = 0;

            }

            else if ((jogadorEscolha == 2) && (computadorEscolha == 3)) {
                ganhador = 2;


            }
            else if ((jogadorEscolha == 3) && (computadorEscolha == 1)) {
                ganhador = 2;

            }

            else if ((jogadorEscolha == 3) && (computadorEscolha == 2)) {
                ganhador = 1;


            }

            else if ((jogadorEscolha == 3) && (computadorEscolha == 3)) {
                ganhador = 0;

            }

            document.getElementById("jogador-escolha-1").classList.remove('selecionado');
            document.getElementById("jogador-escolha-2").classList.remove('selecionado');
            document.getElementById("jogador-escolha-3").classList.remove('selecionado');

            document.getElementById("computador-escolha-1").classList.remove('selecionado');
            document.getElementById("computador-escolha-2").classList.remove('selecionado');
            document.getElementById("computador-escolha-3").classList.remove('selecionado');


            document.getElementById("jogador-escolha-" + jogadorEscolha).classList.add('selecionado');
            document.getElementById("computador-escolha-" + computadorEscolha).classList.add('selecionado');

            if(ganhador == 0 ){
                document.getElementById('mensagens').innerHTML = 'Empate';

            }
            else if(ganhador == 1 ){
                document.getElementById('mensagens').innerHTML = 'Jogador ganhou!';
                jogadorPontuacao++;
            } 

            else if(ganhador == 2 ){
                document.getElementById('mensagens').innerHTML = 'Computador ganhou!';
                computadorPontuacao++;
            } 

            document.getElementById('jogador-pontos').innerHTML = jogadorPontuacao;
            document.getElementById('computador-pontos').innerHTML = computadorPontuacao;

        }
* {
            font-family: Helvetica;
            font-weight: 400;
        }

        #titulo {
            color: #0984e3;
            text-align: center;
        }


        #placar {
            display: flex; 
            align-content: center;
            justify-content: center;
        }


        #jogador,#computador {
            position: relative;
            border-radius: 5px;
            width: 200px;
            padding: 20px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            flex-wrap: wrap;
        }
        #jogador {
            background-color: #ff7675;
        }
        #computador {
            background-color: #74b9ff
        }
        #versus {
            font-size: 40px;
            text-align: center;
            width: 70px;
        }

        #jogador-nome, #computador-nome; {
            padding: 0px;
            margin: 0px;
        }
        #jogador-nome {
            text-align: left;
        }
        #computador-nome {
            text-align: right;
        }
        #jogador-pontos, #computador-pontos {
            font-size: 32px;
            
        }
        ul#jogador-escolha li, ul#computador-escolha li {
            list-style: inline;
            text-align: center;
            margin: 0;
            padding: 0; 
        }

        ul#jogador-escolha li, ul#computador-escolha li {
            display: inline;

        }
        ul#jogador-escolha li a, ul#computador-escolha li a {
            opacity: .2;

        }
        ul#jogador-escolha li a:hover, ul#jogador-escolha li a.selecionado, ul#computador-escolha li a.selecionado {
            opacity: 1;

        }
        ul#jogador-escolha li a img, ul#computador-escolha li a img {
            max-width: 80px;
        }
        #mensagens {
            background-color: #636e72;
            font-size: 32px;
            border-radius: 5px;
            margin: 40px 0;
            padding: 20px;
        }
<div id="principal">
        <h1 id="titulo">Pedra, Papel e Tesoura</h1>
        <div id="placar">
            <div id="jogador">
                <h2 id="jogador-nome">Jogador</h2>
                <span id="jogador-pontos">0</span>
                <ul id="jogador-escolha">
                    <li><a id="jogador-escolha-1" onclick="jogar(1)"><img src="pedra.png"></a></li>
                    <li><a id="jogador-escolha-2" onclick="jogar(2)"><img src="papel.png"></a></li>
                    <li><a id="jogador-escolha-3" onclick="jogar(3)"><img src="tesoura.png"></a></li>
                </ul>
            </div>
            <div id="versus">vs</div>
                <div id="computador">
                <h2 id="computador-nome">Computador</h2>
                <span id="computador-pontos">0</span>
                <ul id="computador-escolha">
                    <li><a id="computador-escolha-1"><img src="pedra.png"></a></li>
                    <li><a id="computador-escolha-2"><img src="papel.png"></a></li>
                    <li><a id="computador-escolha-3"><img src="tesoura.png"></a></li>
                </ul>
            </div>
        </div>
        <div id="mensagens">&nbsp;</div>
    </div>
    
21.05.2018 / 05:24