• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 9827
  • Last Modified:

How to "center" my entire html form page

Hello,
I have developed an html form that can be accessed here: http://contest.townchryslerdodge.com/
My question is how would i "center" the entire page within my browser, instead of it aligning to the left of the page.  Ive tried a couple different techniques and nothing seems to help me.  I will also supply the code for anyone to look at to help out.  Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contest Form</title>
</head>
 
<body style="background-color: #EFEFE7; border: #FFFFFF">
<form method="post" action="sendmail.php">
 
<table style="width: 100%">
	<tr>
		<td style="font-weight: 700; width: 370px">YOUR INFORMATION</td>
		<td style="font-weight: 700">VEHICLES PRESENTLY OWNED</td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700">*First and Last Name:<br />
		<input name="name" type="text" tabindex="1" style="width: 245px" /></td>
		<td style="font-weight: 700">Year:<br />
		<input name="year1" type="text" tabindex="14" style="width: 245px" /></td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">Mailing Address:<br />
		<input name="maddress" type="text" tabindex="2" style="width: 245px" /></td>
		<td style="font-weight: 700">Make:<br />
		<input name="make1" type="text" tabindex="15" style="width: 245px" /></td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">City:<br />
		<input name="city" type="text" tabindex="3" style="width: 245px" /></td>
		<td style="font-weight: 700">Model:<br />
		<input name="model1" type="text" tabindex="16" style="width: 245px" /></td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">State:<br />
		<input name="state" type="text" tabindex="4" style="width: 245px" /></td>
		<td style="font-weight: 700">Year:<br />
		<input name="year2" type="text" tabindex="17" style="width: 245px" /></td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">Zip:<br />
		<input name="zip" type="text" tabindex="5" style="width: 245px" /></td>
		<td style="font-weight: 700">Make:<br />
		<input name="make2" type="text" tabindex="18" style="width: 245px" /></td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">*Home Phone:<br />
		<input name="hphone" type="text" tabindex="6" style="width: 245px" /></td>
		<td style="font-weight: 700">Model:<br />
		<input name="model2" type="text" tabindex="19" style="width: 245px" /></td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">E-Mail Address:<br />
		<input name="email" type="text" tabindex="7" style="width: 245px" /></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">
		<strong>Are you in the market for a new or used vehicle?<br />
		<select name="ddbox1" tabindex="8">
		<option>Yes</option>
		<option>No</option>
		</select></strong></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">
		<strong style="font-weight: 700">How long have you been looking for a 
		new or used vehicle?<br />
		<select name="ddbox2" tabindex="9">
		<option>1 Week</option>
		<option>1 Month</option>
		<option>3 Months Or Longer</option>
		</select></strong></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">
		<strong>To complete the form you must visit several pages within our site and find the page codes and include them in your enrollment form. It&rsquo;s that simple.&nbsp; You will find the codes at the bottom of the pages.</strong></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">
		*<a target="_blank" href="http://www.townchryslerdodge.net/new-inventory/index.htm?reset=InventoryListing?reset=InventoryListing">New Car Code:</a><br />
		<input name="newcode" type="text" tabindex="10" style="width: 175px" /></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">
		*<a target="_blank" href="http://www.townchryslerdodge.net/used-inventory/index.htm?reset=InventoryListing?reset=InventoryListing">Used Car Code:</a><br />
		<input name="usedcode" type="text" tabindex="11" style="width: 175px" /></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">
		*<a target="_blank" href="http://www.townchryslerdodge.net/specials/service.htm">Service 
		Code:</a><br />
		<input name="servicecode" type="text" tabindex="12" style="width: 175px" /></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">
		*<a target="_blank" href="http://www.townchryslerdodge.net/specials/parts.htm">Parts 
		Code:</a><br />
		<input name="partscode" type="text" tabindex="13" style="width: 175px" /></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700;">
		<a target="_blank" href="http://www.townchryslerdodge.net/rules.htm">OFFICIAL GENERAL 
		CONTEST RULES</a></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 370px; font-weight: 700; font-style: italic;">
		* Denotes required field.</td>
		<td>&nbsp;</td>
	</tr>
</table>
<p style="margin-left: 40px">
<input name="Submit" type="submit" value="Submit Form" />&nbsp;&nbsp;&nbsp;&nbsp;
<input name="Reset1" type="reset" value="Reset Form" /></p>
</form>
</body>
 
</html>

Open in new window

0
AxeonTech
Asked:
AxeonTech
  • 2
  • 2
  • 2
1 Solution
 
erikTsomikSystem Architect, CF programmer Commented:
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contest Form</title>
</head>
 
<body style="background-color: #EFEFE7; border: #FFFFFF" style="position:absolute;">
<div align="center">
<form method="post" action="sendmail.php">
 
