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

Nem tudo é o que parece !!!

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

por Alexandre Araújo
| 62.9k xp | 44 posts

Segui todas as instruções direitinho mas a imagem das redes sociais continuam saindo cortadas (sai um inteiro e a metade dela do lado) segue abaixo meu código 

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

.icones-redes-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);
}
6 respostas
por Natan Souza
| 2121.7k xp | 3733 posts
Instrutor

Oi Alexandre, tudo certo?

Posta seu HTML também por favor.

Já verifique esses pontos:

  • a letra maiúscula nas classes (CSS é case-sensitive, tem que ser igual ao que você chama no HTML)
  • erro de sintaxe na segunda regra que voce postou
  • abaixo dessa mesma regra, o text-indent não está inserido em nenhuma regra

Abcs!

por Alexandre Araújo
| 62.9k xp | 44 posts
        <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-redes-sociais">
                <li>
                    <a class="Github" href="https://github.com/joaodasilva">
                        Github
                    </a>
                </li>
                <li>
                    <a class="Twitter" href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class="Linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        Linkedin
                    </a>
                </li>
            </ul>
por Alexandre Araújo
| 62.9k xp | 44 posts

ja arrumei o text-indent mas continua com o problema da logo

por Alexandre Araújo
| 62.9k xp | 44 posts

Aguardando resposta . . .

solução!
por Talita Azevedo
| 221.8k xp | 182 posts
Moderador

Alexandre, Verifiquei que o seu CSS tem um errinho na seguinte regra.

.icones-redes-sociais a {
    width: 40px

Faltou adicionar o ponto e virgula para adicionar o comando.

.icones-redes-sociais a {
    width: 40px;

Poderia testar por favor?

por Natan Souza
| 2121.7k xp | 3733 posts
Instrutor

Oi Alexandre,

Como conferiu o ponto-e-vírgula que a Talita mencionou? Seu código aqui nesse Jsbin está ok.

Abcs