Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Não estou conseguindo formatar da forma correta

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

por Lucas
| 41.1k xp | 10 posts

Insira aqui a descrição dessa imagem para ajudar na acessibilidade , usei esse codigo de 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="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
     <header class="cabeçalho">
          <div class="container">
                    <input type="checkbox" id="menu" class="container__botao">
                    <label for="menu">
                         <span class="cabeçalho__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">Design & UX</a>
     </li>
</ul>

               <img src="img/Logo.svg" alt="Logo da Alurabooks" class=container__imagem>
          </div>
          <div class="container">
                <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos" class=container__imagem></a>
                <a href="#"><img src="img/Compras.svg" alt="Carrinho de compras" class=container__imagem></a>
                <a href="#"><img src="img/Usuario.svg" alt="Meu perfil" class=container__imagem></a>
            </div>
      </header>
</body>

</html>

e esse header CSS: 

.cabeçalho__menu-hamburguer {
width: 24px;
height: 24px;
background-image: url("Menu.svg");
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}

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

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

.container__imagem {
display: flex;
padding: 1em;

}

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

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

.lista-menu__titulo,
.lista-menu__item{
padding:1em;
background-color:var(--branco);
}
.lista-menu__titulo {
color: var(--laranja);
font-weight: 700;
}

.lista-menu__link {
background: var(--azul-degrade);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-transform: uppercase;
}

.container__botao {
display: none;
}"
1 resposta
solução!
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá Lucas!

Parece que o layout do cabeçalho não está se comportando como esperado. A imagem mostra um cabeçalho com um menu hambúrguer à esquerda e ícones de favoritos, carrinho de compras e perfil do usuário à direita, mas sem a lista de categorias visível, o que sugere que o menu hambúrguer ainda não foi ativado ou que há um problema com a exibição da lista de categorias.

Para ajudar na acessibilidade, a descrição da imagem seria: "Captura de tela mostrando um cabeçalho de um site em um dispositivo móvel. À esquerda, há um ícone de menu hambúrguer e, à direita, ícones de favoritos, carrinho de compras e perfil de usuário. O fundo é branco e as dimensões da tela são indicadas como 296 pixels de largura por 527 pixels de altura."

Agora, vamos ao seu problema. Pelo que você descreveu, parece que você está tentando implementar um menu hambúrguer que, ao ser clicado, exibe uma lista de categorias abaixo dele. No entanto, você mencionou que não está conseguindo formatar da forma correta. Vou te dar algumas dicas para verificar e corrigir possíveis problemas:

  1. Certifique-se de que o arquivo styles.css está sendo carregado corretamente e que não há erros de digitação ou caminho incorreto para o arquivo CSS.

  2. No seu HTML, você utilizou a tag span de forma incorreta. Você abriu duas tags span sem fechá-las corretamente. O correto seria <span class="cabeçalho__menu-hamburguer container__imagem"></span>.

  3. No seu CSS, você tem uma aspa dupla extra no final do seu código, remova-a para evitar erros de sintaxe.

  4. Verifique se as variáveis de cores, como --branco, --laranja e --azul-degrade, estão definidas em seu CSS. Se elas não estiverem definidas, as cores não serão aplicadas como esperado.

  5. No seu CSS, você está utilizando o seletor ~ para mostrar a lista quando o checkbox está marcado. Verifique se a estrutura do seu HTML está correta e se os elementos estão na ordem que o seletor espera.

  6. Se o menu ainda não estiver aparecendo corretamente abaixo do cabeçalho, você pode precisar ajustar as propriedades top, left, right, bottom e z-index no seu CSS para posicionar a lista corretamente na tela.

Se após essas verificações o problema persistir, você pode precisar fornecer mais detalhes sobre o que exatamente não está funcionando como esperado. Se possível, compartilhe o comportamento atual e o comportamento esperado para que possamos ajudar de forma mais precisa.

Espero ter ajudado e bons estudos!