<table width="100%">
        <tr>
                <td style="font-weight: 700; width: 370px">YOUR INFORMATION</td>
                <td style="font-weight: 700">VEHICLES PRESENTLY OWNED</td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700">*First and Last Name:<br />
                <input name="name" type="text" tabindex="1" style="width: 245px" /></td>
                <td style="font-weight: 700">Year:<br />
                <input name="year1" type="text" tabindex="14" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">Mailing Address:<br />
                <input name="maddress" type="text" tabindex="2" style="width: 245px" /></td>
                <td style="font-weight: 700">Make:<br />
                <input name="make1" type="text" tabindex="15" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">City:<br />
                <input name="city" type="text" tabindex="3" style="width: 245px" /></td>
                <td style="font-weight: 700">Model:<br />
                <input name="model1" type="text" tabindex="16" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">State:<br />
                <input name="state" type="text" tabindex="4" style="width: 245px" /></td>
                <td style="font-weight: 700">Year:<br />
                <input name="year2" type="text" tabindex="17" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">Zip:<br />
                <input name="zip" type="text" tabindex="5" style="width: 245px" /></td>
                <td style="font-weight: 700">Make:<br />
                <input name="make2" type="text" tabindex="18" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">*Home Phone:<br />
                <input name="hphone" type="text" tabindex="6" style="width: 245px" /></td>
                <td style="font-weight: 700">Model:<br />
                <input name="model2" type="text" tabindex="19" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">E-Mail Address:<br />
                <input name="email" type="text" tabindex="7" style="width: 245px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <strong>Are you in the market for a new or used vehicle?<br />
                <select name="ddbox1" tabindex="8">
                <option>Yes</option>
                <option>No</option>
                </select></strong></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <strong style="font-weight: 700">How long have you been looking for a
                new or used vehicle?<br />
                <select name="ddbox2" tabindex="9">
                <option>1 Week</option>
                <option>1 Month</option>
                <option>3 Months Or Longer</option>
                </select></strong></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <strong>To complete the form you must visit several pages within our site and find the page codes and include them in your enrollment form. It&rsquo;s that simple.  You will find the codes at the bottom of the pages.</strong></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/new-inventory/index.htm?reset=InventoryListing?reset=InventoryListing">New Car Code:</a><br />
                <input name="newcode" type="text" tabindex="10" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/used-inventory/index.htm?reset=InventoryListing?reset=InventoryListing">Used Car Code:</a><br />
                <input name="usedcode" type="text" tabindex="11" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/specials/service.htm">Service
                Code:</a><br />
                <input name="servicecode" type="text" tabindex="12" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/specials/parts.htm">Parts
                Code:</a><br />
                <input name="partscode" type="text" tabindex="13" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;" >
                <a target="_blank" href="http://www.townchryslerdodge.net/rules.htm">OFFICIAL GENERAL
                CONTEST RULES</a></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700; font-style: italic;">
                * Denotes required field.</td>
                <td> </td>
        </tr>
</table>
<p style="margin-left: 40px">
<input name="Submit" type="submit" value="Submit Form" />    
<input name="Reset1" type="reset" value="Reset Form" /></p>
</form>
</div>
</body>
 
</html>
0
 
AxeonTechAuthor Commented:
Hello,
Sorry, but all that did was center the submit and reset buttons below and move the right colomn over to the right a bit.
0
 
sunithnairCommented:
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contest Form</title>
</head>
 
<body style="background-color: #EFEFE7; border: #FFFFFF">
<form method="post" action="sendmail.php">
<div style="align:center">
<table>
        <tr>
                <td style="font-weight: 700; width: 370px">YOUR INFORMATION</td>
                <td style="font-weight: 700">VEHICLES PRESENTLY OWNED</td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700">*First and Last Name:<br />
                <input name="name" type="text" tabindex="1" style="width: 245px" /></td>
                <td style="font-weight: 700">Year:<br />
                <input name="year1" type="text" tabindex="14" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">Mailing Address:<br />
                <input name="maddress" type="text" tabindex="2" style="width: 245px" /></td>
                <td style="font-weight: 700">Make:<br />
                <input name="make1" type="text" tabindex="15" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">City:<br />
                <input name="city" type="text" tabindex="3" style="width: 245px" /></td>
                <td style="font-weight: 700">Model:<br />
                <input name="model1" type="text" tabindex="16" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">State:<br />
                <input name="state" type="text" tabindex="4" style="width: 245px" /></td>
                <td style="font-weight: 700">Year:<br />
                <input name="year2" type="text" tabindex="17" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">Zip:<br />
                <input name="zip" type="text" tabindex="5" style="width: 245px" /></td>
                <td style="font-weight: 700">Make:<br />
                <input name="make2" type="text" tabindex="18" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">*Home Phone:<br />
                <input name="hphone" type="text" tabindex="6" style="width: 245px" /></td>
                <td style="font-weight: 700">Model:<br />
                <input name="model2" type="text" tabindex="19" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">E-Mail Address:<br />
                <input name="email" type="text" tabindex="7" style="width: 245px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <strong>Are you in the market for a new or used vehicle?<br />
                <select name="ddbox1" tabindex="8">
                <option>Yes</option>
                <option>No</option>
                </select></strong></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <strong style="font-weight: 700">How long have you been looking for a 
                new or used vehicle?<br />
                <select name="ddbox2" tabindex="9">
                <option>1 Week</option>
                <option>1 Month</option>
                <option>3 Months Or Longer</option>
                </select></strong></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <strong>To complete the form you must visit several pages within our site and find the page codes and include them in your enrollment form. It&rsquo;s that simple.  You will find the codes at the bottom of the pages.</strong></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/new-inventory/index.htm?reset=InventoryListing?reset=InventoryListing">New Car Code:</a><br />
                <input name="newcode" type="text" tabindex="10" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/used-inventory/index.htm?reset=InventoryListing?reset=InventoryListing">Used Car Code:</a><br />
                <input name="usedcode" type="text" tabindex="11" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/specials/service.htm">Service 
                Code:</a><br />
                <input name="servicecode" type="text" tabindex="12" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/specials/parts.htm">Parts 
                Code:</a><br />
                <input name="partscode" type="text" tabindex="13" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <a target="_blank" href="http://www.townchryslerdodge.net/rules.htm">OFFICIAL GENERAL 
                CONTEST RULES</a></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700; font-style: italic;">
                * Denotes required field.</td>
                <td> </td>
        </tr>
