Question

I’m trying to make a simple browser game without relying on anything fancy like flash or html5. I was doing pretty well in getting everything set up, but when I got to the ground I ran into trouble as I’m not very good at setting up html pages. I want to have a tiled ground that I can put objects on, then click on the objects to take the user to another page. I’m not sure how to go about something like this and am looking for some direction.

I have a fairly good grasp on PHP, understand basic html, very limited css and am starting to learn javascript and am planning on picking up jQuery.

Answer 1

I don’t really understand what you want, but this might help:

Live Demo

To understand how the positioning works, see:

• http://css-tricks.com/absolute-positioning-inside-relative-positioning/
• http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

HTML:

<div id="gameContainer">

    <a href="http://www.google.com/" class="wall" style="top:32px;left:64px"></a>
    <a href="http://en.wikipedia.org/" class="wall" style="top:32px;left:96px"></a>
    <a href="http://www.microsoft.com/" class="wall" style="top:32px;left:128px"></a>
    <a href="http://www.google.com/" class="wall" style="top:32px;left:160px"></a>

</div>

CSS:

#gameContainer {
    width: 320px;
    height: 320px;
    border: 1px solid #000;
    background: url(https://i.stack.imgur.com/sFV9k.png);
    position: relative
}

.wall {
    background: url(https://i.stack.imgur.com/IFjyp.png);
    width: 32px;
    height: 32px;
    position: absolute
}