1
resposta

Problemas no codigo

por Jefferson Viganó dos Passos
| 97.5k xp | 6 posts

Olá pessoal Estou começando e fiz esse inicio de pagina meio por conta e travei em 2 pontos Estou apanhando pra deixar o logo no automático e meu menu esta funcionando, porém, quando adicionei o background ele ficou preso a area dele, alguém pode ajudar!

                    <head>
                        <meta charset="UTF-8">
                        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
                        <link rel="stylesheet" href="style.css">
                    </head>
                        <body>
                            <header>
                                <div class="container">
                                    <img src="img/Studio-elah.png" class="logo">
                                    <input type="checkbox" id="chec">
                                        <label for="chec">
                                        <img src="img/menuicon.png" class="icon">
                                        </label>
                                        <nav>
                                            <ul>
                                                <li><a href="index.html">Home</a></li>
                                                <li><a href="serviços.html">Serviços</a></li>
                                                <li><a href="produtos.html">Produtos</a></li>
                                                <li><a href="cursos.html">Cursos</a></li>
                                            </ul>
                                        </nav>    
                                </div>
                                <main>

                                </main>
                            </header>                    
                        </body>
                </html>

                CSS
                        *{
                    padding: 0;
                    margin: 0;
                }
                /*menu*/
                .icon{
                    width: 40px;
                }
                a{
                    text-decoration: none;
                    color: black;
                }
                body{
                    font-family: arial;
                }
                ul{
                    position: absolute;
                    list-style: none;
                    top: 70px;
                }
                input[type="checkbox"]{
                    display: none;
                }
                nav{
                    position: absolute;
                    background-color: rgba(16,16,16,.5);
                    width: 350px;
                    height:100%;
                    left: -350;
                    transition: all .5s;
                }
                input[type="checkbox"]:checked~nav{
                    transform: translateX(350px);
                }
                a{
                    text-transform: uppercase;
                    font-family: 'Montserrat';
                    display: block;
                    padding: 20px 40px;
                    color: aliceblue;
                }
                a:hover{
                    background-color: rgb(227, 205, 221);
                    color: black;

                }
                label{
                    padding: 15px;
                    position: absolute;
                    z-index: 1;
                }
                .container{
                    position: relative;
                    width: 100%;
                    height: 200px;
                    background: url(img/roseg.png);
                    border:"none";
                }
                .logo{
                    position: absolute;
                    width: 300px;
                    margin:50px 42%; 
                }
1 resposta
por Sarah Ocy Sousa Medeiros
| 2178.2k xp | 4545 posts

Oi, Jefferson! Tudo bem?

Desculpa a demora por um retorno.

Ao clicar no ícone responsável por exibir o menu, apenas duas opções estão visíveis. Isso ocorre, pois, o background que abrange o menu possui uma altura mais curta do que deveria para abranger todas as opções listadas. Para resolvermos isso e tornarmos visíveis todas essas opções ao clicarmos no menu, devemos apenas aumentar o valor atribuído ao comando height (altura) no css do nosso nav, que se encontra dentro da classe container, deixando o nosso código no css da seguinte maneira:

nav{
    position: absolute;
    background-color: rgba(16,16,16,.5);
    width: 350px;
    height: 200%;
    left: -350;
    transition: all .5s;
}

Entretanto, em relação a logo automática, se for em relação a adaptação da tela para dispositivos móveis (responsividade) - onde a imagem se ajusta automaticamente ao tamanho da tela, podemos alterar o nosso css da imagem de class logo para:

.logo{
    position: absolute;
    width: 100%;
    height: auto;
}

Acrescento que este e outros detalhes você verá nos cursos da "Formação HTML e CSS para projetos web", inclusive será construído um site que preze pela responsividade e também será ensinado várias propriedades do CSS. Te faço o convite para realizar esta formação e mergulhar ainda mais neste conhecimento:

Espero ter ajudado! Qualquer dúvida, estarei à disposição!

Um forte abraço e bons estudos!

Caso este post tenha te ajudado, por favor, marcar como solucionado ✓