Question

I have a little start screen running and i want the image, which is acting as a button, to placed at a certain point, but when i try to it stays in the same place, and i don’t know how i can get it to stay in the place i want it. Here is my code, its is HTML with some css:

<style>
    #SplashScreen{
        position:relative;
        overflow:hidden;
    }

    #StartButton
    {
        cursor:pointer;
        position:absoloute;
        left:100px;
        top:100px;
    }
</style>
<div id="SplashScreen" width="400" height="400">
    <h1>Game Title</h1>
    <img id="StartButton" src="play.png"/>
</div>

The image just draws underneath the title and not where i want it. Any help?

Answer 1

It is because your absolute spelling is wrong

#StartButton
{
    cursor:pointer;
    position:absolute;
    left:100px;
    top:100px;
}

And don’t use height/width attributes, specify them in your #SplashScreen instead My Fiddle

<style>
    #SplashScreen{
        position:relative;
        overflow:hidden;
        height: 400px;
        width: 400px;

    }

    #StartButton
    {
        cursor:pointer;
        position:absolute;
        left:100px;
        top:100px;
    }
</style>
<div id="SplashScreen">
    <h1>Game Title</h1>
    <img id="StartButton" src="http://www.alfresco.com/community/images/windows-icon.png"/>
</div>​