3
respostas

Tentei repassar a mesma estrutura para a primeira pagina (index). Só que está diferente a parte do cabeçalho. E o ultimo link vai para linha abaixo (Produtos)

HTML `

</head>
<body>

    <header>
        <div class="cabecalho">
            <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="contatos.html">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>

`CSS

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

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

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

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

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

3 respostas

Olá Paula, eu testei o mesmo código aqui e não tive problemas, confira se o seu código está identado (alinhado) corretamente, o meu código identado ficou da seguinte forma:

HTML:

<header>
        <div class="cabecalho">
            <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="contatos.html">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>

CSS:

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

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

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

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

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

Menu Barbearia Alura

Se o seu código estiver corretamente identado, tente deixar seu navegador em modo fullscreen (tela cheia), e veja se o menu aparece de maneira correta.

Olá, Paula Vitória , tudo bem?

Então, eu estava com o mesmo problema que você. Consegui resolver colocando uma class= "menu" na tag ul na página index.html, como pode ser visto abaixo:

<header>
    <div class="caixa">    
        <h1><img src="/Img/logo.png"></h1>
        <nav>
            <ul class="menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contatos.html">Contatos</a></li>
            </ul>
        </nav>
    </div>
</header>

e no Style.css eu usei o seguinte comando:

.menu {
display: flex;

}

Deu certo! Não sei se é a melhor maneira de resolver, mas consegui tirar o menu da forma de lista. Ah, lembrando que eu referenciei o produto.css no html da página principal também. Espero ter ajudado. Abraço.