I don’t understand what’s going wrong with my headline

Asked

Viewed 72 times

0

Hello I’m trying to make a header in HTML + CSS for learning, and I’m not understanding why it’s not working, follow below the code:

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

As you can see, there are no social media icons Help me please.

html css

  • Check that the image directory is correct, and also assign a background-size to the items, maybe the images exceed the size of the elements and do not appear, try to center the background-image also using the background-position, and try not to use the href property as a selector in css, assign a class or something like...

  • Is there an error in the Chrome devtools console? Is the file extension correct? Eh png itself or svg for example?

  • Hugo, I am using firefox, does not present any error in the console, and yes, I am using png images.

1 answer

0


Your code has a few little problems the first time you write the wrong selector .social a [href*="facebook.com"] { } shall not have space between the a and the clasps []

inserir a descrição da imagem aqui

The right thing would be: .social a[href*="facebook.com"] { } with the a glued to the square brackets a[]

The other problem: You put the text-indent: -9999px; in li and should be in the a, as well as the display:block and the width and height. Solving this was as in the image below

inserir a descrição da imagem aqui

If code has other details, but let’s focus on what was asked, now you fix it and get on with your studies. And I already tell you to abandon the float. Study flex that you will get better.

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>

  • 1

    Thank you, you’ve served me well.

  • @Gelsonlopesdonascimento legal que ajudou ai, valeu a força

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.