Question

I am having trouble pushing down, margin and top do not seem to work. and aligning my form. I would like the form (label -> input box) to be below the login text which is the background.

I currently have:

HTML:

    <div class="column-right-login">
          <form action="http://www.domain.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
             <label for="email">Email Address: </label><input type="text" name="email" value="" />
             <label for="password">Password: </label><input type="password" name="password" value="" />
              <br />
              <a href="http://www.domain.co.nz/forgot-password">Forgotten Password</a><br />
              <br />
              <a onclick="$('#login').submit();" class="button"><span>Login</span></a>
          </form>
    <script type="text/javascript"><!--
    $('#login input').keydown(function(e) {
        if (e.keyCode == 13) {
            $('#login').submit();
        }
    });
    //--></script>   

</div>

CSS:

    .column-right-login{
    background:url('../image/login.png') no-repeat;
    width:335px;
    height:154px;
}

Example:

Update:

I now have the code below but I cannot get my form to align:

HTML:

<div class="column-right-login">
          <form action="http://www.domain.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
             <label for="email">Email Address: </label><input type="text" name="email" value="" />
             <label for="password">Password: </label><input type="password" name="password" value="" />
              <a href="http://www.domain.co.nz/forgot-password">Forgotten Password</a>
              <a onclick="$('#login').submit();" class="button"><span>Login</span></a>
          </form>
    <script type="text/javascript"><!--
    $('#login input').keydown(function(e) {
        if (e.keyCode == 13) {
            $('#login').submit();
        }
    });
    //--></script>   

</div>

CSS:

.column-right-login{
    background:url('../image/login.png') no-repeat;
    width:335px;
    height:154px;
    padding: 30px 0px 0px 10px; /* top right bottom left */
}

Example:

Answer 1

You probably want to use padding:

.column-right-login{
 background:url('../image/login.png') no-repeat;
 width:335px;
 height:154px;
 padding: 80px 0px 0px 50px; /* top right bottom left */
 }

Please be aware that padding adds to height/width, so you will have to adjust them (abstract from current value number of px you use for padding, for example in my example width = 335 – 50 and height = 154 – 80)

If you want to use margin on form and it is not working, just add

  display: block;

to the css for the form. I do not remember whether it is default or not – 4AM 🙂

UPDATE:

to put your inputs where you want, I would suggest wrapping label and input into divs. Then you can adjust position by using margin.

   <div style="margin-left: 40px;"><label1 ...><input ...></div>
   <div><label2 ...><input ...></div>

of course put styles to CSS 🙂 hope this will work for you.