Home › Forums › CSS › Coding a simple form › Re: Coding a simple form
October 11, 2011 at 3:54 pm
#88901
BobMember
Ok, so now I used an unordered list:
Log in to!
CSS:
body {
background: #F3E7C2;
}
@font-face {
font-family: 'Lucida Fax';
src: url('fonts/LFAXD.ttf') format ('truetype');
}
#loginwrap {
margin: 0 auto;
width: 580px;
height: 325px;
border-radius: 10px;
border: 1px solid #FFF;
background: #72AEE5;
padding: 10px;
}
#title {
background: #103E69;
color: #FFF;
height: 40px;
border-radius: 10px;
font-family: 'Lucida Fax', Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
padding: 2px 2px 2px 10px;
margin-bottom: 75px;
}
form {
color: white;
font-family: 'Lucida Fax', Helvetica, sans-serif;
}
input[type="submit"] {
background: #103E69;
border: none;
border-radius: 10px;
color: #FFF;
font-family: 'Lucida Fax';
font-size: 16px;
width: 100px;
margin-top: 45px;
}
#fieldwrap {
width: 400px;
margin: 0 auto;
}
li {
background: #103E69;
border-radius: 4px;
display: inline-block;
list-style-type: none;
margin: 5px;
padding: 5px;
width: 350px;
}
li input {
float: right;
}
a#forgotpw {
margin-top: -20px;
float: right;
font-size: 14px;
font-family: 'Trebuchet MS';
color: #FFF;
}
#rememberme {
font-size: 14px;
font-family: 'Trebuchet MS';
}Not really sure which is better.. any feedback is welcome! Also, using this method, my submit button isn’t aligned with the list items.. the list items are around 40px more to the right then the submit button. Can’t find where the problem lies though, so hope you can help out! Oh, and it’s also kinda weird that when I apply font-family: ‘Lucida Fax’ to the form element, that font isn’t used on the whole font..
