is the HUD.html file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="HUD.css">
</head>
<body>
<div id="test">
</div>
<div id="menubar" style="position:absolute;left:0px;right:0px;bottom:30px;height:100px;background:rgba(255,255,255,100);z-index:0;">
<div id="leftpanel" style="position:absolute;left:0px;bottom:0px;top:0px;width:33%;z-index:1;">
is the left panel
</div>
<div id="rightpanel" style="position:absolute;right:0px;bottom:0px;top:0px;width:66%;z-index:1;">
is the right panel
</div>
</div>
</body>
</html>
Notice that I had to include some in-line styles for them to be correctly applied as the CSS file is not being applied. Notice that the green div named “test” does not appear in the game.
is the HUD.css file:
body
{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
div
{
padding: 0px;
margin: 0px;
border: 0px solid;
}
div#menubar
{
position: absolute;
bottom: 30px;
left: 0px;
right: 0px;
height: 100px;
background: #000000;
color: #ff0000;
}
div#test
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 100px;
background: #00ff00;
}
The directory structure is as follows:
-
Project folder
-
Content folder
-
UI folder
-
HUD.html
-
HUD.css
-
Engine folder
is how the HUD is visualized in the game and in a browser, respectively:
