Aula 12, exercício 01 | HTML5 e CSS3 I: Suas primeiras páginas da Web

2
respostas

por Matheus Maia

| 104.8k xp | 1 posts

Fala galera, estou preso no exercício 01 da aula 12 do curso HTML5 e CSS3 I: Suas primeiras páginas da Web.

Criei os diretórios img e css, movi as imagens para a pasta img e os arquivos css para a pasta css. Até aqui tudo bem, no head das páginas, eu alterei o link dos arquivos CSS de "reset.css" e "site.css" para "css/reset.css" e "css/site.css"

O problema é no meu arquivo site.css.

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

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

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

Se eu passar o mouse encima do link, o brackets me da uma miniatura da visualização do arquivo, aparece a imagem, se eu colocar "../img/github.png", eu não tenho a visualização da imagem, ou seja, entendo que o caminho esteja correto, mas os icones simplesmente não aparecem quando eu abro o arquivo bio.html no navegador.

por favor, ajudem, já esgotei as minhas opções e devo estar deixando alguma coisa passar em branco..

2 respostas

por Fabio Aguiar

| 167.6k xp | 12 posts

05/06/2016

No caso do código aí em cima está apenas com um ponto para referenciar a pasta acima. Se for isso coloque ../

Já colocou a class no link do html?

No meu css está

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

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

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

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

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

No meu html está:

 <ul class="icones-redes-sociais">
            <li>
                <a href="https://github.com/joaodasilva" class="github">
                    Github
                </a>
            </li>
            <li>
                <a href="https://twitter.com/joaodasilva" class="twitter">
                    Twitter
                </a>
            </li>
            <li>
                <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin">
                    LinkedIn
                </a>
            </li>
        </ul>

Vê se te ajuda

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

06/06/2016

Matheus provavelmente você deve ter uma estrutura parecida com essa:

css
  // arquivos .css
img
  // imagens
index.html

Para que seu arquivo css consiga carregar as imagens você deve informar o ../img dizendo para ele "volte uma pasta e entre na pasta img:

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

Certifique-se que o nome e extensão das imagens estejam corretas, verifique se foi carregado o arquivo .css corretamente e por ultima veja se adicionou as classes nos seu a's.

Espero ter ajudado