0

Olá estou tentando fazer um cabeçalho em HTML + CSS para aprendizado, e não estou entendendo o porque não está funcionando, segue abaixo o código:

footer {
  background-image: url(../img/fundo-rodape.png);
  background-color: #333;
  clear: both;
  padding: 20px 0;
  height: 100px;
}

footer img {
  margin-top: 25px;
}

footer.container {
  position: relative;
}

.social {
  position: absolute;
  top: 12px;
  right: 0;
}

.social li {
  height: 32px;
  width: 32px;
  display: block;
  text-indent: -9999px;
}

.social a [href*="facebook.com"] {
  background-image: url(../img/facebook.png);
}

.social a [href*="twitter.com"] {
  background-image: url(../img/twitter.png);
}

.social a [href*="plus.google.com"] {
  background-image: url(../img/googleplus.png);
}

.social li {
  float: left;
  margin-left: 25px;
}
<footer>
  <!--rodapé-->
  <div class="container"><img src="../img/logo-rodape.png" alt="Logo da Mirror Fashion">
    <ul class="social">
      <li class="social-google"><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
      <li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
      <li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
    </ul>
  </div>
</footer>

teste

Como podem ver não aparece os icones das redes sociais Me ajudem por favor.

3
  • Verifique se o diretório das imagens está correto, e também atribua um background-size para os itens, talvez as imagens excedam o tamanho dos elementos e não apareçam, tente centralizar o background-image também utilizando o background-position, e tente não utilizar a propriedade href como seletor no css, atribua uma classe ou algo do tipo... Commented 22/09/2019 às 18:03
  • Aparece algum erro no console do devtools do chrome? A extensão dos arquivos esta correta? Eh png mesmo ou svg por exemplo?
    – hugocsl
    Commented 22/09/2019 às 19:16
  • Hugo, estou usando no firefox, não apresenta nenhum erro no console, e sim, estou usando imagens png. Commented 22/09/2019 às 21:15

1 Resposta 1

0

Seu código tem uns probleminhas o primeiro que vc escreve o seletor errado .social a [href*="facebook.com"] { } não deve ter espaço entre o a e os colchetes []

inserir a descrição da imagem aqui

O correto seria: .social a[href*="facebook.com"] { } com o a colado nos colchetes a[]

O outro problema: Vc colocou o text-indent: -9999px; na li e deveria ser no a, assim como o display:block e o width e height. Resolvendo isso ficou como na imagem abaixo

inserir a descrição da imagem aqui

Se código tem outros detalhes, mas vamos focar no que foi perguntado, agora vc arruma isso e segue com os estudos. E já te falo para abandonar o float. Estude flex que vc vai se dar melhor.

footer {
    background-image: url(../img/fundo-rodape.png);
    background-color: #333;
    clear: both;
    padding: 20px 0;
    height: 100px;
}

footer img {
    margin-top: 25px;
}

footer.container {
    position: relative;
}

.social {
    position: absolute;
    top: 12px;
    right: 0;
    list-style: none;
}


.social li a {
    height: 32px;
    width: 32px;
    display: block;
    text-indent: -9999px;
}

.social a[href*="facebook.com"] {
    background-image: url(https://unsplash.it/20/20);
}

.social a[href*="twitter.com"] {
    background-image: url(https://unsplash.it/20/20);
}

.social a[href*="plus.google.com"] {
    background-image: url(https://unsplash.it/20/20);
}

.social li {
    float: left;
    margin-left: 25px;
}
<footer>
    <!--rodapé-->
    <div class="container"><img src="https://unsplash.it/200/80" alt="Logo da Mirror Fashion">
        <ul class="social">
            <li class="social-google"><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
            <li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
            <li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
        </ul>
    </div>
</footer>

2
  • 1
    Valeu, serviu bastante. Commented 22/09/2019 às 22:29
  • @GelsonLopesdoNascimento legal que ajudou ai, valeu a força
    – hugocsl
    Commented 22/09/2019 às 22:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .