hi,

i have been trying to make this page with a stylesheet attached to it. my problem is i can't make the whole page including all its contents div, form, images etc center aligned. i m new to css and struggling. here is the code:

<html>
<head>
 
<title>Form Design</title>
 
<style type="text/css">
body{
 border:0px none;
 text-align: center;
}
 
.formModTop {
 background:url('formHeader.gif') no-repeat;
 height:8px; 
 margin-left: auto;
 margin-right: auto;
}
 
.formModBot {
 background:url('formFooter.gif') no-repeat;
 height:8px;
 margin-left: auto;
 margin-right: auto;
}
.formBox {
 background:url('formBackground.gif') repeat-y;
 margin-left: auto;
 margin-right: auto;
}
.formBox label {
 float:left;
 display:block;
 margin-top:5px;
 font-weight:bold;
}
.formBox label.radio {
 float:left;
 display:normal;
 font-weight:normal;
 width:455px;
}
.formBox input.check {
 float:left;
}
.formBox .inputField, .formBox textarea {
 clear:both;
 display:block;
 width:478px;
 border:1px solid #9f9f9f;
}
</style>
</head>    
<body>
<h3>
<a name="AddComment">
</a>Your comment
</h3>
<span>
<div class="formModTop">&nbsp;</div>
<div class="formBox">
 
<form class="genForm" name="addcomment" id="YourComment" method="POST" action="pagexyz.asp" 
<p><label for="name">Name:</label><input type="text" class="inputField" name="name" id="name" /></p>
<label for="email">Email:</label>
<input type="text" name="email" class="inputField" id="email" /></p>
<p><label for="town">Town and country:</label><input type="text" value="" name="location" class="inputField" id="town" /></p>
<p>
<label for="maxLength">
Your comment:</label>
<textarea class="" id="maxLength" name="comment" rows="7"></textarea>
<span id="">You have <span id=""></span>&nbsp;characters left.</span>
<br />
</p>
<br/>
<input type="reset" value="Clear" /> 
<input type="submit" value="submit comment" class="basic" />
</form>
</div>
<div class="formModBot">&nbsp;</div>
</body>
</html>

please guide me. thanks

Recommended Answers

All 15 Replies

hi,

can any one please tell me how to edit my post, i can't find the edit button any where.

After a certain period of time, you cannot edit your post.

Your page is missing a doctype, so I'm not sure which version of HTML you're writing. However, since all the tags are lowercase, I can assume it's XHTML.

If that's the case, then centering is done with CSS, by setting the left and write margins of the top-most container element (such as the "body" tag", to "auto": body {margin:0 auto;}

commented: right* +5

If you are trying to center it vertically, that is a no-no in web design. It can't be done in a way that works on all screen resolutions and browser window sizes.

Centering horizontally is hard, because the "brains" at w3c TOOK AWAY THE EASY WAY TO DO IT, without replacing it. Unfortunately, their prescribed method doesn't work on all browsers.

You have to use different methods, depending on what you are trying to center:

Center text reliably using the following code:
In the stylesheet, place:

.cenx {text-align: center;}

Then, where you want to place the centered text, put this code:

<div class="cenx">Your Text to be Centered</div>

The div tag may be replaced by the p tag or one of the h tags.

Center images reliably using the following code:
In the stylesheet, place:

.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0; border: none; padding: 0;}

Then, where you want to place the centered image, put this code:

<div class="bxfix cenx">
  <img src="yourimag.jpg" alt="description" class="ceni" />
</div>

There must be room for the image, or it messes up the page.

Center other objects reliably using the following code:
In the stylesheet, place:

.cenx {text-align: center;}
.ceni {clear: both;}
.bxcen {margin-left: auto; margin-right: auto; border: none; padding: 0;}

Then, where you want to place the centered object, put this code:

<div class="bxcen cenx">
  <tag>Your object</tag>
</div>

Put the name of the tag for the object you have instead of the word tag.

