Simon Game: CSS issues

1

Hi all,
I’ve been trying to figure out how to center the “settings” portion of my simon game for days now, and I can’t possibly figure it out. I’ve tried messing with the position countless times and creating wrapper divs, but every time I do such, either the css screws up my entire work so far, or the center div will move when the page is resized. I’d just like the center “settings” div to stay put in the middle of the Simon circle.

Thanks all for your help.

2

Hi @Giagnus64

You want to make the settings div a child of the container so that you can position the settings relative to it.

You can then position the settings using top/left to center it. Using percentages would be a good idea and you may want to look into the css calc function to position it correctly because css positions based on the top left of an element, not the center of it.

If you get stuck, you could do it something like this:

<div class="container">
  <div class="color red"></div>
  <div class="color blue"></div>
  <div class="color green"></div>
  <div class="color yellow"></div>
  <div class="settings">
      <p class="logo">Simon</p>
      <div class="buttons">
      <button class="start">Start</button>
        <div class="stricttoggle on">
          <span>Strict Mode:</span>
          <button class="strictbutton">On</button>
        </div>
      </div>
      <div class="turncount">
        <p>Sequence:</p><p class="counter">00</p>
      </div>
  </div>
</div>

.container{
  position: relative;
  width:600px;
  height:600px;
  background-color:black;
  margin:auto;
  border-radius:50%;
}
.settings{
  position:absolute;
  width:250px;
  height:250px;
  background-color:white;
  border-radius:100%;
  border:solid 10px black;
  z-index:10;
  top: calc(50% - 125px);
  left: calc(50% - 125px);
}
1 Like
3

Whoa! Like magic it works! Thanks so much was stuck on this for days!! I think I was not using the position css property correctly, looking at your solution. You are a savior!!