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

DIV NÃO FUNCIONA

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

por Thaís Santos Moura
| 34.1k xp | 31 posts

Pessoal,

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>techbooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="cabeçalho">
        <div class="container">
            <span class="cabeçalho__menu-hamburguer"></span>
            <img src="./img/Logo.svg" alt="logo techbooks">
        </div>

        <div class="container">
            <a href="#"><img src="./img/Favoritos.svg" alt="meus favoritos"></a>
            <a href="#"><img src="./img/Compras.svg" alt="carrinho de compras"></a>
            <a href="#"><img src="./img/Usuário.svg" alt="meu perfil"></a>
        </div>

    </header>

</body>
</html>

CSS

.cabeçalho {
    background-color: var(--cor-branco);
    justify-content: space-between;
}

No HTML, a divisão div dentro da header, não foi executada na tela conforme o comando, nem com a aplicação CSS funcionou, ficando a disposição dos ícones assim:

Itela celular

3 respostas
solução!
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Thaís, tudo bem?

Peço que por gentileza compartilhe o link do seu projeto completo, dessa forma posso analisar o seu código na totalidade e simular o problema para ajudá-lo de forma mais assertiva.

Você pode compartilhar o link do seu projeto via Github ou upado no Drive.

Pelo que pude observar do seu arquivo CSS a disposição dos elementos ainda está como block, dessa forma cada div está ocupando a área de conteúdo, você pode colocar o seu display como flex.

.cabeçalho {
    background-color: var(--cor-branco);
    display: flex;
    justify-content: space-between;
}

Perceba também que a propriedade justify-contente é respectiva da flexbox e seu funcionamento vai estar ligado diretamente aquele elemento ser ou não uma flexbox. Caso queira aprender mais sobre flexbox e suas propriedades deixo abaixo um artigo sobre o assunto:

Caso isso não resolva, fico à disposição para achar novas formas de solucionar o problema.

Desejo um bom dia e bons estudos.

por Thaís Santos Moura
| 34.1k xp | 31 posts

Oi Gabriel, tudo bem por aqui, e por ai?

Você citou: "Pelo que pude observar do seu arquivo CSS a disposição dos elementos ainda está como block, dessa forma cada div está ocupando a área de conteúdo", eu não entendi o que quis dizer.

No css com o display e o justify, funcionou.

Acabei não observando o uso do display no vídeo.

Obrigada pela ajuda!

por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Thaís, tudo bem?

Peço desculpas por não ter sido claro na minha primeira resposta.

Retificando a resposta, por padrão, os elementos de uma página possuem a disposição/display "inline" ou "block”, dependendo do elemento. O display “block” faz com que o elemento seja exibido como um bloco de conteúdo, ocupando toda a largura disponível na linha e criando uma quebra de linha antes e depois dele.

Nesse caso estamos lidando com duas divs em um header, como as divs por padrão são dispostas em bloco os demais elementos foram colocados na linha abaixo, conforme demonstrado na sua imagem.

Para solução dessa assertiva usamos a disposição flex, em que podemos alinhar os elementos do cabeçalho em linha ou coluna, porém o padrão deste display é a linha.

Espero ter ajuda, fico à disposição.

Tenha um bom dia e bons estudos.