it may be a 'NO NO' bit it doesnt stop creatives, designers & flash sites using it which take little consideration of screen sizes anyway... unless it's expanding to 100%.

As a developer you may need to meet the requirments or specifiaction regardless of your perosnal opinion or rules.

http://www.pistachiomonkey.com/central/ looks good to me. as long as the user doenst have an uber tiny screen.

but then in the case of a mobile user, they probbaly dont have flash and we should be giving them an alternate stylesheet where we declare the media type to be mobile rather than screen

<link href="lib/css/content.css" rel="stylesheet" type="text/css" media="mobile" />

You have other errors in your file that will cause nonrendering of styles or large differences between IE and other browser renderings:

1. You have units of measure on 0 values (e.g. 0px). This causes some browsers to cancel the entire style. If a value is 0, do not attach a unit of measure to it.

2. You have size styles (width, height) and surrounding styles (margin, border, padding) applied to the same tag. This causes rendering differences, because IE puts the surrounding styles INSIDE the size styles, but other browsers put them outside.

it may be a 'NO NO' bit it doesnt stop creatives, designers & flash sites using it which take little consideration of screen sizes anyway... unless it's expanding to 100%.

As a developer you may need to meet the requirments or specifiaction regardless of your perosnal opinion or rules.

If someone specifies something that can't be done, he is demonstrating that he is uninformed. If, after being informed, he still insists, he must be replaced. It is impossible to change the viewing user's computer to meet the bigwig's specs, and illegal to try to do so.

You can approximate a centered page on a browser window, but don't expect it to keep the same proportions or the same vertical positioning on all computers. Web pages expand downward until all of the content can be rendered. Objects with flexible sizes help, but are not always available. And a user with a low screen resolution must always scroll down on a page designed for higher resolution.

We just got a lot of LCD displays that won't display our old web pages without scrolling in both directions. The images are too big.

This will give a clue on how to structure your form fields with table and how to center the form on the page. Pretty easy.

<!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-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style2 {color: #FF0000}
.style3 {	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #2A1FAA;
}
.style7 {	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}
#form1 input {
	margin-right: 40px;
}

#formwrap {
	font: 14px Arial, Helvetica, sans-serif;
	color: #000000;
	width: 550px;
	border: 1px solid #FFEAB3;
	margin-right: auto;
	margin-left: auto;
}
#Layer3 #rightcolumn {
	font: 14px Arial, Helvetica, sans-serif;
	float: right;
	width: 157px;
	margin-left: 5px;
	border: 1px solid #DEDEE0;
	background: #E6FFFF;
}
.style2 {color: #FF0000}
#Layer3 #formwrap #form1 input {
	margin-right: 40px;
}
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #2A1FAA;
}
-->
</style>
</head>

