How do I put a div below canvas in HTML?

Post reply
0 favourites
  • 8 posts
From the Asset Store
Dolphin Jump - HTML 5 - Construct 3
$9 USD
Get ready to dive into a sea of endless excitement with "Dolphin Jump," the thrilling new game that puts you in control
clarkgame's avatar
clarkgame

  • I want to put a div below canvas and canvas should fit empty are of the screen. When I put the div above the canvas, it works perfectly but when put it below, div won't appear.

    Is there anybody now how can I achieve this?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Can you show us the page?

  • Elliott The page is regular Construct 2 HTML5 export index page.

    I want to put a div under <div id="c2canvasdiv">.

    <body> 
	<div id="fb-root"></div>
	
	<script>
	// Issue a warning if trying to preview an exported project on disk.
	(function(){
		// Check for running exported on file protocol
		if (window.location.protocol.substr(0, 4) === "file")
		{
			alert("Exported games won't work until you upload them. (When running on the file:/// protocol, browsers block many features from working for security reasons.)");
		}
	})();
	</script>
	
	<!-- The canvas must be inside a div called c2canvasdiv -->
	<div id="c2canvasdiv">
	
		<!-- The canvas the project will render to.  If you change its ID, don't forget to change the
		ID the runtime looks for in the jQuery events above (ready() and cr_sizeCanvas()). -->
		<canvas id="c2canvas" width="854" height="480">
			<!-- This text is displayed if the visitor's browser does not support HTML5.
			You can change it, but it is a good idea to link to a description of a browser
			and provide some links to download some popular HTML5-compatible browsers. -->
			<h1>Your browser does not appear to support HTML5.  Try upgrading your browser to the latest version.  <a href="http://www.whatbrowser.org">What is a browser?</a>
			<br/><br/><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br/>
			<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
			<a href="http://www.google.com/chrome/">Google Chrome</a><br/>
			<a href="http://www.apple.com/safari/download/">Apple Safari</a></h1>
		</canvas>
		
	</div>
	<div>THE DIV I WANT TO PUT</div>

.
.
.
.

[/code:gk4l4sfq]

  • Yeah that should really work, when you look at the developer tools of the page where is the div being drawn? Is it behind the canvas?

    Alternatively is this is some kind of weird source ordering thing, you can use flexbox's flex-order property to make divs display in a different order to how they're written:

    https://www.w3schools.com/cssref/css3_pr_order.asp

    For example, some CSS like the following:

    #container{
display:flex;
}

#yourDiv {
order:2
}

#c2canvasdiv {
order:1
}[/code:vmk1fs7z]

Should do the trick; please note you'll have to wrap them in a parent div.

So the HTML will be roughly:

[code:vmk1fs7z]<div id="container">
<div id="yourDiv"></div>
<div id="c2canvasdiv"></div>
</div>[/code:vmk1fs7z]

If this works, then the following is a shorter rule for the same effect in this exact situation:

[code:vmk1fs7z]#container{
display:flex;
flex-direction: column-reverse;
}[/code:vmk1fs7z]

  • Elliott Thanks for the reply. But still, it won't appear on the screen. The div is in the elements and if I disable overflow: hidden; I can see that it's below the canvas.

    I think I should edit the canvas height from runtime.

  • What happens if you set the z-index of the container to -1 and the z-index of your div to 999?

  • Elliott I think z-index won't fix it because the div is not covered by the canvas. It's below the canvas because canvas tries to cover whole window. I need something like canvas height = window height - div height (75px) but I couldn't figure out this in c2runtime.js.

  • I replaced all 'window.innerHeight' with 'window.innerHeight-75' in c2runtime.js and it worked.

Post reply
  • 8 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)