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

IMAGEM NÃO APARECE

Boa tarde. fiz e refiz o exercício 04 da aula 09, porém não consigo achar onde estou errando. a imagem dos icones não aparecem!! por favor, poderia me ajudar a achar o erro? obs: o endereço da imagem está correta aqui no meu computador! C:\Users\sanre\Desktop\bio joao da silva\twitter.png

Segue abaixo uma parte do meu código HTML

<img src="C:\Users\sanre\Desktop\bio joao da silva\eu.jpg" alt="Foto do João da Silva">
        <aside class="navegaçao-site">
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</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-sociais">
                <li><a class="github" href="http://www.github.com/joaodasilva">Github</a></li>
                <li><a class="twitter" href="http://www.twitter.com/joaodasilva">Twitter</a></li>
                <li><a class="linkedin" href="http://www.linkedin.com/joaodasilva">Linkedin</a></li>
            </ul>
        </aside>
        <footer id="rodape-pagina">
            &copy; João da Silva 2018
        </footer>

    </body>
</html>

e o CSS

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    line-height: 30px;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;

}

.titulo-principal {
    font-size: 60px;
    background-color: #851944;
    text-align: center;
    color: rgb(250, 255, 250);
    padding: 25px;
    border-bottom: 10px solid rgb(0, 0, 0);
    margin: 0px;
    text-transform: uppercase;    
}

p {
    margin: 20px 0;
    text-align: justify;
}

.depoimentos {

    background-color: #D9E5E3;
    padding: 20px;
    border: 10px solid #C2CCCA;
    width: 250px;
    margin: 20px 40px;
    box-sizing: border-box;

}

.navegaçao-site {

    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;

}

#rodape-pagina {

    background-color: rgb(0, 0, 0);
    color: #F2FFFC;
    padding: 20px;
}

nav a {

    color: #F2FFFC;
    text-transform: lowercase;
}

main a {

    color: #851944;
}

aside a {

    font-family: "Open Sans Condensed", "Arial", sans-serif;
    color: inherit;
}

.corpo-texto {

    width: 720px;
    padding: 30px 0;
    margin-left: auto;
    margin-right: auto;

}

aside h1 {

    font-size: 30px;
    margin-bottom: 25px;
}

strong {

    font-weight: bold;
}

em {

    font-style: italic;
}

h2 {

    font-size: 30px;
}

.icones-sociais a {

width: 40px;
height: 40px;
display: inline-block;
text-indent: -99999px;

}

.github {

    background-image: url(C:\Users\sanre\Desktop\bio joao da silva\github.png);
}

.twitter {

    background-image: url(C:\Users\sanre\Desktop\bio joao da silva\twitter.png);
}

.linkedin {

    background-image: url(C:\Users\sanre\Desktop\bio joao da silva\linkedin.png);
}


article {

    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}

.link-leiamais {

    color: black;
    background-color: #E6E7E8;
    font-size: 24px;
    padding: 8px;
    margin: 16px;
    border: 1px solid black;
    text-align: center;
    display: block;
}
5 respostas

Não é uma boa prática usar o caminho bruto. Tente utilizar o caminho relativo aos arquivos, asssim quando colocar o seu html em um servidor http nao tera de mudar nada.

Exemplo:

pasta do projeto/
    index.html
    css/
        estilo.css
    img/
        github.png
        twitter.png
        linkedin.png
        eu.jpg

No html:

<img src="/img/eu.jpg" alt="Foto do João da Silva">

No Css:

.github {

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

Boa tarde Hiroshi! Sim, não estou mais utilizando no caminho bruto, coloquei as imagens no arquivo certo. mas ainda assim as imagens não aparecem na minha página.

o código HTML está assim

<ul class="icones-sociais">
                <li><a class="github" href="http://www.github.com/joaodasilva">Github</a></li>
                <li><a class="twitter" href="http://www.twitter.com/joaodasilva">Twitter</a></li>
                <li><a class="linkedin" href="http://www.linkedin.com/joaodasilva">Linkedin</a></li>
            </ul>

e css

.icones-sociais li {

width: 40px;
height: 40px;
display: inline-block;
text-indent: -99999px;

}

.github {

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

.twitter {

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

.linkedin {

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

porém a imagem ainda não aparece! não sei onde está o erro

mudei o meu código css colocando

.icones-sociais a {

width: 40px;
height: 40px;
display: inline-block;
text-indent: -9999px;

}

.github {

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

.twitter {

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

.linkedin {

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

aparece os icones porem um abaixo do outro. por que esta acontecendo isso? sendo que o display está inline-block?

solução!

Provavelmente você substituiu o ".icones-sociais li" pelo ".icones-sociais a" e não refez o ".icones-sociais li". Refaça o ".icones-sociais li" com o "display: inline-block;"

Exatamente isso Rodrigo! Obrigado pela ajuda!