<body>
<div id="formwrap">Content for New Div Tag Goes Here
  <form action="sales_contact_form_process.php" method="post" enctype="multipart/form-data" name="form1" target="_self" id="form1">
    <table width="100%" cellspacing="5" cellpadding="3">
      <tr>
        <td colspan="2" bgcolor="#FFEFC6"><span class="style3">All fields marked with  &quot; </span><span class="style7"><font color="#ff0000">* </font></span><span class="style3">&quot; are required.</span> </td>
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">Name:</td>
        <td align="left" bgcolor="#FFF3D5"><input name="Name" type="text" id="Name" size="40" />
            <span class="style2">*</span></td>
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">Email:</td>
        <td bgcolor="#FFF3D5"><input name="Email" type="text" id="Email" size="40" />
            <span class="style2">*</span></td>
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">Address:</td>
        <td bgcolor="#FFF3D5"><input name="Address" type="text" id="Address" value="" size="40" /></td>
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">Country:</td>
        <td bgcolor="#FFF3D5"><select name="Country" id="Country">
            <option value="">Please, select your country</option>
            <option>Afghanistan</option>
            <option>Albania</option>
            <option>Algeria</option>
            <option>American Samoa</option>
            <option>Andorra</option>
            <option>Angola</option>
            <option>Anguilla</option>
            <option>Antarctica</option>
            <option>Antigua and Barbuda</option>
            <option>Argentina</option>
            <option>Armenia</option>
            <option>Aruba</option>
            <option>Australia</option>
            <option>Austria</option>
            <option>Azerbaijan</option>
            <option>Bahamas</option>
            <option>Bahrain</option>
            <option>Bangladesh</option>
            <option>Barbados</option>
            <option>Belarus</option>
            <option>Belgium</option>
            <option>Belize</option>
            <option>Benin</option>
            <option>Bermuda</option>
            <option>Bhutan</option>
            <option>Bolivia</option>
            <option>Bosnia and Herzegovina</option>
            <option>Botswana</option>
            <option>Bouvet Island</option>
            <option>Brazil</option>
            <option>British Indian Ocean Territory</option>
            <option>Brunei</option>
            <option>Bulgaria</option>
            <option>Burkina Faso</option>
            <option>Burundi</option>
            <option>Cambodia</option>
            <option>Cameroon</option>
            <option>Canada</option>
            <option>Cape Verde</option>
            <option>Cayman Islands</option>
            <option>Central African Republic</option>
            <option>Chad</option>
            <option>Chile</option>
            <option>China</option>
            <option>Christmas Island</option>
            <option>Cocos ( Keeling ) Islands</option>
            <option>Colombia</option>
            <option>Comoros</option>
            <option>Congo</option>
            <option>Cook Islands</option>
            <option>Costa Rica</option>
            <option>C&ocirc;te d ' Ivoire</option>
            <option>Croatia ( Hrvatska )</option>
            <option>Cuba</option>
            <option>Cyprus</option>
            <option>Czech Republic</option>
            <option>Congo ( DRC )</option>
            <option>Denmark</option>
            <option>Djibouti</option>
            <option>Dominica</option>
            <option>Dominican Republic</option>
            <option>East Timor</option>
            <option>Ecuador</option>
            <option>Egypt</option>
            <option>El Salvador</option>
            <option>Equatorial Guinea</option>
            <option>Eritrea</option>
            <option>Estonia</option>
            <option>Ethiopia</option>
            <option>Falkland Islands ( Islas Malvinas )</option>
            <option>Faroe Islands</option>
            <option>Fiji Islands</option>
            <option>Finland</option>
            <option>France</option>
            <option>French Guiana</option>
            <option>French Polynesia</option>
            <option>French Southern and Antarctic Lands</option>
            <option>Gabon</option>
            <option>Gambia</option>
            <option>Georgia</option>
            <option>Germany</option>
            <option>Ghana</option>
            <option>Gibraltar</option>
            <option>Greece</option>
            <option>Greenland</option>
            <option>Grenada</option>
            <option>Guadeloupe</option>
            <option>Guam</option>
            <option>Guatemala</option>
            <option>Guinea</option>
            <option>Guinea-Bissau</option>
            <option>Guyana</option>
            <option>Haiti</option>
            <option>Heard Island and McDonald Islands</option>
            <option>Honduras</option>
            <option>Hong Kong SAR</option>
            <option>Hungary</option>
            <option>Iceland</option>
            <option>India</option>
            <option>Indonesia</option>
            <option>Iran</option>
            <option>Iraq</option>
            <option>Ireland</option>
            <option>Israel</option>
            <option>Italy</option>
            <option>Jamaica</option>
            <option>Japan</option>
            <option>Jordan</option>
            <option>Kazakhstan</option>
            <option>Kenya</option>
            <option>Kiribati</option>
            <option>Korea</option>
            <option>Kuwait</option>
            <option>Kyrgyzstan</option>
            <option>Laos</option>
            <option>Latvia</option>
            <option>Lebanon</option>
            <option>Lesotho</option>
            <option>Liberia</option>
            <option>Libya</option>
            <option>Liechtenstein</option>
            <option>Lithuania</option>
            <option>Luxembourg</option>
            <option>Macao SAR</option>
            <option>Macedonia, Former Yugoslav Republic of</option>
            <option>Madagascar</option>
            <option>Malawi</option>
            <option>Malaysia</option>
            <option>Maldives</option>
            <option>Mali</option>
            <option>Malta</option>
            <option>Marshall Islands</option>
            <option>Martinique</option>
            <option>Mauritania</option>
            <option>Mauritius</option>
            <option>Mayotte</option>
            <option>Mexico</option>
            <option>Micronesia</option>
            <option>Moldova</option>
            <option>Monaco</option>
            <option>Mongolia</option>
            <option>Montserrat</option>
            <option>Morocco</option>
            <option>Mozambique</option>
            <option>Myanmar</option>
            <option>Namibia</option>
            <option>Nauru</option>
            <option>Nepal</option>
            <option>Netherlands</option>
            <option>Netherlands Antilles</option>
            <option>New Caledonia</option>
            <option>New Zealand</option>
            <option>Nicaragua</option>
            <option>Niger</option>
            <option>Nigeria</option>
            <option>Niue</option>
            <option>Norfolk Island</option>
            <option>North Korea</option>
            <option>Northern Mariana Islands</option>
            <option>Norway</option>
            <option>Oman</option>
            <option>Pakistan</option>
            <option>Palau</option>
            <option>Panama</option>
            <option>Papua New Guinea</option>
            <option>Paraguay</option>
            <option>Peru</option>
            <option>Philippines</option>
            <option>Pitcairn Islands</option>
            <option>Poland</option>
            <option>Portugal</option>
            <option>Puerto Rico</option>
            <option>Qatar</option>
            <option>Reunion</option>
            <option>Romania</option>
            <option>Russia</option>
            <option>Rwanda</option>
            <option>Samoa</option>
            <option>San Marino</option>
            <option>S&atilde;o Tom&eacute; and Pr&igrave;ncipe</option>
            <option>Saudi Arabia</option>
            <option>Senegal</option>
            <option>Serbia and Montenegro</option>
            <option>Seychelles</option>
            <option>Sierra Leone</option>
            <option>Singapore</option>
            <option>Slovakia</option>
            <option>Slovenia</option>
            <option>Solomon Islands</option>
            <option>Somalia</option>
            <option>South Africa</option>
            <option>South Georgia and the South Sandwich Islands</option>
            <option>Spain</option>
            <option>Sri Lanka</option>
            <option>St. Helena</option>
            <option>St. Kitts and Nevis</option>
            <option>St. Lucia</option>
            <option>St. Pierre and Miquelon</option>
            <option>St. Vincent and the Grenadines</option>
            <option>Sudan</option>
            <option>Suriname</option>
            <option>Svalbard and Jan Mayen</option>
            <option>Swaziland</option>
            <option>Sweden</option>
            <option>Switzerland</option>
            <option>Syria</option>
            <option>Taiwan</option>
            <option>Tajikistan</option>
            <option>Tanzania</option>
            <option>Thailand</option>
            <option>Togo</option>
            <option>Tokelau</option>
            <option>Tonga</option>
            <option>Trinidad and Tobago</option>
            <option>Tunisia</option>
            <option>Turkey</option>
            <option>Turkmenistan</option>
            <option>Turks and Caicos Islands</option>
            <option>Tuvalu</option>
            <option>Uganda</option>
            <option>Ukraine</option>
            <option>United Arab Emirates</option>
            <option>United Kingdom</option>
            <option>United States</option>
            <option>United States Minor Outlying Islands</option>
            <option>Uruguay</option>
            <option>Uzbekistan</option>
            <option>Vanuatu</option>
            <option>Vatican City</option>
            <option>Venezuela</option>
            <option>Viet Nam</option>
            <option>Virgin Islands ( British )</option>
            <option>Virgin Islands</option>
            <option>Wallis and Futuna</option>
            <option>Yemen</option>
            <option>Zambia</option>
            <option>Zimbabwe</option>
          </select>
            <span class="style2">*</span></td>
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">Zip Code: </td>
        <td bgcolor="#FFF3D5"><input name="ZipCode" type="text" id="ZipCode" size="40" /></td>
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">Phone:</td>
        <td bgcolor="#FFF3D5"><input name="Phone" type="text" id="Phone" size="40" /></td>
      </tr>
      <tr>
        <td bgcolor="#FFF3D5">Message:</td>
        <td bgcolor="#FFF3D5"><textarea name="Message" cols="30" rows="5"></textarea>
            <span class="style2"> *</span></td>
      </tr>
      <tr>
        <td colspan="2" align="center" bgcolor="#FFEFC6"><input type="submit" name="Submit" value="Submit" />
            <input type="reset" name="Submit2" value="Reset" /></td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>

