Question

Currently, I have 2 divs, each with a CSS class. They are directly below eachother in the HTML file, and have the identical code. The only difference between the two is the id and class names. Here’s the code for the HTML:

<div class="myCircle" id="myCircle" top="0px">
</div>
<div id="touchbutton" class="touchbutton" top="0px">
</div>

And the CSS:

.myCircle {
  position: absolute;
  width: 65px;
  height: 65px;
  margin: 0px auto;
  background-color:#ff0829;
  -webkit-border-radius: 32.5px;
}

.touchbutton = {
  position: absolute;
  width: 65px;
  height: 65px;
  margin: 0px auto;
  background-color:#ff0829;
  -webkit-border-radius: 32.5px;
}

The problem is that only one of the circles is appearing, myCircle. When I make touchbutton of class myCircle, it shows up, but not when it is class touchbutton. Is there something in CSS that I’m missing?

Answer 1

Remove the = between .touchbutton and the {.

Also, based on how you have the positioning set up they’re going to be stacked on top of one another (unless you’re setting left: or right: somewhere else). I’d remove the top attribute from within the HTML and remember to set different positions in the classes.