0

I trying to build a Simon game but I'm messing with CSS.

simon game
(source: walmartimages.com)

I don't know my mistakes but inline-block isn't working as expected:

    body {
        text-align: center;
    }
    
    #box {
        width: 500px;
        height: 500px;
        border-radius: 100%;
        position: relative;
        margin: auto;
        background-color: #333;
        top: 10vh;
        box-shadow: 0px 0px 12px #222;
    }
    
    #box .pad {
        width: 240px;
        height: 240px;
        float: left;
        left: 0px;
        border: 5px solid #333;
        box-shadow: 0px 0px 2px #222;
        display: inline-block;
        position: absolute;
    }
    
    #topLeft {
        background-color: green;
        border-top-left-radius: 100%;
    }
    
    #topRight {
        background-color: red;
        border-top-right-radius: 100%;
        /*right: 0;*/
    }
    
    #bottomLeft {
        background-color: yellow;
        border-bottom-left-radius: 100%;
    }
    
    #bottomRight {
        background-color: blue;
        border-bottom-right-radius: 100%;
    }
    <body>

        <h1 id="header">freeCodeCamp JS Simon Game</h1>

     <div id="box">
            <div class="pad" id="topLeft"></div>
            <div class="pad" id="topRight"></div>
            <div class="pad" id="bottomLeft"></div>
            <div class="pad" id="bottomRight"></div>

  </div>


    </body>

https://jsfiddle.net/gbs4320m/

I tried to mix things up with different settings and consulted online resources but i couldn't figure out the problem.

Please help!!

Thanks in advance.

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Alby11
  • 607
  • 1
  • 7
  • 15

4 Answers4

2

Remove the position absolute:

body {
  text-align: center;
}

#box {
  width: 500px;
  height: 500px;
  border-radius: 100%;
  position: relative;
  margin: auto;
  background-color: #333;
  top: 10vh;
  box-shadow: 0px 0px 12px #222;
}

#box .pad {
  width: 240px;
  height: 240px;
  float: left;
  left: 0px;
  border: 5px solid #333;
  box-shadow: 0px 0px 2px #222;
  display: inline-block;
}

#topLeft {
  background-color: green;
  border-top-left-radius: 100%;
}

#topRight {
  background-color: red;
  border-top-right-radius: 100%;
  /*right: 0;*/
}

#bottomLeft {
  background-color: yellow;
  border-bottom-left-radius: 100%;
}

#bottomRight {
  background-color: blue;
  border-bottom-right-radius: 100%;
}
<h1 id="header">freeCodeCamp JS Simon Game</h1>
<div id="box">
  <div class="pad" id="topLeft"></div>
  <div class="pad" id="topRight"></div>
  <div class="pad" id="bottomLeft"></div>
  <div class="pad" id="bottomRight"></div>
</div>
  • Great!!! It works! Why? – Alby11 May 31 '16 at 12:55
  • 1
    inline-block makes element block but operate like inline respect to others. The container width is 500px and 240px each color block, therefore there are two in a row and the third pass to the next. Sorry my english –  May 31 '16 at 13:03
1

Firstly, you are setting various unnecessary float:left, position:absolute, left:0px; which conflicts with inline-block or just don't do anything in this scenario.

So let's remove those and get the #box .pad definition much simpler:

#box .pad {
    width: 240px;
    height: 240px;
    border: 5px solid #333;
    box-shadow: 0px 0px 2px #222;
    display: inline-block;
}


body {
    text-align: center;
}

#box {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    position: relative;
    margin: auto;
    background-color: #333;
    top: 10vh;
    box-shadow: 0px 0px 12px #222;
}

#box .pad {
    width: 240px;
    height: 240px;
    border: 5px solid #333;
    box-shadow: 0px 0px 2px #222;
    display: inline-block;
}

#topLeft {
    background-color: green;
    border-top-left-radius: 100%;
}

#topRight {
    background-color: red;
    border-top-right-radius: 100%;
    /*right: 0;*/
}

#bottomLeft {
    background-color: yellow;
    border-bottom-left-radius: 100%;
}

#bottomRight {
    background-color: blue;
    border-bottom-right-radius: 100%;
}
<body>

  <h1 id="header">freeCodeCamp JS Simon Game</h1>

  <div id="box">
    <div class="pad" id="topLeft"></div>
    <div class="pad" id="topRight"></div>
    <div class="pad" id="bottomLeft"></div>
    <div class="pad" id="bottomRight"></div>

  </div>

</body>

That gets things in the right order but the segments are showing underneath each other. Why? Because of the way that spaces between inline-block elements is handled - see this question.

There are various ways around this as described in the answers to that question but the simplest solution in your case is probably just to float:left instead of display:inline-block. This will show the elements next to each other and overflow them onto the next "line" in a similar way to display:inline-block, but without the spacing issue:

#box .pad {
    width: 240px;
    height: 240px;
    border: 5px solid #333;
    box-shadow: 0px 0px 2px #222;
    float:left;
}


body {
    text-align: center;
}

#box {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    position: relative;
    margin: auto;
    background-color: #333;
    top: 10vh;
    box-shadow: 0px 0px 12px #222;
}

#box .pad {
    width: 240px;
    height: 240px;
    border: 5px solid #333;
    box-shadow: 0px 0px 2px #222;
    float:left;
}

#topLeft {
    background-color: green;
    border-top-left-radius: 100%;
}

#topRight {
    background-color: red;
    border-top-right-radius: 100%;
    /*right: 0;*/
}

#bottomLeft {
    background-color: yellow;
    border-bottom-left-radius: 100%;
}

#bottomRight {
    background-color: blue;
    border-bottom-right-radius: 100%;
}
<body>

  <h1 id="header">freeCodeCamp JS Simon Game</h1>

  <div id="box">
    <div class="pad" id="topLeft"></div>
    <div class="pad" id="topRight"></div>
    <div class="pad" id="bottomLeft"></div>
    <div class="pad" id="bottomRight"></div>

  </div>

</body>
Community
  • 1
  • 1
Rhumborl
  • 16,349
  • 4
  • 39
  • 45
1

You should use position:relative for your #box pad in CSS.

Here is the updated link https://jsfiddle.net/gbs4320m/2/

Andrei
  • 39
  • 8
0

Simply remove position absolute:and it works just fine.

ilai
  • 126
  • 5