This will give a clue on how to structure your form fields with table and how to center the form on the page. Pretty easy.

Dont use tables for layouts, its like building a skyscrapper out of hay, it may work, but it wont survive the winter

You have other errors in your file that will cause nonrendering of styles or large differences between IE and other browser renderings:

1. You have units of measure on 0 values (e.g. 0px). This causes some browsers to cancel the entire style. If a value is 0, do not attach a unit of measure to it.

ummm if you refering to the yahoo reset.css its perfectly fine to just say 0. afterall 0Apples == 0Oranges. But yes if your trying to say font-size:0; in respect to image replacement, it wont work in IE6. you must say

display:block;
position:relative;
text-indent:-9999px;
font-size:0.1em;

2. You have size styles (width, height) and surrounding styles (margin, border, padding) applied to the same tag. This causes rendering differences, because IE puts the surrounding styles INSIDE the size styles, but other browsers put them outside.

Well having sent the page of to Browsershots.org we get a consistent effective layout, centerd to the page. Further i have looked at this across IE6, IE7, FF3, FF2 and all seems fine. for more info on Padding and Margins see the box model .... maybe you need to reset the browser defaults to get a consistent look

If someone specifies something that can't be done, he is demonstrating that he is uninformed. If, after being informed, he still insists, he must be replaced. It is impossible to change the viewing user's computer to meet the bigwig's specs, and illegal to try to do so.