</table>
<p style="margin-left: 40px">
<input name="Submit" type="submit" value="Submit Form" />    
<input name="Reset1" type="reset" value="Reset Form" /></p>
</div>
</form>
</body>
 
</html>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
AxeonTechAuthor Commented:
Hello,
Sorry, but that actually didnt change anything at all.  Its odd that its so difficult just to center the content in the page.
0
 
sunithnairCommented:
Did you remove this style from the table? I could see that style in the url you provided
<table style="width: 100%">
0
 
erikTsomikSystem Architect, CF programmer Commented:
try this it works for me
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contest Form</title>
</head>
 
<body style="background-color: #EFEFE7; border: #FFFFFF">
<form method="post" action="sendmail.php">
<div align="center">
<table>
        <tr>
                <td style="font-weight: 700; width: 370px">YOUR INFORMATION</td>
                <td style="font-weight: 700">VEHICLES PRESENTLY OWNED</td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700">*First and Last Name:<br />
                <input name="name" type="text" tabindex="1" style="width: 245px" /></td>
                <td style="font-weight: 700">Year:<br />
                <input name="year1" type="text" tabindex="14" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">Mailing Address:<br />
                <input name="maddress" type="text" tabindex="2" style="width: 245px" /></td>
                <td style="font-weight: 700">Make:<br />
                <input name="make1" type="text" tabindex="15" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">City:<br />
                <input name="city" type="text" tabindex="3" style="width: 245px" /></td>
                <td style="font-weight: 700">Model:<br />
                <input name="model1" type="text" tabindex="16" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">State:<br />
                <input name="state" type="text" tabindex="4" style="width: 245px" /></td>
                <td style="font-weight: 700">Year:<br />
                <input name="year2" type="text" tabindex="17" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">Zip:<br />
                <input name="zip" type="text" tabindex="5" style="width: 245px" /></td>
                <td style="font-weight: 700">Make:<br />
                <input name="make2" type="text" tabindex="18" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">*Home Phone:<br />
                <input name="hphone" type="text" tabindex="6" style="width: 245px" /></td>
                <td style="font-weight: 700">Model:<br />
                <input name="model2" type="text" tabindex="19" style="width: 245px" /></td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">E-Mail Address:<br />
                <input name="email" type="text" tabindex="7" style="width: 245px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <strong>Are you in the market for a new or used vehicle?<br />
                <select name="ddbox1" tabindex="8">
                <option>Yes</option>
                <option>No</option>
                </select></strong></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <strong style="font-weight: 700">How long have you been looking for a
                new or used vehicle?<br />
                <select name="ddbox2" tabindex="9">
                <option>1 Week</option>
                <option>1 Month</option>
                <option>3 Months Or Longer</option>
                </select></strong></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <strong>To complete the form you must visit several pages within our site and find the page codes and include them in your enrollment form. It&rsquo;s that simple.  You will find the codes at the bottom of the pages.</strong></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/new-inventory/index.htm?reset=InventoryListing?reset=InventoryListing">New Car Code:</a><br />
                <input name="newcode" type="text" tabindex="10" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/used-inventory/index.htm?reset=InventoryListing?reset=InventoryListing">Used Car Code:</a><br />
                <input name="usedcode" type="text" tabindex="11" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/specials/service.htm">Service
                Code:</a><br />
                <input name="servicecode" type="text" tabindex="12" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                *<a target="_blank" href="http://www.townchryslerdodge.net/specials/parts.htm">Parts
                Code:</a><br />
                <input name="partscode" type="text" tabindex="13" style="width: 175px" /></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700;">
                <a target="_blank" href="http://www.townchryslerdodge.net/rules.htm">OFFICIAL GENERAL
                CONTEST RULES</a></td>
                <td> </td>
        </tr>
        <tr>
                <td style="width: 370px; font-weight: 700; font-style: italic;">
                * Denotes required field.</td>
                <td> </td>
        </tr>
</table>
<p style="margin-left: 40px">
<input name="Submit" type="submit" value="Submit Form" />    
<input name="Reset1" type="reset" value="Reset Form" /></p>
</div>
</form>
</body>
 
</html>
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now