 |  |  |  |  |  |  |  |
How to center align the whole page?
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
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"> </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> characters left.</span>
<br />
</p>
<br/>
<input type="reset" value="Clear" />
<input type="submit" value="submit comment" class="basic" />
</form>
</div>
<div class="formModBot"> </div>
</body>
</html>
[/html]
please guide me. thanks
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"> </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> characters left.</span>
<br />
</p>
<br/>
<input type="reset" value="Clear" />
<input type="submit" value="submit comment" class="basic" />
</form>
</div>
<div class="formModBot"> </div>
</body>
</html>
[/html]
please guide me. thanks
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":
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;} 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
If you want to align center of page, see my Post here http://pistachiomonkey.com/blog/archives/133
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: 
Solved Threads: 164
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:
Then, where you want to place the centered text, put this code:
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:
Then, where you want to place the centered image, put this code:
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:
Then, where you want to place the centered object, put this code:
Put the name of the tag for the object you have instead of the word tag.
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)
HTML and CSS Syntax (Toggle Plain Text)
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)
HTML and CSS Syntax (Toggle Plain Text)
Center other objects reliably using the following code:
In the stylesheet, place:
HTML and CSS Syntax (Toggle Plain Text)
HTML and CSS Syntax (Toggle Plain Text)
Daylight-saving time uses more gasoline
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
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)
Last edited by nickmorss; Jul 24th, 2008 at 1:28 pm.
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation:
Solved Threads: 164
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.
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.
Daylight-saving time uses more gasoline
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation:
Solved Threads: 164
•
•
•
•
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.
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.
Daylight-saving time uses more gasoline
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)
Computer Company | Affordable Web Designing | The Best Web Directory
Free Website Builder | Time Zone Converter | Entertainment Directory
Government Web Directory | Health Directory | Kids and Teens Directory | News and Media Directory
Free Website Builder | Time Zone Converter | Entertainment Directory
Government Web Directory | Health Directory | Kids and Teens Directory | News and Media Directory
 |
Similar Threads
- Paypal shopping basket link (PHP)
- Why is this page center aligned? (HTML and CSS)
- retrieving a web page from database (ASP)
- Help with asp form will not display contact information (ASP)
- hover over text tips (JavaScript / DHTML / AJAX)
- Sending form email (PHP)
- How do i change scrollers and make my site sutible for all resolutions? (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: Footer Problem
- Next Thread: horizontal navbar renders correctly but...
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
