0

HI GUYS.Am trainning to center my form in the middle of my html page but I have failed.Can any one help? Below is my code.........

<html>
<head>
<title>
Rich Trials
</title>
</head>
<body>

<form name="">
username:
<input type="text" name="username" />
<br />
password:
<input type="password" name="password" />

<br /><p>

<input type="SUBMIT" value="LOGIN" />

</form>
</body>
</html>
Thanks in advance......

6
Contributors
8
Replies
21
Views
7 Years
Discussion Span
Last Post by drjohn
0

To make it center in Firefox/Chrome/Safari, use a wrapper. Wrap the Form in a div section as follows (set the width to whatever you want):

<div style="margin:0 auto;width:75%;text-align:left">

For IE, you will need to apply a style to the body as follows:

<body style="text-align:center">

Generally, it is better to put the styles in a CSS stylesheet, but the examples above will work fine if you are not familiar with CSS.

0

set a dtd and complete the necessary <head> details so that css will work
just <html> is html1.1 with no style support,
then play with andrews (functional) code

Edited by almostbob: n/a

0
<html>
<head>
<title>
Rich Trials
</title>
</head>
<body>
<center>
<div style="text-align:left;">
<form name="">
username:
<input type="text" name="username" />
<br />
password:
<input type="password" name="password" />

<br /><p>

<input type="SUBMIT" value="LOGIN" />

</form> 
</div>
</center>
</body>
</html>
0

<center>?? Inline styling?? This is 2010.

@kizito:

Your html is all to hell - no closing tags, no labels for your form fields. Put it through an xhtml validator and follow the advice. THEN tackle the styling/css - it'll be much easier once your markup is working. Place your style rules into an external css file.

0

ardav, i don't see kitso asking for xhtml anywhere.
Inline styling is the best way to demonstrate how to get it to work based on the simplicity of the initial code.
<center> is old hat but it is still html 4.1 and interpreted by all browsers in the same way.
Thanks for the advice on which year it is.

0

The correct answer is to make your wrapper div, give it a width, and set margin:auto. The bit about text-align is an old technique used when you work with ie6, and then it requires more code to overcome the text being aligned centre. Also only about 10% of users are still on IE6, so don't worry too much about them with this particular bit of code, to be honest.

also the advice given was incomplete anyway. you should have set text-align:center for the BODY, then text-align:left for the wrapper div to get this to work in ie6 (all other browsers understand margin:center.

BUT you must use a doctype. Google on it an duse html 4.01 strict or at worst html4.01 loose. Without a doc type, IE will be in quirks mode and screw up your layout.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.