Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Problema com icones das redes sociais 2

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

por Igor Veltri Zolezi
| 73.2k xp | 18 posts

Estava com a mesma dúvida levantada no tópico a seguir.

https://cursos.alura.com.br/forum/topico-problema-com-icones-das-redes-sociais-26024

A solução apresentada resolveu o problema, porém não entendi como ela funcionou tecnicamente...

Porquê foi necessário criar uma classe para a tag "ul" com propriedade CSS display: inline-block; --> E outra classe para a tag "a" com propriedade CSS display: block; para os links ficarem alinhados lado a lado ? Caso contrário, eles ficavam um em cima do outro.

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

.icones-sociais a{

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

Desde já, agradeço pela atenção e me coloco a disposição em caso de dúvidas em relação ao tópico.

2 respostas
solução!
por Manoel de Souza Silva Lima
| 589.8k xp | 464 posts
Analista Judiciário - Analista de Sistemas

Igor, os ícones do projeto possuem altura (height) de 40px, entretanto, se deixarmos apenas os ícones no lugar do link (após o deslocamento com text-indent: -9999px), ele (ícone) não ficará com sua área totalmente clicável (se você clicar em algumas partes do ícone não haverá link, pois a altura do link (tag "a") é menor que os 40px [tamanho do ícone]). Assim, com o inline-block é possível colocar todos os ícones em linha (já que eles devem ficar na mesma linha) e fazer com quem eles aceitem a definição de altura (fazendo com que a área do link seja a mesma do ícone, ou seja, que o link "cubra" o ícone inteiro) que, nesse caso, é setado na tag "a".

.icones-sociais a {
    height: 40px; /** estamos dizendo que a altura do link deverá ser 40px para poder ser da mesma altura do ícone, ou seja, cobrir o ícone **/
    /** restante do css omitido **/
}

Dessa forma, estamos dizendo que os "li" podem ter sua altura informada manualmente. Setamos essa altura quando dizemos que as tags "a", que estão dentro das tags "li", terão altura de 40px.

Se ainda houver dúvida, é só avisar! Abraço.

por Igor Veltri Zolezi
| 73.2k xp | 18 posts

Obrigado pela explicação Manoel :)