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

Dúvida no Ex. 3 da Aula 9 - Nem tudo é o que parece "clareza do css"

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 Eluan Souza Silva Dias
| 105.7k xp | 10 posts

NÃO FICOU MUITO CLARO PRA MIM ESTA QUESTÃO , SEGUNDO O EXERCÍCIO DEVERIA FUNCIONAR CONFORME O CÓDIGO ABAIXO : __HTML

<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>

__css

.icones-redes-sociais a {

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



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

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

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

Porém so funciona de eu acrescentar no css : 

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

O que foi que eu não peguei galera ?

3 respostas
solução!
por Estudante
| 123.8k xp | 9 posts

Eluan, acho que precisa incluir o que você colocou mesmo e até poderia tirar o display: inline-block do seletor .icones-redes-sociais a. Porque o que você tem que colocar em linha são os itens da lista (os LIs dentro da UL) e não os links dentro das LIs (As dentro das LIs)

por Eluan Souza Silva Dias
| 105.7k xp | 10 posts

Entendido, está claro agora, obrigado Guilherme!

por Fabrício Francisco Mendes da Silva
| 436.4k xp | 40 posts
Front-end Developer

Eluan, vamos lá!

Se o comportamento esperado for um item do lado do outro, o proposto no exercício não irá funcionar.

A explicação é a seguinte: os elementos HTML são divididos em duas faixas os em bloco e os em linha. Quando um elemento é em bloco ele ocupa toda a largura do elemento pai (equivalente a width: 100% para a explicação). Já os elementos em linha ocupam o tamanho do seu conteúdo (por exemplo o tamanho do texto).

Acontece que os <li> são elementos em blocos, logo eles ocuparam 100% da largura do pai, empurrando um para baixo do outro como na imagem a baixo:

block

Já os elementos em linha se comportam:

inline

Veja que eles contém o tamanho do texto, repare que tem dois espaços em branco antes do <a... que fazem parte do texto.

Por isso, neste exercício é necessário colocar os <li> como display: inline-block;, assim ele fica um híbrido entre os elementos em block e em linha. Ou seja, vão ter a largura do tamanho do conteúdo a menos que você coloque uma largura no CSS.

Conseguiu entender o conceito?

May the Force be with you!