Some Questions About Positions In Form, Css

I'm trying to learn HTML & CSS and tried to make a basic login form with CSS3 effects. The link are here below to the code. Demo - http://codepen.io/anon/pen/PwaLBE HTML

Solution 1:

http://codepen.io/anon/pen/LEraqb

body {
    margin: 0;
    padding: 0;
}

form {
    margin-top: 200px;
    font-family: Helvetica, sans-serif;
    text-align: center;
}

/* Input text actions */input[type="text"] {
    width: 150px;
    padding: 10px;
    border: solid 1px#dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="text"]:hover {
    border: solid 1px#707070;
    box-shadow: 005px1px#969696;
}

input[type="text"]:focus {
    border: solid 1px#707070;
    box-shadow: 005px1px#969696;
}

/* Input password actions */input[type="password"] {
    width: 150px;
    padding: 10px;
    border: solid 1px#dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="password"]:hover {
    border: solid 1px#707070;
    box-shadow: 005px1px#969696;
}

input[type="password"]:focus {
    border: solid 1px#707070;
    box-shadow: 005px1px#969696;
}

/* Input submit-button actions */input[type="submit"] {
    margin-top: 5px;
    margin-left: -112px;
    color: #FFFFFF;
    background-color: #16a085;
    padding: 10px;
    border: solid 1px#FFFFFF;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="submit"]:hover {
    border: solid 1px#707070;
    box-shadow: 005px1px#969696;
}

/* Link actions */a {
    font-size: 12px;
    transition: color 0.5s;
    font-family: Helvetica, sans-serif;
    text-decoration: none;
    list-style: none;
    color: #3498db;
}

a:hover {
    color: #2980b9;
}

1- How can I move the links to the right precisely under the form to the right?

I used a float:right

Using flexboxes could be another way.

2- zoom once or twice and the position will change.

some sizes was defined in pixel, so it is static and doesn't resists to all layouts.

• About negative margins: https://stackoverflow.com/questions/4989930/using-css-negative-margins-a-good-or-bad-practicehttp://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

3- And the last problem, the links "Glömt lösenord" & "Registrera" are in the middle of the button to the left, how can I take them down so they are at the same level as the button to the left?

I prefer like that!

4- If you click on the button, it will take some small amount of time to be clicked, how can I change that time without changing for the inputs?

the css animation seems to have to finish before the action occurs.

Solution 2:

There are many questions, will try to cover it all.

First of all, remove text-align: center; on the <form> that will make the other tasks easier to solve.

Secondly, add <p> or <div> etc to wrap your input fields.

Also want to say I love the cleanness of your code, very good start. Don't be afraid to use some classes or ids.

See the blow updated code based on yours, demo - http://jsfiddle.net/78ds0jpt/

HTML

<formaction=""method=""><p><inputtype="text"name="username"placeholder="Användarnamn"><inputtype="password"name="password"placeholder="Lösenord"></p><p><inputtype="submit"name="login"value="Logga in"><span><ahref="#">Glömt lösenord?</a><ahref="#">Registrera</a></span></p></form>

CSS

body {
    margin: 0;
    padding: 0;
}

form {
    /* margin-top: 200px; */font-family: Helvetica, sans-serif;
    /* text-align: center; */
}

formp {
    margin: 10px;
}

formpspan {
    padding-left: 130px;
}

/* Input text actions */input[type="text"] {
    width: 150px;
    padding: 10px;
    border: solid 1px#dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="text"]:hover {
    border: solid 1px#707070;
    box-shadow: 005px1px#969696;
}

input[type="text"]:focus {
    border: solid 1px#707070;
    box-shadow: 005px1px#969696;
}

/* Input password actions */input[type="password"] {
    width: 150px;
    padding: 10px;
    border: solid 1px#dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="password"]:hover {
    border: solid 1px#707070;
    box-shadow: 005px1px#969696;
}

input[type="password"]:focus {
    border: solid 1px#707070;
    box-shadow: 005px1px#969696;
}

/* Input submit-button actions */input[type="submit"] {
    margin-top: 5px;
    /* margin-left: -112px; */color: #FFFFFF;
    background-color: #16a085;
    padding: 10px;
    border: solid 1px#FFFFFF;
    transition: box-shadow 0.3s, border 0.3s;
}

input[type="submit"]:hover {
    border: solid 1px#707070;
    box-shadow: 005px1px#969696;
}

input[type="submit"]:focus {
    outline: 0;
}

/* Link actions */a {
    font-size: 12px;
    transition: color 0.5s;
    font-family: Helvetica, sans-serif;
    text-decoration: none;
    list-style: none;
    color: #3498db;
}

a:hover {
    color: #2980b9;
}

Solution 3:

When you work with a form, it is suggested to wrap it into selector, as in;

body should have value: margin:0 auto;

#mywrapper{
    margin:027%; /*you can set it by yourself*/max-width:38%;
}

after that, you can wrap the 2 links as follows:

UPDATED:

span.mylinks{
   float:right;
   padding-right:5px;
}

so. it should be like this:

<divid="mywrapper"><formaction=""method=""><inputtype="text"name="username"placeholder="Användarnamn" /><inputtype="password"name="password"placeholder="Lösenord" /><br/><inputtype="submit"name="login"value="Logga in" /><ahref="#">Glömt lösenord?</a><ahref="#">Registrera</a></form></div>

Demo HERE

Share