Some Questions About Positions In Form, Css
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: 0 0 5px 1px #969696;
}
input[type="text"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #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: 0 0 5px 1px #969696;
}
input[type="password"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #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: 0 0 5px 1px #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-practice http://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
<form action="" method="">
<p>
<input type="text" name="username" placeholder="Användarnamn">
<input type="password" name="password" placeholder="Lösenord">
</p>
<p>
<input type="submit" name="login" value="Logga in">
<span>
<a href="#">Glömt lösenord?</a>
<a href="#">Registrera</a>
</span>
</p>
</form>
CSS
body {
margin: 0;
padding: 0;
}
form {
/* margin-top: 200px; */
font-family: Helvetica, sans-serif;
/* text-align: center; */
}
form p {
margin: 10px;
}
form p span {
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: 0 0 5px 1px #969696;
}
input[type="text"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #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: 0 0 5px 1px #969696;
}
input[type="password"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #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: 0 0 5px 1px #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:0 27%; /*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:
<div id="mywrapper">
<form action="" method="">
<input type="text" name="username" placeholder="Användarnamn" />
<input type="password" name="password" placeholder="Lösenord" />
<br/>
<input type="submit" name="login" value="Logga in" />
<a href="#">Glömt lösenord?</a>
<a href="#">Registrera</a>
</form>
</div>
Demo HERE
Post a Comment for "Some Questions About Positions In Form, Css"