1
resposta

O meu position relative não esta ficando conforme a video aula

Boa noite time, então, estava vendo a aula de cabeçalho, porem após adicionar o pisition relative e os 940px conforme a aula, fica com bordas brancas muito maiores que no da aula, consegue me ajudar:

html:

<!Doctype html>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="produto.css">

        <title>Produtos- Barbearia Alura</title>
    </head>
    <body>
      <div class="caixa">

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

CSS:

header{
    background: #CCCCCC;
    padding: 20px 0;
}

.caixa { position: relative;
    width: 940px;
    margin: 0 auto;


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

Na aula esta assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Porem no meu fica assim:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Consegue me ajudar?

1 resposta

Olá, Thales.

Tudo bem?

Isso está acontecendo porque você iniciou o seu <header> dentro da <div class="caixa"> e fechou ele fora da <div class="caixa"> isso não existe, foi só uma falta de atenção mas de boa é só corrigir esse detalhe e tudo funciona normalmente, o bloco da <div class="caixa"> tem que estar dentro do <header> abrir e fechar a tag dentro dele:

Errado:

<body>
      <div class="caixa">
               <header> 
                   <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>

Certo:

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

Qualquer dúvida manda aqui no fórum. Valeu Thales.