Adjusting form on page

I just typed a simple form from my Sitepoint book, but it doesn’t look like the book example.

I’m looking for a way to be able to easily move it over to the left and maybe move it down as well so it so it is in the center of my page.

I’m working on PHP now and just want a reasonably formatted form, but don’t want to do much CSS today (i.e. don’t send me to some tutorial!).

Not sure if you want a screenshoot attached or my code?!

TomTees

So which is better…

From my Sitepoint book:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml" lang="en-US">
	<head>
		<title>User Registration Form</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="registration.css">
	</head>
	<body>
	</body>
</html>

From the NetBeans template:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>User Registration Form</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="registration.css">
	</head>
	<body>
	</body>
</html>

I never understand all the nuances of the HTML headers… :frowning:

TomTees

So my code above from NetBeans was okay?

How about my question on centering things left to right?

And to address another posters question, I was also curious how to center or at least move down my form so it is centered more vertically.

TomTees

Without attached code we can do absolutely nothing to help :). A link would be preferable but posting full HTML/CSS will suffice as well :).

Maybe the link or your CSS woulld be handy.

Edit: Sorry was the same time Ryan

Well…if the forms the only thing on the page and there no height set on it try this.

If you want it centered horizontally, then apply a width to the <form> element (aka width:50% or something) and hten give margin:0 auto :).

Just because it comes from a sitepoint book doesn’t mean you shouild use it (sorry SP! :))

You shouldn’t ever use an XHTML doctype unless you plan on serving the mime type as XHTML because otherwise you are basically just using fake XHTML (if you were eto serve the mime type for XHTML then it wouldn’t work in IE)

I prefer to stick with HTML 4.01 strict and code by those standards.

To answer your question, I’d typically go for the netbeans doctype, however it depends on how you code the rest of your page

How can I make the form smaller and centered?

I added

width: 70%;

TomTees

what you’ve got is wrong markup. you have html 4.01 strict DTD but use the self closing tag feature for empty elements that belongs to an xhtml markup. start with that :slight_smile:

Hi, your labels are width:40%. Since no parent has a width it will be 40% of the viewport. The label is much too wide. Lower the width on the label, or set a width on the <form> to make the calculated 40% width on the label smaller (aka if the viewport is 1000px wide, and the label has the 40% width, it will be 400px wide.) Make the form element smaller then 1000px to make it the desired width

Or just change the label width. Whatever floats your boat

Your post wasn’t all that clear on what else you wanted moved?

Here is what I have so far…

index.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>User Registration Form</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="registration.css">
	</head>
	<body>
		<h1>User Registration Form</h1>
		<form method="post" action="registration.php">
			<!-- Registration Fields -->
			<div>
				<label for="firstname">First Name:</label>
				<input type="text" name="firstname" class="txt" id="firstname" />
			</div>
			<div>
				<label for="lastname">Last Name:</label>
				<input type="text" name="lastname" class="txt" id="lastname" />
			</div>
			<div>
				<label for="email">E-mail:</label>
				<input type="text" name="email" class="txt" id="email" />
			</div>
			<div>
				<label for="email2">Re-enter E-mail:</label>
				<input type="text" name="email2" class="txt" id="email2" />
			</div>
			<div>
				<label for="password1">Password:</label>
				<input type="password" name="password1" class="txt" id="password1" />
			</div>
			<div>
				<label for="password2">Re-enter Password:</label>
				<input type="password" name="password2" class="txt" id="password2" />
			</div>
			<!-- Submit button -->
			<div>
				<input type="submit" name="btnSubmit" value="Register" class="btn" id="btnSubmit" />
			</div>
		</form>
	</body>
</html>
<?php
/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

?>

registration.css


h1 {
		font: 1.2em Arial, Helvetica, sans-serif;
}

input.txt {
	color: #00008B;
	background-color: #E3F2F7;
	border: 1px inset #00008B;
	width: 200px;
}

input.btn {
	color: #00008B;
	background-color: #ADD8E6;
	border: 1px outset #00008B;
}

form div {
	clear: left;
	margin: 0;
	padding: 0;
	padding-top: 0.6em;
}

form div label {
	float: left;
	width: 40%;
	font: bold 0.9em Arial, Helvetica, sans-serif;
}

I’ve been reading HTML/CSS books on and off over the last year but haven’t internalized things much.

Need to focus on PHP for now.

Will come back to my Head First and Sitepoint books if I can get my backend website working.

In the meantime, some HTML/CSS help would, well, help! :smiley:

TomTees

P.S. Why doesn’t Sitepoint make the code boxes wider so people don’t have to scroll left/right?! That is sooo annoying!