Skip to content Skip to sidebar Skip to footer
Home / Button / Centering / Css / Html / Html5 Canvas

Buttons Centered Over Canvas

Post a Comment
I have 4 overlapping canvases (acting as layers) positioned absolutely and centered horizontally and vertically. Over this canvas, I want to overlay four HTML/CSS buttons in a colu

Solution 1:

Maybe something along the lines of this.

here is a jsfiddle for a demo

append this css

.buttonContainer{
    position: absolute;
    top: 40%;
    left:45%;
    width:80px;
}
.class='but' {
    float:left;
}

HTML

<body>
    <canvas id="canvas0" width=800 height=600></canvas>
    <canvas id="canvas1" width=800 height=600></canvas>
    <canvas id="canvas2" width=800 height=600></canvas>
    <canvas id="canvas3" width=800 height=600></canvas>
    <div class='buttonContainer'>
        <input class='but' id='but1' type='button' value='Button 1'>
        <input class='but' id='but2' type='button' value='Button 2'>
        <input class='but' id='but3' type='button' value='Button 3'>
        <input class='but' id='but4' type='button' value='Button 4'>
    </div>
</body>

Solution 2:

I have fixed your issue, now that i am finally home from my day at Thorpe Park. Basically... i took @Morne nel's code and changed top: 250px; to top: 40%. I'm not sure if this is mathematically centered, but you can always do that yourself. Nonetheless, the buttons stay in the position relative to the canvas. Here is the code:

HTML:

<html>

<head>
    <title>Blah</title>
    <link rel="stylesheet" type="text/css" href="Style.css">
</head>

<body>

    <canvas id="canvas0" width=800 height=600></canvas>
    <canvas id="canvas1" width=800 height=600></canvas>
    <canvas id="canvas2" width=800 height=600></canvas>
    <canvas id="canvas3" width=800 height=600></canvas>
    <div class='buttonContainer'>
        <input class='but' id='but1' type='button' value='Button 1'>
        <input class='but' id='but2' type='button' value='Button 2'>
        <input class='but' id='but3' type='button' value='Button 3'>
        <input class='but' id='but4' type='button' value='Button 4'>
    </div>

</body>

</html>

CSS:

#canvas0,  #canvas1, #canvas2, #canvas3 {
    position: absolute;
    border: 2px solid;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

.buttonContainer{
   position: relative;
    top: 40%;
    left:45%;
    width:80px;
}
.class='but' {
    float:left;
}


#canvas0 {
    z-index: 0;
}

#canvas1 {
    z-index: 1;
}

#canvas2 {
    z-index: 2;
}

#canvas3 {
    z-index: 3;
}

JFIDDLE: http://jsfiddle.net/Th3JT/

Here is what it looks like on my monitor with a resolution of 1080x1920:

Larger window

Smaller window

Obviously (as can be seen in JFiddle), the buttons are not mathematically centered on different resolutions. However, to fix this you just have to do the maths and use media queries. Give it a try and contact me in a while if you are unable to fix it. You can always hit me up on Skype for some voice help and I can always use TeamViewer to help you further. I really hope I fixed most of your issues (Atleast when the window changes, the buttons stay in the center of the window). I believe that the reason that it is not mathematically centered on different resolutions could be due to the canvases using position: absolute. Play around with it and hit me up with any problems that you encounter and I'll try to help you as best I can. Good luck with your programming, and don't forget your caffeine when coding ;).


Post a Comment for "Buttons Centered Over Canvas"