3
respostas

Menu centralizado, ao invés de posicionado à direita

Amigos, estou nesta aula, criando a página junto com o professor.

Só que, diferente do resultado apresentado por ele, meu menu ficou centralizado, ao invés de posicionado mais à direita.

Seguem abaixo os códigos da página e do css. Alguém poderia me ajudar, por gentileza?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produtos.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>   
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>
    </body>
</html>
header {
    background: #BBBBBB;
}

.caixa {
    position: relative;
    width: 940px;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}
3 respostas

Opa, acertei aqui.

Mas, é estranho. Se minimizo a janela do navegador, aparece um espaço em branco. Isso é normal?

Segue screenshot:

https://prnt.sc/10pzd4g

Olá amigo, como você ainda esta no começo do curso não deve ter visto as configurações de dinamismo da página, mas não se preocupe, continue firme que você vai chegar lá. Eu também fiz esse curso no final você já deve conseguir resolver isso.

Olá Dante.

Entendi. Obrigado. :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software