943,719 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Oct 10th, 2006
0

How to center align the whole page?

Expand Post »
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]

<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>
[/html]

please guide me. thanks
Similar Threads
Reputation Points: 15
Solved Threads: 0
Junior Poster
tech291083 is offline Offline
181 posts
since Oct 2006
Oct 10th, 2006
0

Re: How to center align the whole page?

hi,

can any one please tell me how to edit my post, i can't find the edit button any where.
Reputation Points: 15
Solved Threads: 0
Junior Poster
tech291083 is offline Offline
181 posts
since Oct 2006
Oct 10th, 2006
1

Re: How to center align the whole page?

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;}
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Jul 24th, 2008
0

Re: How to center align the whole page?

Having a Doctype is a must at all times, without whcih the page defualts to quirks and it allows the browser to behave its own way, and not adhear to the Standards.

If you want to align center of page, see my Post here http://pistachiomonkey.com/blog/archives/133
Reputation Points: 10
Solved Threads: 1
Newbie Poster
nickmorss is offline Offline
5 posts
since Jul 2008
Jul 24th, 2008
0

Re: How to center align the whole page?

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:
HTML and CSS Syntax (Toggle Plain Text)
  1. .cenx {text-align: center;}
Then, where you want to place the centered text, put this code:
HTML and CSS Syntax (Toggle Plain Text)
  1. <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:
HTML and CSS Syntax (Toggle Plain Text)
  1. .cenx {text-align: center;}
  2. .ceni {clear: both;}
  3. .bxfix {margin: 0; border: none; padding: 0;}
Then, where you want to place the centered image, put this code:
HTML and CSS Syntax (Toggle Plain Text)
  1. <div class="bxfix cenx">
  2. <img src="yourimag.jpg" alt="description" class="ceni" />
  3. </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:
HTML and CSS Syntax (Toggle Plain Text)
  1. .cenx {text-align: center;}
  2. .ceni {clear: both;}
  3. .bxcen {margin-left: auto; margin-right: auto; border: none; padding: 0;}
Then, where you want to place the centered object, put this code:
HTML and CSS Syntax (Toggle Plain Text)
  1. <div class="bxcen cenx">
  2. <tag>Your object</tag>
  3. </div>
Put the name of the tag for the object you have instead of the word tag.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Jul 24th, 2008
0

Re: How to center align the whole page?

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

HTML and CSS Syntax (Toggle Plain Text)
  1. <link href="lib/css/content.css" rel="stylesheet" type="text/css" media="mobile" />
Last edited by nickmorss; Jul 24th, 2008 at 1:28 pm.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
nickmorss is offline Offline
5 posts
since Jul 2008
Jul 24th, 2008
0

Re: How to center align the whole page?

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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Jul 24th, 2008
0

Re: How to center align the whole page?

Click to Expand / Collapse  Quote originally posted by nickmorss ...
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.
Last edited by MidiMagic; Jul 24th, 2008 at 1:38 pm.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Jul 24th, 2008
0

