Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Coding a simple form Re: Coding a simple form

#88857
Bob
Member

@Eric: what is the advantage of using inline-block on my labels and inputs?


@Adman
, @ChristopherBurton: I thought border-radius should have that because its a CSS3 thing, but I guess it works now without the vendor prefix then.. that’s good to hear!

I’ll try the unordered list idea, seems better. Because right now, I have it like this, but it was kinda hard to code it correctly with all the css and so on.. especially the part around the submit button and the remember me text looks like it could use some improvements! if you see any things I could improve let me know, thanks so far :)
HTML:






Log in!







































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;
-moz-border-radius: 10px;
border: 1px solid #FFF;
background: #72AEE5;
padding: 10px;
}

#title {
background: #103E69;
color: #FFF;
height: 40px;
-moz-border-radius: 10px;
font-family: 'Lucida Fax', Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
padding: 2px 2px 2px 10px;
}

form {
color: white;
font-family: 'Lucida Fax', Helvetica, sans-serif;
}

.formcontainer label {
float: left;
width: 100px;
padding-right: 50px;
}

input:focus {
background: #F3E7C2;
}

input[type="submit"] {
background: #103E69;
-moz-border-radius: 10px;
border: none;
color: white;
font-family: 'Lucida Fax', Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
height: 30px;
width: 125px;
}

span.login {
font-size: 14px;
font-family: 'Trebuchet MS';
}

span.forgotpw {
float: right;
padding-right: 90px;
margin-top: -30px;
}

#fieldwrap {
width: 400px;
margin: 0 auto;
margin-top: 50px;
}

#fieldwrap a {
color: white;
}

#fieldwrap a:hover {
color: #333;
}

.formcontainer {
background: #103E69;
padding: 5px;
margin-bottom: 10px;
-moz-border-radius: 4px;
width: 300px;
}