Well in respect to be missinformed, the reason why the 'brains' at w3c removed tags like <center> is becuse XHTML is a markup languge and not a style language. Its not about look and feel its about semantics, hence why <i> is now <em> and <b> is now <strong>. Designers should not be removed for being innovative, coming up with immposible / difficult requirments. Developers should work to meet their needs and match their creative.

You can approximate a centered page on a browser window, but don't expect it to keep the same proportions or the same vertical positioning on all computers. Web pages expand downward until all of the content can be rendered. Objects with flexible sizes help, but are not always available. And a user with a low screen resolution must always scroll down on a page designed for higher resolution.

I agree with not defining a divisions height. I would only usualy define a width (with a relative dimension of % or em. But in the senario of centering to page, you have to define the bouderies, preferabbly with a fixed width. If the content is still going to overflow, then use an appropriate overflow:auto;

We just got a lot of LCD displays that won't display our old web pages without scrolling in both directions. The images are too big.

If you just changed your monitors and all your sites went out of order, then looks like your not doing effective Quality Assurance. images should repeat and scale to the screen dimensions. hence why things should be relative (%, em) and not fixed (px). for more information read the accesibility guidleines

3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2]
For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units. If absolute units are used, validate that the rendered content is usable (refer to the section on validation).
Techniques for checkpoint 3.4

The simplest way to center a page horizontally is to make a wrapper div and give it a margin: auto;. That works on all browsers that are used by the majority today.

hi,

i have been trying to make this page with a stylesheet attached to it. my problem is i can't make the whole page including all its contents div, form, images etc center aligned. i m new to css and struggling. here is the code:

<html>
<head>
 
<title>Form Design</title>
 
<style type="text/css">
body{
 border:0px none;
 text-align: center;
}
 
