CODEWITHSUNDEEP
javascripthtmlcsswebgl
petehallw
petehallw

Reputation: 1014

How to align text and buttons next to canvas (WebGL + JavaScript + CSS)

I have a webpage with a canvas for implementing graphics rendering, and would like to align some text and buttons to the left of it. My HTML code is as follows:

<body onload="webGLStart();">
    <canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
    <div class="controls">
        <h2>Controls</h2>
        <button class="btn" onclick="initBuffers(1)">Man</button>
        <br><br>Use the mouse to rotate the view.
    </div>
</body>

So what I want to align to the left is everything in the 'controls' class. Currently it is being displayed below the canvas on a new line. I want it to be aligned to the left starting on the same line as the canvas, with the canvas remaining centered.

I am using a stylesheet and would like to know how to implement this using css.

My site can be seen here. It is the Controls section I want to move up towards the top of the page.

Any help would be much appreciated, thank you.

Upvotes: 1

Views: 5067

Answers (2)

Roger
Roger

Reputation: 3256

Here is a makeshift answer. I would use bootstrap for positioning though. You can use bootstrap.

JSFiddle

is that what you are looking for? use col-sm-{x/12} to size and resize your positions.

Upvotes: 0

Jackson
Jackson

Reputation: 3518

I would suggest you wrap it all in a wrapper div which is centered and has position relative. Then you can position the controls absolute like this:

<div class="wrapper" style="margin: 0 auto; width: 800px; position: relative;">

   <canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>

   <div class="controls" style="position: absolute; top:0; left:0;">

       <h2>Controls</h2>

       <button class="btn" onclick="initBuffers(1)">Man</button>

       <br><br>Use the mouse to rotate the view.

   </div>

</div>

Upvotes: 1

Related Questions