HTML moving phaser into container div
Currently making up a browser based game in phaser and trying to add it into the container div tag I've created however phaser seems to be pushing itself to below the container div.
Two screenshots for comparison:
http://gyazo.com/3cc9b9333cf89d7fc879bd2cdc741609 (This is the container div with my header div currently inside of it which is what I want my phaser game to be doing)
http://gyazo.com/5a7cea7514a9e295355c87933c3d14ac (This is what my phaser game is currently doing above the footer div you can see the container div and also clearly see the phaser game currently residing under the footer div)
This is the code for my HTML page:
<!DOCTYPE html>
<html>
<head>
<title>This is our menu bar!</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<ul id="menu">
<li><a href="file:///H:/AINT103/xampp/htdocs/Weekfour/index.html" class="highlight"><span>Home</span></a></li>
<li><a href="file:///H:/AINT103/xampp/htdocs/Weekfour/index.html"><span>Link1</span></a></li>
<li><a href="file:///H:/AINT103/xampp/htdocs/Weekfour/index.html"><span>Link2</span></a></li>
<li><a href="file:///H:/AINT103/xampp/htdocs/Weekfour/index.html"><span>Link3</span></a></li>
<li><a href="file:///H:/AINT103/xampp/htdocs/Weekfour/index.html"><span>Link4</span></a></li>
</ul>
<div class="container">
<script rel="javascript" type="text/javascript" src="phaser.js"></script>
<script rel="javascript" type="text/javascript" src="game.js"></script>
<div class="header">
Title of game & small talk about about with some a box surrounding this text before another text box surrounding the game below
</div>
<div class="instructions">
</div>
Instructions
</div>
<div id="footer">
Copyright 2013 marc
</div>
</body>
</html>
And this is the code for my CSS
body {
font-family: Century Gothic, Arial;
background-color: #CCCCCC;
margin: 0px auto;
text-align: center;
}
.container {
background-color: #999999;
margin: auto;
width: 1000px;
height: 1000px;
}
.header {
font-size: 22px;
background-color: #999999;
border: 1px dashed #666666;
color: #444444;
width: 800px;
font-size: 14px;
text-align: center;
margin: 10px auto 0px auto;
}
#menu {
float: center;
padding: 0px 10px;
margin: 10px;
border-bottom: 5px solid #6D7AB2;
}
#menu li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li a {
float: center;
color: #000000;
text-decoration: none;
background: url('menuleft.gif') top left no-repeat;
margin: 0px 0px;
padding: 9px 0px 0px 9px;
}
#menu li a span {
background: url('menuright.gif') top right no-repeat;
padding: 9px 25px 6px 15px;
}
#menu li a:hover,
#menu li a.highlight {
background: url('menuleft-hl.gif') top left no-repeat;
color: #ffffff;
}
#menu li a:hover span,
#menu li a.highlight span {
background: url('menuright-hl.gif') top right no-repeat;
}
canvas {
padding: 0px;
margin: auto;
}
#footer {
clear:both;
margin-top: 10px;
border-top: 5px solid #6D7AB2;
padding: 20px 0px;
font-size: 80%;
text-align:center;
}
Anyone able to help show me where I'm going wrong?
Answer
Using the examples found on the phaser github (https://github.com/photonstorm/phaser)
in the Html:
<div id="phaser-example"></div>
on the .js
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
The fourth parameter on Phaser.Game() is the id of the DOM element in which you would like to insert the element that Phaser creates.