Entrar Ainda não tem acesso?
2
respostas

[Dúvida] menu desalinhado

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Pseudo-classes e combinadores

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

Olá, alguém poderia me ajudar? o menu ficou desalinhado tanto na versão 1024 quanto na 1728. Alguém já havia me ajudado antes dando a dica de colocar 'left:0' na versão mobile, mas nas outras não consegui.

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

`

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
<div class="container">

    <input type="checkbox" id="menu" class="container__botao">

    <label for="menu" class="container__rotulo">
        <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 & UX</a>
        </li> 
    </ul>

    <img src="img/Logo.svg" alt="logo da alura" class="containel__logo">
    <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
</div>

<ul class="opcoes">
    <input type="checkbox" id="opcoes-menu" class="opcoes__botao">
    <label for="opcoes-menu" class="opcoes__rotulo">
    <li class="opcoes__item">Categorias</li>
</label>
<ul class="lista-menu">

    <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 & UX</a>
    </li> 
</ul>
    <li class="opcoes__item"><a href="#" class="opcoes__link">Favoritos</a></li>
    <li class="opcoes__item"><a href="#" class="opcoes__link">Minha estante</a></li>
</ul>

<div class="container">
    <a href="#">
        <img src="img/favoritos.svg" alt="Meus favoritos" class="container__imagem container__imagem-transparente">
    </a>
    <a href="#" class="container__link">
        <img src="img/Sacola.svg" alt="Sacola de compras"class="container__imagem"> 
        <p class="container__texto">Minha sacola</p>        
    </a>
    <a href="#" class="container__link">
        <img src="img/perfil.svg" alt="Meu prefil"class="container__imagem">
        <p class="container__texto">Meu perfil</p> 
    </a>
</div>
```
2 respostas
por Paula Dandara dos Santos Medeiros
| 21.1k xp | 19 posts
.cabecalho__menu-hamburguer {
width: 48px;
height: 48px;
background-image: url("../img/Menu.svg");
display: inline-block;
background-repeat: no-repeat;
background-position: center;
}

.container__botao:checked ~ .container__rotulo > .cabecalho__menu-hamburguer{
    background-image: url("../img/Menu\ Aberto.svg");
}

.container__botao:checked ~ .container__rotulo{
background: var(--azul-degrade);
}

.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%;
    width: 55vw;
    left: 0;
    z-index: 10;
}

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

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

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

.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;
}

.container__titulo{
    display: none;
}

.opcoes{
    display: none;
}

.container__texto{
    display: none;
}


@media screen and (min-width: 1024px) {
    .container__titulo, 
    .container__titulo--negrito{
        font-family: var(--fonte-secundaria);
        font-size: 30px;
    }

    .containel__logo{
        margin-left: 4em;
    }
    .container__titulo{
        font-weight: 400;
        display: block;
    }

    .container__titulo--negrito{
        font-weight: 700;
    }

    .opcoes{
        display: flex;
    }

    .opcoes__item{
        padding: 1em;
        text-transform: uppercase;
    }

    .opcoes__link{
        text-decoration: none;
        color: var(--preto);
        font-size: 16px;
    }

    .container__imagem-transparente,.cabecalho__menu-hamburguer{
        display: none;
    }

    .opcoes__botao:checked ~ .lista-menu{
        display: block;
        width: auto;
        left: 22em;
    }

    .opcoes__botao{
        display: none;
    }

    .opcoes__botao:checked ~ .opcoes__rotulo> .opcoes__item{
        background: var(--azul-degrade);
        color: var(--branco);
    }

    .opcoes__item{
        padding: 2em 1em;
    }

    .lista-menu__item:hover{
        background: var(--azul-degrade);
    }

    .lista-menu__item:hover > .lista-menu__link{
        -webkit-text-fill-color: var(--branco);
        text-decoration: none;
    }

    .lista-menu{
    padding: 0%;
    }
}

@media screen and (min-width: 1728px){
    .container__link{
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: var(--preto);
        font-size: 20px;
    }

    .cabecalho{
        padding: 0.5em 1em;
    }

    .opcoes{
        margin-right: auto;
    }

    .container__titulo{
        margin-right: 2em;
    }

    .container__texto{
        display: block;
    }


}
por Victor Costa Santos
| 1841.6k xp | 3524 posts
Alura Scuba Team Monitor de ForumOps

Olá Paula, tudo bem?

Na sua class opcoes__botao:checked ~ .lista-menu é utilizado o valor left, ele é bacana e funcional na versão mobile, pois ele "gruda" o elemento a extremidade, reparando um erro relatado por ti nesse outro tópico, no qual o elemento fica faltando parte da div, neste caso o with:auto já faz o ajuste adequado reparando o erro e se adaptando ao elemento pai, deixo o trecho de código reparado mais abaixo:

opcoes__botao:checked ~ .lista-menu{
        display: block;
        width: auto;
    }

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Um grande abraço e até mais!

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