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

Image Replacement :: Imagem não aparece

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Nem tudo é o que parece e atividade Image replacement

por Gabrielly de Andrade da Silva
| 53.9k xp | 10 posts

Olá, a imagem não aparece quando eu tento utilizar a técnica apresentada no vídeo.

Segue o código

.icones-redes-sociais li {
  display: inline-block; 
}

.icones-redes-sociais a{
  background-image: url("img/github.png");
}
<aside class="navegacao-site">
        <div>
        <h1>João da Silva</h1>
          <nav>
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="portifolio.html">Portifólio</a></li>
              <li><a href="bio.html">Sobre mim</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="contato.html">Contato</a></li>
            </ul>
          </nav>
          <ul class="icones-redes-sociais">
            <li><a href="https://github.com/git-joaodasilva">GitHub</a></li>
            <li><a href="https://twitter.com/twitter-joaodasilva">Twitter</a></li>
            <li><a href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508">Linkedin</a></li>
          </ul>
        </div>
      </aside>
6 respostas
por Gabrielly de Andrade da Silva
| 53.9k xp | 10 posts

Código completo: https://gist.github.com/gaby-andrade/863bf80a040a0eb43b3640589af3a7d0

Realmente não sei o que está acontecendo

por Laura Madalosso
| 56.2k xp | 3 posts
Front-end

Gabrielly, você tem certeza que o arquivo de imagem está dentro da pasta img? No link que você enviou não aparece a pasta 'img'.

Você pode tentar usar uma foto com link externo para testar > https://placekitten.com/

por Gabrielly de Andrade da Silva
| 53.9k xp | 10 posts

Sim, a imagem está dentro dessa pasta. Com link externo funciona. Mas esta muito estranho, minha estrutura de pastas está assim http://i66.tinypic.com/qn5h0m.png

solução!
por Laura Madalosso
| 56.2k xp | 3 posts
Front-end

Ah! Você precisa dizer como entrar na sua pasta img. Como você separou a pasta css e a img, o correto seria colocar "../img/imagem.png".

Isso faz com que o navegador saiba que precisar sair da pasta css e achar a pasta imagem dentro do seus arquivos.

Faz sentido o que eu falei? O código correto é:

.icones-redes-sociais a{
  background-image: url("../img/github.png");
}
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Gabrielly para aplicar a técnica do image replacement você deve fazer assim:

No html

1 - colocar uma classe ícones-redes-sociais no elemento pai o <ul>, isso você já fez.Ok!

2 - Agora adicione uma classe a cada link especificando cada um conforme abaixo:

 <a class="github" href="https://github.com/joaodasilva">Github</a>

Perceba que foi adicionado uma classe github, assim você também fará adicionando as classes twitter e linkedin nos seus pespectivos links.

No CSS

1 - Adicione a seguinte regra abaixo para os links dentro da classe icones-redes-sociais

.icones-redes-sociais a {
    width: 40px;
    height: 40px;
    display: inline-block;
    text-indent: -99999px;
}

Perceba que não estamos adicionando a imagem estamos fazendo somente com que o texto do link suma para dar lugar a imagem.

2 - Adicione a imagem conforme a classe correspondente:


.github {
    background-image: url("../img/github.png");
}

.twitter {
    background-image: url("../img/twitter.png");
}

.linkedin {
    background-image: url("../img/linkedin.png");
}

Espero ter ajudado e bons estudos.

por Gabrielly de Andrade da Silva
| 53.9k xp | 10 posts

Obrigada gente. Foi um erro bobo, nem tinha percebido.

Valeu!