put a form in centre of screen?

litton1 · Jul 15, 2005

Hi all, I am trying to put a form in the centre of the screen using CSS but not having much success and would be grateful of some help as i am sure it is a simple task but I am new to CSS, here is my code for the form:

Code:

<fieldset>
<legend>New Member Form</legend>
<form action="addnewmember.php" method="POST">
  	<label for="username">username
  	</label>	 
	<input type="text" id="username" class="input-box" />
	<br />
	
	<label for="email">E-Mail
  	</label>	 
	<input type="text" id="email" class="input-box" />
	<br />
	
	 <label for"fname">First Name
	</label> 
	<input type="text" id="fname"  size="20" class="input-box" /> (Optional)
	<br />
	
	 <label for"sname">Last Name
	</label> 
      <input type="text" id="sname"  size="20" class="input-box" /> (Optional) 
	  
    <input type="submit" name="Submit" value="Add Details" class="submit-button" />
	<br />
	
	<a href="../">Cancel</a>
</form>
</fieldset>

and i am using the following CSS formatting

Code:

label
{
width: 10em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both
}

.input-box
{
margin-bottom: 10px;
color: #26a;
background: #feb;
border: #26a solid 1px
}

.submit-button
{
margin-left: 5em;
clear: both;
color: #000;
background: #fb0;
border: 2px #9cf outset
} 

fieldset
{
border: #26a solid 1px;
width: 30em;
padding-left: 1em;
}

legend
{
background: #fb0;
border: #26a solid 1px;
padding: 1px 10px;
}

thanks in advance

Binary Intelligence, true or false?

Vragabond · Jul 15, 2005

First, fieldset is the element in the form, not the other way around. And second, I don't know exactly which element you're centering, but if you put [tt]margin: 0 auto;[/tt] on your current fieldset, it should be nice and centered. Page needs a valid doctype for that to work in certain browsers.

litton1 · Jul 15, 2005

Thanks for your reply, I was following this tutorial

http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

and i was just trying to centre the form on a test page.
i have added as suggested but the form is still left aligned

Code:

fieldset
{
border: #26a solid 1px;
width: 30em;
padding-left: 1em;
margin: 0 auto;
}

Any thoughts?

Binary Intelligence, true or false?

Vragabond · Jul 15, 2005

Again, fieldset belongs in the form, not out of the form tag. I wouldn't trust that page. Here's a W3 example:

http://www.w3.org/TR/html4/interact/forms.html#h-17.10

As for other... do you have a doctype? Which browser are you testing in? By adding margin: 0 auto; my Mozilla centers the fieldset as expected.

litton1 · Jul 16, 2005

Thanks for your prompt reply again
I have changed fieldset as advised but still it stays to the left so I have put the form in a div tag and added

Code:

div.float
{
	padding-top: 50px;
	padding-left: 120px;
	float:left;
}

Code:

<div class="float">
<form action="addnewmember.php" method="post">
<fieldset>
<legend>New Member Form</legend>

<div>
	<small>username must be at least 5 characters a-Z and/or 0-9</small>
  	</label>	
  	<label for="username">* Username
  	</label>	 
	<input tabindex="1" type="text" name="username" class="input-box"  />
</div>

and so on.......

As this gives me a block to play with and just to move the form from the left edge a bit. I did this because when you asked what are you trying to centre I didn’t have an answer? I guess the best I could say is I am trying to centre the form.
I am using IE6 and my doctype is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Thanks again for your time

Binary Intelligence, true or false?

litton1 · Jul 16, 2005

hmmm, i have like you tried in Mozilla and it centres fine?

Binary Intelligence, true or false?

Vragabond · Jul 16, 2005

Apparently your IE6 is still in quirks mode. Do you have any text above the doctype? IE will ignore doctype if it is not the first thing in the document.

litton1 · Jul 16, 2005

I see does that include tags?
Before my doctype i have

Code:

<?php 
session_start();
?>
<html><head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

Thanks for your continued input

Binary Intelligence, true or false?

Vragabond · Jul 16, 2005

Doctype does not go in the <head> tag. Doctype goes before any html code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
  <head>

litton1 · Jul 16, 2005

thanks for your reply.

litton1 · Jul 17, 2005

Hi, sorry for the last post, 90% of it was removed. Anyway I was saying that there seems to be a browser issue here, which may require some re-deign to circumvent it. I especially as there is an error box that sits to the right of the form that gives feedback on data entered e.g. correct or not. In IE that sits correctly but in Mozilla the error box is half of the bottom of the screen. I think that I should go back to tables with this as there is no browser issues. I am sure this could be resolved but I have already spent too long (admittedly probably down to my inexperience with CSS) with this issue. :[ i will return to this problem when time permits lol
thanks for all your help

Binary Intelligence, true or false?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

put a form in centre of screen?

litton1

Technical User

Vragabond

Programmer

litton1

Technical User

Vragabond

Programmer

litton1

Technical User

litton1

Technical User

Vragabond

Programmer

litton1

Technical User

Vragabond

Programmer

litton1

Technical User

litton1

Technical User

Similar threads

Part and Inventory Search

Sponsor