Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Menu, ficou fora do cabeçalho

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Posicionamento dos elementos e atividade Consolidando o seu conhecimento

por Alfonso Antonio
| 54k xp | 3 posts

Bom dia!

Fiz meu exercício e o menu ficou fora do cabeçalho, já comparei meu código com o que está no exercício e estão iguais, não sei por que não ficou igual, anexo meu código .css.

Obrigado!

header {
    background: #BBBBBB;
    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;
}
6 respostas
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Alfonso, tudo bem?

Para que possa testar como o que você tem aí, preciso do html referente a esse Css. Você pode mandar aqui?

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Alfonso, tudo bem? Posso te pedir um favor? Compartilha o projeto completo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

por José Ferreira da Silva
| 23.2k xp | 2 posts
Aux. Administrativo

Ola, Alfonso, tudo bem?

O seu código CSS esta correto. Você precisa usar o arquivo ( reset.css ) para cancelar a configuração que existe por padrão nos navegador. e chamar o arquivo por meio da (tag link). segue abaixo.

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="produtos.css">
</head>
<body>
    <header>
        <div class="caixa">
            <h1><img src="imagens/logo.png"></h1>

                <nav>
                    <ul>
                        <li><a rel="index.html">home</li>
                        <li><a rel="produtos.html">rodutos</li>
                        <li><a rel="contatos.html">contatos</li>
                    </ul>
                </nav>
        </div>
    </header>
</body>
por Alfonso Antonio
| 54k xp | 3 posts

Bom dia!

Obrigado pelas suas respostas, verifiquei que a tag da imagem estava inserida dentro do outra, troquei de lugar e o menu ficou dentro do cabeçalho, porém sem a formatação. Segue o código html e css.

Obrigado!

.css

header { background: #BBBBBB; 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; }

por Alfonso Antonio
| 54k xp | 3 posts

Agora vai certo...

<!DOCTYPE html>
<html lang="pt-br">
    <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"></div>
            <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;
    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;
}
solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Alfonso, olhando os códigos, o problema é porque você definiu o position: absolute para o nav.

Reparei que colocou o position: relative na .caixa, mas, olhando o HTML, tanto o h1 quanto o nav estão fora da div:

<div class="caixa"></div>

Você está abrindo e fechando ela, tente remover o fechamento:

<div class="caixa">

Espero ter ajudado.