electromps
New Member
I am trying to place a div element over a canvas (it is for a game) on the center of my page. It is about a startscreen that I want to show over the canvas, before starting the game(this startscreen has options like "Play game", "Settings" etc). The problem is that I cannnot get this done, I have searched a lot on Google, I have seen a lot of examples, but none of them seems to be working for me. Here is my code:\[code\]<div id="gamecontainer"> <canvas id="myCanvas" width="800" height="600"> Sorry, <strong>CANVAS</strong> is not supported by your browser. Get a more recent one to play my game! </canvas> <div id="gamestartscreen" class="gamelayer"> <img src="http://stackoverflow.com/questions/15861485/images/icons/play.png" alt="Play Game" onclick="alert('ceve');"><br> <img src="http://stackoverflow.com/questions/15861485/images/icons/settings.png" alt="Settings"> </div></div>\[/code\]here is the css:\[code\]#gamecontainer { width: 800px; height: 600px; background-color: beige; border: 1px solid black; position: relative; margin: 0 auto;}.gamelayer { width: 800px; height: 600px; position: absolute; display: none; z-index: 0;}/* Screen for the main menu (Like Play, Settings, etc.) */#gamestartscreen { position: relative; margin: 0 auto;}#gamestartscreen img { margin: 10px; cursor: pointer;}\[/code\]Could someone please tell me where I am doing it wrong?