Entrar Ainda não tem acesso?
2
respostas

Ao colocar o position absolute o meu header acaba sumindo, fiz testes e larguei outros tipos de position e não sumiu, qual o problema? Ele acaba ficando

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

por Samuel Maas Anton
| 20.4k xp | 27 posts
Informática 
    <!DOCTYPE html lang = "PT-BR">
        <html>
            <head>
                <meta charset = "UTF-8">
                <title>Projeto novo</title>

                <link rel="stylesheet" href="reset.css">
                <link rel="stylesheet" href="style.css">
            </head>

            <body>
                <header>
                    <nav>
                        <h1><img src="img\banner.jpeg"></h1>

                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="sobre.html">Sobre</a></li>
                            <li><a href="contato.html">Contatos</a></li>
                        </ul>
                    </nav>
                </header>
            </body>
        </html>


body{

}

header{
    background: orange;
}

nav{
    position: absolute;
}

nav li{
    display: inline;
    font-size: 30px;
    margin-left: 30px;

}

nav a{
    text-transform: uppercase;
    color: black;
    font-weight: bold;
    text-decoration: none;
}

img{
    height: 12%;
    width: 12%;
}

`

2 respostas
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Samuel, tudo bem?

Você definiu a div com a classe caixa dentro do header para que ela fique relativa à nav que está com o position absolute? Dessa forma:

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

E no css:

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

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

}

Testa e me fala se a nav pegou o contexto correto :}

por Samuel Maas Anton
| 20.4k xp | 27 posts
Informática

Eu acabei achando o meu erro, mas agradeço mesmo assim pela ajuda