Problems with positioning icons

Question

Problems with positioning icons

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

Good morning, friends,

I'm with a friend creating a website to practice our studies, but we have a big problem in these social networking buttons, we can not position this image in the center of the circles, can anyone give us a light? >

HereistheHTML/CSScode:

/REDE SOCIAL INTERATICA INICIO/ section {
  margin: 10px auto;
  width: 1200px;
  height: 90px;
}

.rede {
  width: 50px;
  height: 50px;
  float: right;
  margin-left: 30px;
  transition: all 0.4s ease-out;
  border-radius: 50%;
}

.rede#facebook {
  background-color: #2372a3;
}

.rede#twitter {
  background-color: #0084b4;
}

.rede#instagram {
  background-color: #3f729b;
}

.rede#snap {
  background-color: #fc0;
}

.rede#plus {
  background-color: #dd4b39;
}

.rede#youtube {
  background-color: #b00;
}

.icone {
  padding: 3px;
  width: 3%;
  position: absolute;
  margin-right: 15%;
  transform: translate(15%, 15%, 1%);
  float: right;
}

/REDE SOCIAL FINAL/

<h1>Atari Mania</h1>

<section>
  <div class="rede" id="facebook">
    <img class="icone" src="imagens/facebook.png" />
  </div>

  <div class="rede" id="twitter">
    <img class="icone" src="imagens/twitter.png" />
  </div>

  <div class="rede" id="instagram">
    <img class="icone" src="imagens/instagram.png" />
  </div>

  <div class="rede" id="snap">
    <img class="icone" src="imagens/snap.png" />
  </div>

  <div class="rede" id="plus">
    <img class="icone" src="imagens/plus.png" />
  </div>

  <div class="rede" id="youtube">
    <img class="icone" src="imagens/youtube.png" />
  </div>
</section>

Thanks in advance for any help!

html css

asked by anonymous 12.05.2018 / 18:13

2 answers

3

J.G your code is very close to working, although the Bootstrap makes things easier to avoid it for now. The best you can do first is to learn the basics of HTML and CSS before quitting using any framework that already brings things ready. Do not hold on to crutches for the time to start learning by walking with your own legs, even because of your code, I see you are on the right path!

Now let's get the answer that's what matters. As I said your code is almost right. in HTML I did not even have to move, and in CSS I just put 2 or 3 lines.

In class .rede I needed to put position:relative , so that the images inside the balls assume this class as reference source of size and position.

And in class .icone I only needed to set the top and left and set the transform:translate that you were using wrong and ready. Now your image is aligned in the center of the balls.

See the result as it was!

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

section {
  margin: 10px auto;
  width: 1200px;
  height: 90px;
  text-align: center;
}

.rede {
  width: 50px;
  height: 50px;
  /* float: right; */
  display: inline-block;
  margin-left: 30px;
  transition: all 0.4s ease-out;
  border-radius: 50%;
  position: relative;
}

.rede#facebook {
  background-color: #2372a3;
}

.rede#twitter {
  background-color: #0084b4;
}

.rede#instagram {
  background-color: #3f729b;
}

.rede#snap {
  background-color: #fc0;
}

.rede#plus {
  background-color: #dd4b39;
}

.rede#youtube {
  background-color: #b00;
}

.icone {
  padding: 3px;
  width: 50%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<h1>Atari Mania</h1>

<section>
    <div class="rede" id="facebook">
    <img class="icone" src="http://placeskull.com/50/50"/></div><divclass="rede" id="twitter">
    <img class="icone" src="http://placeskull.com/50/50"/></div><divclass="rede" id="instagram">
    <img class="icone" src="http://placeskull.com/50/50"/></div><divclass="rede" id="snap">
    <img class="icone" src="http://placeskull.com/50/50"/></div><divclass="rede" id="plus">
    <img class="icone" src="http://placeskull.com/50/50"/></div><divclass="rede" id="youtube">
    <img class="icone" src="http://placeskull.com/50/50" />
    </div>
</section>

13.05.2018 / 16:40

How to remove list item within loop? [duplicate] How to put a button in a textarea in ASP.NET, C #?

score 1 · Accepted Answer

Apparently it's some part of the foreign code that is interfering. Eg some position in an outer class or width variation.

As the idea is in practice studies, I suggest using a framework for creating ex-Bootstrap views ( link ). Grid makes your site does not have this type of problems and moreover do using mobile-first concepts.

You can get use of IconFinder icons ( link )