Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kristiana Georgieva
Kristiana Georgieva
14,595 Points

Problem with CSS positions

Hi everyone. I'm trying to recreate the 'other person is currently typing' effect from Facebook.

I have a div and three spans. For whatever reason I can't move the spans over the div. I've tried all sorts of position combination, but nothing seems to work. If anyone can pitch in with a solution, I'd be very grateful.

Here's the HTML:

<html>
  <head>
    <meta charset="utf-8">
    <title>play controls</title>
  </head>
  <body>
    <div class="one">
      <span></span>
      <span></span>
      <span></span>
    </div>

  </body>
</html>

and the CSS:

body { 
 top: 0
 left: 0;
}

.one {
  width: 100px;
  height: 50px;
  top: 50px;
  left: 50px;
  position: absolute;
  border-radius: 25px;
  background-color: lightgrey;
  z-index: -2;
}

span {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 250px;
}
span:nth-child(1) {
  left: 120px;
  animation: bounce 1s ease-in-out 0.2s infinite;
}

span:nth-child(2) {
  left: 140px;
  animation: bounce 1s ease-in-out 0.5s infinite;
}

span:nth-child(3) {
  left: 160px;
  animation: bounce 1s ease-in-out 0.7s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0px);
  }
   50% {
    transform: translateY(10px);
  }
}

1 Answer

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

With absolute positioning, you put them where you want. That div is only 100px wide, just don't shift them so far:

span:nth-child(1) {
  left: 25px;  /* was 120 */
  animation: bounce 1s ease-in-out 0.2s infinite;
}
span:nth-child(2) {
  left: 45px;  /* was 140 */
  animation: bounce 1s ease-in-out 0.5s infinite;
}
span:nth-child(3) {
  left: 65px;  /* was 160 */
  animation: bounce 1s ease-in-out 0.7s infinite;
}

Also I noticed the "top" property in the "body" rule is missing the semicolon at the end (not that it matters, since it's not positioned).

Kristiana Georgieva
Kristiana Georgieva
14,595 Points

I can't believe I forgot about the added positioning in the nth-child properties. Thanks so much, Steven!