TomTees
September 18, 2010, 3:58pm
1
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
TomTees
September 18, 2010, 5:45pm
2
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…
TomTees
TomTees
September 18, 2010, 6:40pm
3
RyanReese:
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
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 :).
donboe
September 18, 2010, 4:03pm
5
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
TomTees
September 18, 2010, 5:39pm
8
RyanReese:
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?
How can I make the form smaller and centered?
I added
width: 70%;
TomTees
system
September 18, 2010, 5:24pm
9
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
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?
TomTees
September 18, 2010, 4:31pm
11
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!
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!