.formModTop {
 background:url('formHeader.gif') no-repeat;
 height:8px; 
 margin-left: auto;
 margin-right: auto;
}
 
.formModBot {
 background:url('formFooter.gif') no-repeat;
 height:8px;
 margin-left: auto;
 margin-right: auto;
}
.formBox {
 background:url('formBackground.gif') repeat-y;
 margin-left: auto;
 margin-right: auto;
}
.formBox label {
 float:left;
 display:block;
 margin-top:5px;
 font-weight:bold;
}
.formBox label.radio {
 float:left;
 display:normal;
 font-weight:normal;
 width:455px;
}
.formBox input.check {
 float:left;
}
.formBox .inputField, .formBox textarea {
 clear:both;
 display:block;
 width:478px;
 border:1px solid #9f9f9f;
}
</style>
</head>    
<body>
<h3>
<a name="AddComment">
</a>Your comment
</h3>
<span>
<div class="formModTop">&nbsp;</div>
<div class="formBox">
 
<form class="genForm" name="addcomment" id="YourComment" method="POST" action="pagexyz.asp" 
<p><label for="name">Name:</label><input type="text" class="inputField" name="name" id="name" /></p>
<label for="email">Email:</label>
<input type="text" name="email" class="inputField" id="email" /></p>
<p><label for="town">Town and country:</label><input type="text" value="" name="location" class="inputField" id="town" /></p>
<p>
<label for="maxLength">
Your comment:</label>
<textarea class="" id="maxLength" name="comment" rows="7"></textarea>
<span id="">You have <span id=""></span>&nbsp;characters left.</span>
<br />
</p>
<br/>
<input type="reset" value="Clear" /> 
<input type="submit" value="submit comment" class="basic" />
</form>
</div>
<div class="formModBot">&nbsp;</div>
</body>
</html>

please guide me. thanks

Dear, Please define a class wraper and use following in that class:--> margin:0 auto;
width:996px;(as your require)
put this class in div and your div will contain whole the contents of the Body. I mean put this div exactly below the <body> tag and end it before the body tags closes
and you will see you page will be automatically center aligned
but please specify the width in the container too..
If you want to make a flexible page mean at 100% then you should use table i.e
<table align="center"><tr><td align="center">center contents are here</td></tr></table>
Hope you will find it usefull..
Thanks

ummm if you refering to the yahoo reset.css its perfectly fine to just say 0. afterall 0Apples == 0Oranges. But yes if your trying to say font-size:0; in respect to image replacement, it wont work in IE6. you must say

What is not OK is saying 0px, 0pt, or 0em. If the value is 0, it must NOT have a unit of measure appended. It causes errors in Mozilla browsers (Firefox, Netscape) that cancel the entire style.

Well having sent the page of to Browsershots.org we get a consistent effective layout, centerd to the page. Further i have looked at this across IE6, IE7, FF3, FF2 and all seems fine. for more info on Padding and Margins see the box model .... maybe you need to reset the browser defaults to get a consistent look

The box model is nice. Unfortunately, Microsoft doesn't observe it.

W3C says the box model is (from outside to inside):
- margin
- border
- padding
- width and height styles of object
- the object

But Microsoft uses:
- width and height styles of object
- margin
- border
- padding
- the object

These are differences in how the browsers are internally defined. The only way to get rid of the problem is for Microsoft to go belly-up (or be antitrusted into baby Bills). Microsoft will not follow the standard.

If your surrounding styles are small, you may not notice the difference. But if they are large, or if they cause the elements to exceed the width of the page, then you notice it.

You can't center it from the top or bottom only from the sides. I would take out the following code from everywhere it is and put it only in body:

margin-left: auto;
margin-right: auto;

So body would be the only one with that code in it:

body{
border:0px none;
text-align: center;
margin-left: auto;
margin-right: auto;
}

This way the whole page would be centered on any resolution, but only horizontally. I didn't find a way to do it vertically as well...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.