Re: How to center align the whole page?

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.

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. .style2 {color: #FF0000}
  9. .style3 { font-family: Arial, Helvetica, sans-serif;
  10. font-size: 14px;
  11. color: #2A1FAA;
  12. }
  13. .style7 { font-family: Arial, Helvetica, sans-serif;
  14. font-size: 16px;
  15. }
  16. #form1 input {
  17. margin-right: 40px;
  18. }
  19.  
  20. #formwrap {
  21. font: 14px Arial, Helvetica, sans-serif;
  22. color: #000000;
  23. width: 550px;
  24. border: 1px solid #FFEAB3;
  25. margin-right: auto;
  26. margin-left: auto;
  27. }
  28. #Layer3 #rightcolumn {
  29. font: 14px Arial, Helvetica, sans-serif;
  30. float: right;
  31. width: 157px;
  32. margin-left: 5px;
  33. border: 1px solid #DEDEE0;
  34. background: #E6FFFF;
  35. }
  36. .style2 {color: #FF0000}
  37. #Layer3 #formwrap #form1 input {
  38. margin-right: 40px;
  39. }
  40. .style3 {
  41. font-family: Arial, Helvetica, sans-serif;
  42. font-size: 14px;
  43. color: #2A1FAA;
  44. }
  45. -->
  46. </style>
  47. </head>
  48.  
  49. <body>
  50. <div id="formwrap">Content for New Div Tag Goes Here
  51. <form action="sales_contact_form_process.php" method="post" enctype="multipart/form-data" name="form1" target="_self" id="form1">
  52. <table width="100%" cellspacing="5" cellpadding="3">
  53. <tr>
  54. <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>
  55. </tr>
  56. <tr>
  57. <td bgcolor="#FFF3D5">Name:</td>
  58. <td align="left" bgcolor="#FFF3D5"><input name="Name" type="text" id="Name" size="40" />
  59. <span class="style2">*</span></td>
  60. </tr>
  61. <tr>
  62. <td bgcolor="#FFF3D5">Email:</td>
  63. <td bgcolor="#FFF3D5"><input name="Email" type="text" id="Email" size="40" />
  64. <span class="style2">*</span></td>
  65. </tr>
  66. <tr>
  67. <td bgcolor="#FFF3D5">Address:</td>
  68. <td bgcolor="#FFF3D5"><input name="Address" type="text" id="Address" value="" size="40" /></td>
  69. </tr>
  70. <tr>
  71. <td bgcolor="#FFF3D5">Country:</td>
  72. <td bgcolor="#FFF3D5"><select name="Country" id="Country">
  73. <option value="">Please, select your country</option>
  74. <option>Afghanistan</option>
  75. <option>Albania</option>
  76. <option>Algeria</option>
  77. <option>American Samoa</option>
  78. <option>Andorra</option>
  79. <option>Angola</option>
  80. <option>Anguilla</option>
  81. <option>Antarctica</option>
  82. <option>Antigua and Barbuda</option>
  83. <option>Argentina</option>
  84. <option>Armenia</option>
  85. <option>Aruba</option>
  86. <option>Australia</option>
  87. <option>Austria</option>
  88. <option>Azerbaijan</option>
  89. <option>Bahamas</option>
  90. <option>Bahrain</option>
  91. <option>Bangladesh</option>
  92. <option>Barbados</option>
  93. <option>Belarus</option>
  94. <option>Belgium</option>
  95. <option>Belize</option>
  96. <option>Benin</option>
  97. <option>Bermuda</option>
  98. <option>Bhutan</option>
  99. <option>Bolivia</option>
  100. <option>Bosnia and Herzegovina</option>
  101. <option>Botswana</option>
  102. <option>Bouvet Island</option>
  103. <option>Brazil</option>
  104. <option>British Indian Ocean Territory</option>
  105. <option>Brunei</option>
  106. <option>Bulgaria</option>
  107. <option>Burkina Faso</option>
  108. <option>Burundi</option>
  109. <option>Cambodia</option>
  110. <option>Cameroon</option>
  111. <option>Canada</option>
  112. <option>Cape Verde</option>
  113. <option>Cayman Islands</option>
  114. <option>Central African Republic</option>
  115. <option>Chad</option>
  116. <option>Chile</option>
  117. <option>China</option>
  118. <option>Christmas Island</option>
  119. <option>Cocos ( Keeling ) Islands</option>
  120. <option>Colombia</option>
  121. <option>Comoros</option>
  122. <option>Congo</option>
  123. <option>Cook Islands</option>
  124. <option>Costa Rica</option>
  125. <option>C&ocirc;te d ' Ivoire</option>
  126. <option>Croatia ( Hrvatska )</option>
  127. <option>Cuba</option>
  128. <option>Cyprus</option>
  129. <option>Czech Republic</option>
  130. <option>Congo ( DRC )</option>
  131. <option>Denmark</option>
  132. <option>Djibouti</option>
  133. <option>Dominica</option>
  134. <option>Dominican Republic</option>
  135. <option>East Timor</option>
  136. <option>Ecuador</option>
  137. <option>Egypt</option>
  138. <option>El Salvador</option>
  139. <option>Equatorial Guinea</option>
  140. <option>Eritrea</option>
  141. <option>Estonia</option>
  142. <option>Ethiopia</option>
  143. <option>Falkland Islands ( Islas Malvinas )</option>
  144. <option>Faroe Islands</option>
  145. <option>Fiji Islands</option>
  146. <option>Finland</option>
  147. <option>France</option>
  148. <option>French Guiana</option>
  149. <option>French Polynesia</option>
  150. <option>French Southern and Antarctic Lands</option>
  151. <option>Gabon</option>
  152. <option>Gambia</option>
  153. <option>Georgia</option>
  154. <option>Germany</option>
  155. <option>Ghana</option>
  156. <option>Gibraltar</option>
  157. <option>Greece</option>
  158. <option>Greenland</option>
  159. <option>Grenada</option>
  160. <option>Guadeloupe</option>
  161. <option>Guam</option>
  162. <option>Guatemala</option>
  163. <option>Guinea</option>
  164. <option>Guinea-Bissau</option>
  165. <option>Guyana</option>
  166. <option>Haiti</option>
  167. <option>Heard Island and McDonald Islands</option>
  168. <option>Honduras</option>
  169. <option>Hong Kong SAR</option>
  170. <option>Hungary</option>
  171. <option>Iceland</option>
  172. <option>India</option>
  173. <option>Indonesia</option>
  174. <option>Iran</option>
  175. <option>Iraq</option>
  176. <option>Ireland</option>
  177. <option>Israel</option>
  178. <option>Italy</option>
  179. <option>Jamaica</option>
  180. <option>Japan</option>
  181. <option>Jordan</option>
  182. <option>Kazakhstan</option>
  183. <option>Kenya</option>
  184. <option>Kiribati</option>
  185. <option>Korea</option>
  186. <option>Kuwait</option>
  187. <option>Kyrgyzstan</option>
  188. <option>Laos</option>
  189. <option>Latvia</option>
  190. <option>Lebanon</option>
  191. <option>Lesotho</option>
  192. <option>Liberia</option>
  193. <option>Libya</option>
  194. <option>Liechtenstein</option>
  195. <option>Lithuania</option>
  196. <option>Luxembourg</option>
  197. <option>Macao SAR</option>
  198. <option>Macedonia, Former Yugoslav Republic of</option>
  199. <option>Madagascar</option>
  200. <option>Malawi</option>
  201. <option>Malaysia</option>
  202. <option>Maldives</option>
  203. <option>Mali</option>
  204. <option>Malta</option>
  205. <option>Marshall Islands</option>
  206. <option>Martinique</option>
  207. <option>Mauritania</option>
  208. <option>Mauritius</option>
  209. <option>Mayotte</option>
  210. <option>Mexico</option>
  211. <option>Micronesia</option>
  212. <option>Moldova</option>
  213. <option>Monaco</option>
  214. <option>Mongolia</option>
  215. <option>Montserrat</option>
  216. <option>Morocco</option>
  217. <option>Mozambique</option>
  218. <option>Myanmar</option>
  219. <option>Namibia</option>
  220. <option>Nauru</option>
  221. <option>Nepal</option>
  222. <option>Netherlands</option>
  223. <option>Netherlands Antilles</option>
  224. <option>New Caledonia</option>
  225. <option>New Zealand</option>
  226. <option>Nicaragua</option>
  227. <option>Niger</option>
  228. <option>Nigeria</option>
  229. <option>Niue</option>
  230. <option>Norfolk Island</option>
  231. <option>North Korea</option>
  232. <option>Northern Mariana Islands</option>
  233. <option>Norway</option>
  234. <option>Oman</option>
  235. <option>Pakistan</option>
  236. <option>Palau</option>
  237. <option>Panama</option>
  238. <option>Papua New Guinea</option>
  239. <option>Paraguay</option>
  240. <option>Peru</option>
  241. <option>Philippines</option>
  242. <option>Pitcairn Islands</option>
  243. <option>Poland</option>
  244. <option>Portugal</option>
  245. <option>Puerto Rico</option>
  246. <option>Qatar</option>
  247. <option>Reunion</option>
  248. <option>Romania</option>
  249. <option>Russia</option>
  250. <option>Rwanda</option>
  251. <option>Samoa</option>
  252. <option>San Marino</option>
  253. <option>S&atilde;o Tom&eacute; and Pr&igrave;ncipe</option>
  254. <option>Saudi Arabia</option>
  255. <option>Senegal</option>
  256. <option>Serbia and Montenegro</option>
  257. <option>Seychelles</option>
  258. <option>Sierra Leone</option>
  259. <option>Singapore</option>
  260. <option>Slovakia</option>
  261. <option>Slovenia</option>
  262. <option>Solomon Islands</option>
  263. <option>Somalia</option>
  264. <option>South Africa</option>
  265. <option>South Georgia and the South Sandwich Islands</option>
  266. <option>Spain</option>
  267. <option>Sri Lanka</option>
  268. <option>St. Helena</option>
  269. <option>St. Kitts and Nevis</option>
  270. <option>St. Lucia</option>
  271. <option>St. Pierre and Miquelon</option>
  272. <option>St. Vincent and the Grenadines</option>
  273. <option>Sudan</option>
  274. <option>Suriname</option>
  275. <option>Svalbard and Jan Mayen</option>
  276. <option>Swaziland</option>
  277. <option>Sweden</option>
  278. <option>Switzerland</option>
  279. <option>Syria</option>
  280. <option>Taiwan</option>
  281. <option>Tajikistan</option>
  282. <option>Tanzania</option>
  283. <option>Thailand</option>
  284. <option>Togo</option>
  285. <option>Tokelau</option>
  286. <option>Tonga</option>
  287. <option>Trinidad and Tobago</option>
  288. <option>Tunisia</option>
  289. <option>Turkey</option>
  290. <option>Turkmenistan</option>
  291. <option>Turks and Caicos Islands</option>
  292. <option>Tuvalu</option>
  293. <option>Uganda</option>
  294. <option>Ukraine</option>
  295. <option>United Arab Emirates</option>
  296. <option>United Kingdom</option>
  297. <option>United States</option>
  298. <option>United States Minor Outlying Islands</option>
  299. <option>Uruguay</option>
  300. <option>Uzbekistan</option>
  301. <option>Vanuatu</option>
  302. <option>Vatican City</option>
  303. <option>Venezuela</option>
  304. <option>Viet Nam</option>
  305. <option>Virgin Islands ( British )</option>
  306. <option>Virgin Islands</option>
  307. <option>Wallis and Futuna</option>
  308. <option>Yemen</option>
  309. <option>Zambia</option>
  310. <option>Zimbabwe</option>
  311. </select>
  312. <span class="style2">*</span></td>
  313. </tr>
  314. <tr>
  315. <td bgcolor="#FFF3D5">Zip Code: </td>
  316. <td bgcolor="#FFF3D5"><input name="ZipCode" type="text" id="ZipCode" size="40" /></td>
  317. </tr>
  318. <tr>
  319. <td bgcolor="#FFF3D5">Phone:</td>
  320. <td bgcolor="#FFF3D5"><input name="Phone" type="text" id="Phone" size="40" /></td>
  321. </tr>
  322. <tr>
  323. <td bgcolor="#FFF3D5">Message:</td>
  324. <td bgcolor="#FFF3D5"><textarea name="Message" cols="30" rows="5"></textarea>
  325. <span class="style2"> *</span></td>
  326. </tr>
  327. <tr>
  328. <td colspan="2" align="center" bgcolor="#FFEFC6"><input type="submit" name="Submit" value="Submit" />
  329. <input type="reset" name="Submit2" value="Reset" /></td>
  330. </tr>
  331. <tr>
  332. <td colspan="2">&nbsp;</td>
  333. </tr>
  334. </table>
  335. </form>
  336. </div>
  337. </body>
  338. </html>
Reputation Points: 16
Solved Threads: 9
Junior Poster
mexabet is offline Offline
148 posts
since Mar 2008
Jul 25th, 2008
0

Re: How to center align the whole page?

Click to Expand / Collapse  Quote originally posted by mexabet ...
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
Reputation Points: 10
Solved Threads: 1
Newbie Poster
nickmorss is offline Offline
5 posts
since Jul 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Footer Problem
Next Thread in HTML and CSS Forum Timeline: horizontal navbar renders correctly but...





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC