Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvida no Ex. 1 da Aula 12 - Desafios finais

Ola pessoal, Eu fiz as diretrizes das pastas, até então tudo ocorreu corretamente, somente as imgs de socials que não esta carregando?

Vou colocar a ordem da pasta.

img/social/linkedin.png img/social/twitter.png img/social/.png

css/site.css _

Caso eu coloco o site.css na primeira pasta(site.css), ele volta a aparecer, alguém sabe o que esta ocorrendo.

Valeu!

3 respostas
solução!

Olá Diego! No caso, o seu problema é que você deve colocar no CSS a seguinte URL: ../img/social/linkedin.png

Mas você pode se perguntar: "Qual a diferença? Porque esse dois pontos?"

O caminho url colocado dentro do CSS é relativo ao próprio arquivo CSS. Exemplo:

Seu arquivo CSS encontra-se dentro de uma pasta chamada css (css/arquivo.css). Caso você ponha uma url para uma imagem (img/social/linkedin.png) dentro de seu arquivo, o arquivo irá procurar a imagem contando como referencia sua própria posição, ou seja ele procurará o seguinte diretório: css/img/social/linkedin.png. Perceba, que ele procurou a partir da pasta onde ele se encontra (/css), então, por esse caminho não existir ele não mostrará a imagem.

Devido a isso, ao você colocar o arquivo CSS na pasta principal, ele encontra a imagem e mostra. Pois você mudou o local do arquivo CSS, mas ele continuará utilizando o local onde o arquivo se encontra como referencia. Então mudando o arquivo CSS para pasta raiz a referencia de imagem que ele irá procura será: pasta_raiz/img/social/linkedin.png. E por esse diretório existir e possuir a imagem informada, então ele mostra a imagem.

Outra forma de fazer é deixar o arquivo CSS dentro da pasta css, mas adicionar ../ ao inicio da URL da imagem. Esta instrução faz com que na hora de procurar o caminho indicado, o css tenha como referencia uma pasta antes da que ele se encontra. Então se ele estiver na pasta css ele terá como referencia a pasta onde a pasta css se encontra, ou seja, a pasta_raiz.

Enfim, espero ter ajudado! Bons Estudos!

Cara, muito obrigado, salvou minha vida, rs.

Abs.

Por nada Diego! Estamos aqui para ajudar! Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software