- This topic is empty.
-
AuthorPosts
-
October 10, 2011 at 2:26 pm #34718
Bob
MemberSo I have to do this project for school which involves making a website. Now, I’ve done some websites but never done anything really serious like for clients – I always made them just for fun and I like to learn about creating websites but I’m not a professional webdesigner.
Anyway, I have this login form and I alway have problems aligning the field inputs and labels and so on. I came up with this image in photoshop which I how I’d like to look: http://i.imgur.com/tsbqh.jpg
Can anyone tell me what would be the best way to start coding this? So far I came up with this:
Log in!
And for the 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;
}Which, well.. it looks already pretty much the way I want to look. But I guess I’d like to know how to properly align the labels and inputs and submit buttton etc. Also should I make divs around the label and inputs to create a container for them and give them the blue background or is there a better way to do this? I don’t even know if using
tags to put the next input field on the next line is good, I don’t think I’ve seen it before..
Oh, and how would I go about placing this login form somewhere like 40% down from the top? Add a margin-top: 40% or something to the wrapper?October 10, 2011 at 4:12 pm #88821chrisburton
Participant@Adman – Why use webkit or moz prefixes for border-radius?
October 11, 2011 at 8:05 am #88857Member@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;
}October 11, 2011 at 8:56 am #88869Participant@Bob – Vendor prefixes are no longer needed in border-radius or box-shadow as browsers now support the non-prefix version.
October 11, 2011 at 3:54 pm #88901MemberOk, 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..
October 13, 2011 at 3:26 pm #89037 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.
