Entrar Ainda não tem acesso?
3
respostas

Icone do menu nao esta aparecendo

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 Luciano Proença Andrade
| 21.6k xp | 16 posts
Vendedor e-commerce

Bom amigos, estou fazendo passo a passo do que a professora ensinou na aula, porem não esta dando certo. O meu ícone do menu nao apareceu, o que pode esta errado?

Me ajudem por favor?

HTML

<!DOCTYPE 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">
        <span class="cabecalho__menu-hambuerguer"></span>
            <img src="img/Logo.svg" alt="Logo da AluraBooks">
            <a href="#"><img src="img/Favoritos.svg" alt="Meus Favoritos"></a>
            <a href="#"><img src="img/Sacola.svg" alt="Minhas compras"></a>
            <a href="#"><img src="img/Usuario.svg" alt="Meu perfil"></a>
        </span>
        
    </header>
</body>
</html>

CSS

@import url("styles/header.css");

:root {
    --cor-de-fundo: #ebecee;
    --branco: #ffffff;
}

*{
    margin: 0px;
    padding: 0px;
}

body {
    background-color: var(--cor-de-fundo);
}

STYLE CSS

@import url("styles/header.css");

:root {
    --cor-de-fundo: #ebecee;
    --branco: #ffffff;
}

*{
    margin: 0px;
    padding: 0px;
}

body {
    background-color: var(--cor-de-fundo);
}

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

3 respostas
por Samuel Figueira Aguiar
| 189.1k xp | 16 posts

Até onde consigo ver, parece que você escreveu o nome da classe errado no seu HTML. Repare que a palavra "hamburguer" está escrito errada (está escrito hambuErguer). Quando imagens não aparecem, geralmente é porque o caminho (src) especificado ou a classe está errada. Verifique se é isso.

por Luciano Proença Andrade
| 21.6k xp | 16 posts
Vendedor e-commerce

Boa noite Samuel, tudo bem amigo?

cara eu refiz toda aula passo a passo mas não consegui arrumar o erro, inclusive concertei o erro em que voce me indicou.

o meju background-image: url("../img/menu.svg"); árece nao linkar com meu codigo html e styles, nao consigo achar erro mesmo revendo com toda atencao );

nao esotou conseguindo likar o meu html com meu style e header

segue o codigo que refiz

html

<!DOCTYPE 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">
    <span class="cabeçalho__menu-hamburguer"></span>
        <img src="img/Logo.svg" alt="Logo da alurabooks">
        <a href="#"><img src="img/Favoritos.svg" alt="meus Favoritos"></a>
        <a href="#"><img src="img/Compras.svg" alt="carrinhos de compras"></a>
        <a href="#"><img src="img/Usuario.svg" alt="meus perfil"></a>
    </header>
</body>

</html>

styles.css

@import url("styles/header.css");

:root {
    --cor-de-fundo: #ebecee;
    
}

body {
    background-color: var(--cor-de-fundo);
}

header.css

.cabeçalho__menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/menu.svg");
    display: inline-block;
}
por Luciano Proença Andrade
| 21.6k xp | 16 posts
Vendedor e-commerce

atualização

justamente depois que mandei a questao acima eu refiz e deu certo amigo, nao o que alterei de fato mas de certo! obrigado pelo suporte

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

<!DOCTYPE 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">
    <span class="cabeçalho__menu-hamburguer"></span>
        <img src="img/Logo.svg" alt="Logo da alurabooks">
        <a href="#"><img src="img/Favoritos.svg" alt="meus Favoritos"></a>
        <a href="#"><img src="img/Compras.svg" alt="carrinhos de compras"></a>
        <a href="#"><img src="img/Usuario.svg" alt="meus perfil"></a>
    </header>
</body>

</html>



.cabeçalho__menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    display: inline-block;

}

@import url("styles/header.css");

:root {
    --cor-de-fundo: #ebecee;
    
}

body {
    background-color: var(--cor-de-fundo);
}