Entrar Ainda não tem acesso?
2
respostas

Duvida em relação aos icones das redes sociais:

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Desafios finais e atividade Desenvolvendo a página de portfolio

por GABRIEL MENDONÇA RIBEIRO
| 16.6k xp | 12 posts
Gerente de Produto

O primeiro passo que eu fiz foi inserir as redes sociais no html e em seguida o display inline-block no css: 

<ul class="icones-sociais">
            <li>
                <a class="github" href="http://github.com/git-joaodasilva"></a>
                Github
            </li>
            <li>
                <a class="twitter" href="http://twitter.com/twitter-joaodasilva"></a>
                Twitter
            </li>
            <li>
                <a class="linkedin" href="http://linkedin.com/pub/linkedin-joao-da-silva/32/4/50"></a>
                Linkedin
            </li>

        </ul>
    </aside>

Css

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

Logo depois, inseri as imagens:

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

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

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

Porém, as imagens não apareceram. Só aparecem quando eu coloco os seguintes códigos:

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

Percebi que se o width e o height estiver em 0, provavelmente as imagens estão atrás do background. Outra coisa que reparei, é que se eu não inserir o inline-block no "li" e somente no a, na verdade os objetos não ficam do lado do outro. Porém, os ícones aparecem assim que eu coloco o inline-block desse ultimo código. Além disso, depois eu coloquei o text-indent e não acontece nada. O que estou fazendo de errado? E não entendi essa questão dos ícones só aparecerem com inline-block.

2 respostas
por José Antônio da Silva
| 149.8k xp | 64 posts
Estagiario

Por padrão a teg a tem o comportamento inline, isso significa que as propriedades width e height não existe nessa cenário, então você não pode definir altura e largura.

No seu caso, como você que adicionou display com o valor de propriedade inline-block, isso significa que ele vai ter dois comportamentos, inline que é o default da tag a e o block nos possibilita as alterações de altura e largura.

W3SChools:

  • inline: Exibe um elemento como um inline (como por exemplo o <span>). Quaisquer propriedades de altura e largura não terão efeito.

  • block: Exibe um elemento como de bloco (como a tag <p>) Começa em uma nova linha e ocupa toda a largura.

  • inline-block: Exibe um elemento como um contêiner de bloco no nível inline. O elemento em si é formatado como um elemento inline, mas você pode aplicar valores de altura e largura.

Eu aconselho você ler esse Artigo da W3Schools, nele é explicado como o atributo display se comporta e com isso você vai entender um pouco mais como isso afeta o comportamento de algumas tags.

por Axell Brendow Batista Moreira
| 110.7k xp | 130 posts
Software Engineer

O que o professor sugere no vídeo é fazer a técnica image replacement, que consiste em criar uma âncora <a> (link) que tenha como imagem de fundo a imagem desejada e, para que o texto da âncora não fique em cima da imagem, o texto é empurrado para longe.

Os list items <li> devem ficar um do lado do outro, ou seja, eles devem ter a propriedade display: inline-block;.

Já as âncoras devem ter a propriedade display: block; ou display: inline-block;, pois elas precisam ser redimensionáveis para que comportem corretamente o tamanho das imagens. (Lembre-se que elementos com display: inline; não aceitam a propriedade width:).

A única coisa que falta no seu código é empurrar o texto para longe das imagens, para fazer isso use a propriedade de indentação do texto: text-indent: -9999px; (empurra o texto para esquerda e muito longe)