Center Your HTML Games in Browser

This forum is meant for people to share their knowledge by writing their own tutorials for Adventure Maker.

Moderators: time-killer-games, Vengeance66, Candle, reneuend, GM-Support

Center Your HTML Games in Browser

Postby time-killer-games » Wed Aug 06, 2014 7:26 pm

1) Rename your original index.html to index2.html. Then create a new index.html in the same directory with notepad using this as its contents:
<style>
body {
background: #222;
color:#cccccc;
margin: 0px;
padding: 0px;
border: 0px;
}
div.myclass {
position: fixed;
top: 50%;
left: 50%;
margin-left: -HalfFrameWidthpx;
margin-top: -HalfFrameHeightpx;
padding: 0px;
border: 0px;
}
</style>

<body>
<div class="myclass">
<iframe name="myframe" src="index2.html" scrolling="no" frameborder="0" width="FrameWidth" height="FrameHeight"></iframe>
</div>
</body>


2) Replace HalfFrameWidth with your project's frame width in pixels divided by two. So if you have a frame width of 640, use 320.

3) Replace HalfFrameHeight with your project's frame height in pixels divided by two. So if you have a frame height of 480, use 240.

4) Replace FrameWidth with your project's frame width in pixels.

5) Replace FrameHeight with your project's frame height in pixels.

6) Optionally if you want to change the webpage's background color, replace 222 and cccccc with your desired HTML color code.

This is probably the best solution available to center your games in the browser, enjoy. :D
Last edited by time-killer-games on Thu Aug 07, 2014 3:12 am, edited 1 time in total.
User avatar
time-killer-games
Expert Member
 
Posts: 400
Joined: Fri Dec 24, 2010 6:10 pm
Location: Virginia Beach, VA

Re: Center Your HTML Games in Browser

Postby Vengeance66 » Wed Aug 06, 2014 10:13 pm

Thanks for your tips TKG!

Really appreciated! :D
Stay a while and listen...

Rainbow Enterainment - http://rainbowenter.com/
User avatar
Vengeance66
Administrator
 
Posts: 630
Joined: Wed Oct 13, 2010 2:17 pm
Location: Macedonia

Re: Center Your HTML Games in Browser

Postby reneuend » Fri Aug 08, 2014 5:28 am

Thank you TKG!
---


Image
Image
User avatar
reneuend
Administrator
 
Posts: 2690
Joined: Sat Nov 22, 2008 8:37 pm
Location: Midwest Cornfield, USA


Return to Post Your Own Tutorials

Who is online

Users browsing this forum: No registered users and 3 guests

cron