Entrar Ainda não tem acesso?
5
respostas

[Dúvida] Minha lista do menu não está alinhada

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Customizando o Menu Hambúrguer

por Yago Busse Costa
| 55k xp | 5 posts
TECNICO DE SISTEMAS ESPECIALISTA

Minha lista do menu está fora de alinhamento e não encontrei o motivo... poriam me ajudar?

.cabecalho-menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.cabecalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.container {
    display: flex;
    align-items: center;
}

.container-imagem {
    padding: 1em;
}

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
    list-style: none;
}

.container-botao:checked ~ .lista-menu {
    display: block;
}

.container-botao {
    display: none;
}

.lista-menu-titulo,
.lista-menu-item {
    padding: 1em;
    background-color: var(--branco);
}

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

5 respostas
por Luis Dias
| 2953.8k xp | 2943 posts
Developer PHP (⌐■_■)

Oi Yago,

O problema de alinhamento da sua lista de menu pode ser resolvido adicionando left: 0; na classe .lista-menu.

Isso garante que a lista se alinhe corretamente com a borda esquerda do seu contêiner pai. 👍

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; /* Adicione esta linha */
    list-style: none;
}

Além disso, para garantir que o menu não ultrapasse as bordas do cabeçalho, você pode adicionar position: relative; ao elemento pai do menu, que no seu caso é o .cabecalho. 🤔

.cabecalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Adicione esta linha */
}

Para saber mais: Entenda o posicionamento em CSS.

Continue praticando e explorando as possibilidades do CSS! 💪

por Yago Busse Costa
| 55k xp | 5 posts
TECNICO DE SISTEMAS ESPECIALISTA

Entao Luis, eu já tinha tentado o left: 0; mas nao rolou, e o position: relative; Já está no elemento pai como já tinha colocado na duvida kkk

por Luis Dias
| 2953.8k xp | 2943 posts
Developer PHP (⌐■_■)

Yago

Coloque aqui o seu index.html

por Yago Busse Costa
| 55k xp | 5 posts
TECNICO DE SISTEMAS ESPECIALISTA 
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="/src/reset.css">
    <link rel="stylesheet" href="/src/styles/imports.css">
</head>
<body>
    <header class="cabecalho">
        <div class="container">
            <input type="checkbox" id="menu" class="container-botao">
            <label for="menu">
                <span class="cabecalho-menu-hamburguer container-imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu-titulo">Categorias</li>
                <li class="lista-menu-item">
                    <a href="#" class="lista-menu-link">Programação</a>
                </li>
                <li class="lista-menu-item">
                    <a href="#" class="lista-menu-link">Front-End</a>
                </li>
                <li class="lista-menu-item">
                    <a href="#" class="lista-menu-link">Infraestrutura</a>
                </li>
                <li class="lista-menu-item">
                    <a href="#" class="lista-menu-link">Business</a>
                </li>
                <li class="lista-menu-item">
                    <a href="#" class="lista-menu-link">Desgin & UX</a>
                </li>

            </ul>
            <img src="/src/img/Logo.svg" alt="logo" class="container-imagem">
        </div>
        <div class="container">
            <a href="#"><img src="/src/img/Favoritos.svg" alt="Favoritos" class="container-imagem"></a>
            <a href="#"><img src="/src/img/Compras.svg" alt="sacola de compras" class="container-imagem"></a>
            <a href="#"><img src="/src/img/Usuario.svg" alt="perfil" class="container-imagem"></a>
        </div>
    </header>
</body>
</html>
por Luis Dias
| 2953.8k xp | 2943 posts
Developer PHP (⌐■_■)

Yago

O problema que não está encontrando o reset.css

Acho que deveria estar assim:

<link rel="stylesheet" href="/src/styles/reset.css">
<link rel="stylesheet" href="/src/styles/imports.css">