CSS Positioning - Simon project

1

I’ve got the crude outline for my Simon project but I’ve hit an early speed bump with the positioning.

My issues are:

  1. I’m trying to center the coloured squares so there is equal margin between them as well as the edge of the gameContainer. Should I use fixed hight/width…? Percentages? How can I position them so they are equally spaced out?

  2. I want the controls to be centered horizontally and vertically within the gameContainer div, as well as appear on top. I have not properly accomplished centering it.

  3. The content for the controls div needs to appear inside of it. For some reason it is showing under the gameContainer div right now. How could I fix this?

Many thanks in advance for your assistance :slight_smile:

2

The is a lot of ways to do this. I would probably use flexbox like this:

https://codepen.io/RadDog25/pen/LWRpqV

1 Like
3

Thanks for the suggestion. I haven’t looked into flexbox yet so this might be a good opportunity to!

4

So this is looking like it will work quite well, just one issue: I can’t figure out how to center the “controls” div in the center and on top of the other divs. Any ideas?

5

Heres a quick and dirty fix. With some research I’m sure you could grab something that autocenters.

1 Like
6

Thanks for the quick fix. I’ll use that until I find something a bit more effective :slight_smile:

7

If you have any aspirations to make your project responsive, that solution will give you a headache.

Something like this is much better:

1 Like
8

You’ve been a huge help on my project, I really appreciate it! I’ve made quite a bit of progress but could use a hand with positioning the items within the control div itself. Basically I want the title on one line, then the counter on another, and finally the two buttons on the same line with space between them.

I tried flexbox, and perhaps I wasn’t using the right setting because everything would end up on the same line bunched up in the middle.

As you can see I’ve also tried bootstrap which doesn’t seem to be working very well either. Any suggestions?

9

Hey Doug,

I got you started here http://codepen.io/RadDog25/pen/XMpPXx?editors=1100

Positioning CSS is one of the biggest headaches when you are starting out, but its a pretty fundamental. Do some youtubing on this and try to get it down. Chrome’s developer tools are also super useful for learning and using CSS if you aren’t using it already.

1 Like
10

I agree, it is very frustrating. It is one of the areas I struggle most with. Other aspects of css come easy but this is a challenge. Thank you for getting things going for me; I’ll try and nail this down!