Forums

Bob

So 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:

<body>
  
	<div id="loginwrap">
	
	  <div id="title">
	    <p>Log in!</p>
	  </div>
	  
	  <form>
	    
		<label for="username">Username:</label>
		<input type="text" id="username" name="username" />
		
		<br />
		
		<label for="password">Password:</label>
		<input type="text" id="password" name="password" />
		
		<br />
	  
	    <input type="submit" name="submit" value="Log in" />
		
	  </form>
	  
	</div>

  </body>

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?

Eric

The html looks good. Use inline-block on the labels and inputs is the best. BR's are fine in forms as they are considered more assessable to some because when css is off they are still spaced.

Adman

I wouldn't use BR tags in this situation. Especially since you want a background around the label and input. I would use an unordered list and the style the list with the blue color. Don't forget to have the other vendor prefixes for the border-radius. Also the margin percentage is a percent of it's parent width.

chrisburton

@Adman - Why use webkit or moz prefixes for border-radius?

Adman

oops you are right border-radius do not need vendor prefixes.

Bob

@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:

<body>
  
	<div id="loginwrap">
	
	  <div id="title">
	    <p>Log in!</p>
	  </div>
	  
	  <form method="post">
	  
		<div id="fieldwrap">
		
			<div class="formcontainer">
			
				<label for="username">Username:</label>
				<input type="text" id="username" name="username" />
			
			</div>
		
			<div class="formcontainer">
			
				<label for="password">Password:</label>
				<input type="password" id="password" name="password" />
			
			</div>
		
		<br />
		
			<span class="login forgotpw"><a href="#">Forgot your password?</a></span>
		
		<br />
	  
			<input type="submit" name="submit" value="Log in" />
			<input type="checkbox" id="remember" name="remember" /><span class="login"><label for="remember">Remember me</label></span>
			
		</div>
		
	  </form>
	  
	</div>

  </body>

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;
	}

chrisburton

@Bob - Vendor prefixes are no longer needed in border-radius or box-shadow as browsers now support the non-prefix version.

Bob

Ok, so now I used an unordered list:

<body>

	<div id="loginwrap">
	
	  <div id="title">
	    <p>Log in to!</p>
	  </div>
	  
	  <div id="fieldwrap">
		<form method="post">	    
		
				<ul>			
					<li>			
						<label for="username">Username:</label>
						<input type="text" id="username" name="username" />			
					</li>
				
					<li>			
						<label for="password">Password:</label>
						<input type="password" id="password" name="password" />				
					</li>
					
				</ul>
			
				<a id="forgotpw" href="#">Forgot your password?</a>
			
				<input type="submit" name="submit" value="Log in" />
				<input type="checkbox" id="remember" name="remember" /><label id="rememberme" for="remember">Remember me</label>
			</form>
	  </div>
	  
	</div>

  </body>

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..

Adman

@bob

Code looks good, Semantically putting these in a list is better then wrapping them in div's.

Here are a few of my tips:

I wouldn't use a div around the form, just use the styling for the form itself.
You could put the "Forgot your password" in a list then do a pseudo-selector, :last-child to remove the background. This way it aligns properly with the form itself. Also get rid of the margin-top: -20px; you are pushing it behind the list.
You could put the button in the list also, but not really needed. Just need to align it properly.

Bob

Ok great thanks for the help @Adman and @ChristopherBurton and @Eric. I have removed the div around the form, it was useless indeed and also put the forgot your password in a list item. Thanks again for the help :)

treehouse : what would you like to learn today?

Forums

Coding a simple form