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

menu no lugar errado

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 Paula Dandara dos Santos Medeiros
| 21.1k xp | 19 posts

a lista do meu menu ficou posicionada fora da tela. Alguém pode me ajudar? obrigada! Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Books</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="header.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> 
            <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</a>
            </li> 
        </ul>

        <img src="img/Logo.svg" alt="logo da alura">
    </div>

    <div class="container">
        <a href="#"><img src="img/favoritos.svg" alt="Meus favoritos" class="container__imagem"></a>
        <a href="#"><img src="img/Sacola.svg" alt="Sacola de compras"class="container__imagem"> </a>
        <a href="#"><img src="img/perfil.svg" alt="Meu prefil"class="container__imagem"></a>
    </div>

</header>
</body>
</html>
@import url("styles/header.css");

:root {
    --cor-de-fundo: #EBECEE;
    --branco: #ffffff;
    --laranja:#EB9B00; 
    --azul-degrade: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
}

body {
    background-color: var(--cor-de-fundo);
}
.cabecalho__menu-hamburguer {
width: 48px;
height: 48px;
background-image: url("../img/Menu.svg");
display: inline-block;
background-repeat: no-repeat;
background-position: center;
}

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

.container{ 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.container__imagem{
    padding: 0.7em;
}

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

}

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

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

.lista-menu__titulo{
    color: var(--laranja);
}

.lista-menu__link{
    background: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;

}
4 respostas
por Paula Dandara dos Santos Medeiros
| 21.1k xp | 19 posts

vi agora que o .lista-menu esta sem o width 60vw que a instrutora fala pra colocar, mas mesmo colocando o texto fica para o lado.

por Victor Costa Santos
| 1974.9k xp | 3821 posts
Alura Scuba Team Monitor de ForumOps

Olá Paula, tudo bem?

Fico muito feliz em saber que conseguiu encontrar a solução para o problema. Lembre-se sempre que a comunidade Alura está aqui para ajudá-la no que precisar.

Desejo a você muito sucesso em seus projetos e que alcance todos os seus objetivos.

Não hesite em nos contatar caso precise de ajuda novamente.

Um grande abraço e até a próxima!

por Paula Dandara dos Santos Medeiros
| 21.1k xp | 19 posts

eu não resolvi na verdade, só coloquei uma coisa que esta faltando mas ficou do mesmo jeito que esta na foto

solução!
por Victor Costa Santos
| 1974.9k xp | 3821 posts
Alura Scuba Team Monitor de ForumOps

Olá Paula, tudo bem?

Peço desculpas por achar que você conseguiu achar a solução, interpretei erroneamente sua resposta, mas que bom que você retornou.

Para resolver o problema do elemento que está saindo da tela pelo lado esquerdo, é necessário ajustar a posição horizontal do elemento dentro do contêiner pai. Isso pode ser feito adicionando a propriedade left ao seletor .lista-menu no arquivo CSS fornecido. Por exemplo:


.lista-menu {
  display: none;
  position: absolute;
  top: 100%;
  width: 60vw;
  left: 0; /* adicionado para ajustar a posição horizontal */
}

Ao adicionar essa propriedade, o elemento .lista-menu será posicionado na extremidade esquerda do contêiner pai, evitando que ele saia da tela. Lembre-se de ajustar o valor de left de acordo com as necessidades do seu layout.

Espero ter ajudado um grande abraço e até mais!

Sucesso

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!