473,326 Members | 2,108 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Centering using CSS

How do I center a HTML login form horizontally on a page? I can't find
anything useful on the web -- no shortage of sites offering to sell me
three-column layouts with a flexible center column, or telling me how
to work around bugs in Netscape 4, but nothing useful. In the pre-CSS
days, I'd just wrap a <center> tag around the form. Is this still the
best way, or is there something I'm missing?

Thanks,
Mark

Mar 7 '06 #1
5 2349
Els
re******@hotmail.com wrote:
How do I center a HTML login form horizontally on a page?
Give the parent 'text-align:center;' (for non-standard compliant
browsers), and the element itself a width and 'margin:auto;'.
I can't find anything useful on the web


You probably didn't search for 'how to center an element with CSS' ;-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Mar 7 '06 #2
What sort of width specification should I use? A fixed pixel
specification won't work: this will be shown on everything from my home
computer with a 120dpi screen and large fonts to older computers that
still use 72dpi. A percentage width won't work too well either,
because browser window width is independant of the size of the form
elements. Would a font-dependant size specification such as "em" work?

Thanks,
Mark

Mar 7 '06 #3
re******@hotmail.com wrote :
How do I center a HTML login form horizontally on a page?
A form is a block-level element and it will most likely (it must in
strict DTD) have block-level elements too (or tabular data in a table).
I can't find
anything useful on the web
It all depends on what you are actually trying to do in a concrete, real
webpage. Here, with the very limited info you have provided, we can't
say what exactly your webpage should be using.
-- no shortage of sites offering to sell me
three-column layouts with a flexible center column, or telling me how
to work around bugs in Netscape 4, but nothing useful. In the pre-CSS
days, I'd just wrap a <center> tag around the form. Is this still the
best way
No. <center> is formally deprecated in HTML 4.

, or is there something I'm missing?
Thanks,
Mark


Some good places to start:

Centring using CSS
Methods for centring block and inline elements using Cascading Style Sheets
http://dorward.me.uk/www/centre/

Interactive demo on CSS horizontal alignment and horizontal formating:
when to use margin-left, margin-right and when to use text-align
http://www.gtalbot.org/NvuSection/Nv...Alignment.html

You'll need to use a doctype declaration which will trigger modern
browsers into web standards compliant rendering mode; I recommend HTML
4.01, strict DTD.

Finally, you can still "center" elements by playing with their left,
right, margins, paddings, text-indent, etc... properties but this is not
recommended for several reasons, one being browser support, correct
browser implementations.

If you're a newbie with CSS, then I recommend:

Using Web Standards in Your Web Pages
http://www.mozilla.org/docs/web-deve...upgrade_2.html

which has lots of good resources, links, etc.

Gérard
--
remove blah to email me
Mar 7 '06 #4
The current HTML for the form:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" lang="en-US"
xml:lang="en-US"><head><title>Login</title>
<link rel="stylesheet" type="text/css" href="/opsmanual/main.css" />
</head><body><div id="global_header">
<p><a href="index.pl">Index</a> <a href="logout.pl">Log out</a></p>
</div>
<div id="global_body">
<center><form method="post" action="http://localhost/cgi-bin/login.pl"
enctype="application/x-www-form-urlencoded" id="login_form">
<table>
<tr>
<td>Username:</td>

<td><input type="text" name="username" value="Aardvark" size="20"
maxlength="255" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" size="20" maxlength="255"
/></td>
</tr>
<tr>
<td colspan="2"><center>

<input type="submit" name="submit" value="Submit" /> <input
type="reset" name=".reset" />
</center></td>
</tr>
</table>
</form></center>
<div id="global_footer">Procedures manual</div>
</body></html>

This is an internal tool for a mostly-Macintosh shop, so support for
Internet Explorer is not a significant concern. Getting it to look
good in Safari, Opera, and Firefox is important.

--
Mark

Mar 7 '06 #5
re******@hotmail.com wrote :
The current HTML for the form:

Best is to post an url, not entire code. That way, we can better see,
test your webpage for possible problems (validation, mime header
responses, etc.).
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Transitional is for old documents which are updated in the interim; new
documents should be using strict DTD.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"
xml:lang="en-US">
I recommend using HTML 4.01 strict DTD instead.

<head><title>Login</title> <link rel="stylesheet" type="text/css" href="/opsmanual/main.css" />
</head><body><div id="global_header">
<p><a href="index.pl">Index</a> <a href="logout.pl">Log out</a></p>
Do you need a nested <p>...</p> inside your <div id="global_header">?
Just asking. Personally, I would remove that nested <p>...</p> inside
your <div id="global_header"> to make the DOM tree simplier, therefore
easier+faster to parse.
</div>
<div id="global_body">
In your code, this <div id="global_body"> never gets to be closed; so
this is a markup error.
<center><form method="post" action="http://localhost/cgi-bin/login.pl"
enctype="application/x-www-form-urlencoded" id="login_form">
<table>

<div id="global_body">
<form method="post" action="http://localhost/cgi-bin/login.pl"
enctype="application/x-www-form-urlencoded" id="login_form">
<table style="margin-left: auto; margin-right: auto;">

Here too, I would remove that <div id="global_body"> from the DOM tree;
there is no serious reason to have it since the form acts like a
wrapping block-level element.
The CSS rules declared on that <div id="global_body">, if any, could be
transferred to the form element instead.
<tr>
<td>Username:</td>

<td><input type="text" name="username" value="Aardvark" size="20"
maxlength="255" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" size="20" maxlength="255"
/></td>
</tr>
<tr>
<td colspan="2"><center>

Here, replace the <td colspan="2"><center> with

<td colspan="2" style="text-align: center;">
<input type="submit" name="submit" value="Submit" /> <input
type="reset" name=".reset" />
</center></td>
</tr>
</table>
</form></center>
<div id="global_footer">Procedures manual</div>
As you can see, the closing </div> for your start tag
<div id="global_body"> is not there.
</body></html>

This is an internal tool for a mostly-Macintosh shop, so support for
Internet Explorer is not a significant concern. Getting it to look
good in Safari, Opera, and Firefox is important.

Say NO to XHTML (excellent - the best - article, worth reading)
http://www.spartanicus.utvinternet.ie/no-xhtml.htm

Sending XHTML as text/html Considered Harmful
http://www.hixie.ch/advocacy/xhtml

"If you use XHTML, you should deliver it with the application/xhtml+xml
MIME type. If you do not do so, you should use HTML4 instead of XHTML.
The alternative, using XHTML but delivering it as text/html, causes
numerous problems that are outlined below. Unfortunately, IE6 does not
support application/xhtml+xml (in fact, it does not support XHTML at all)."
Even MSIE 7 will still not support application/xhtml+xml:
"IE7 will not add support for this MIME type
[application/xml+xhtml](...) Why aren't we supporting XHTML when it's
served as the media type in IE7? I made the decision to not try to
support the MIME type [application/xml+xhtml] in IE7 simply because I
personally want XHTML to be successful in the long run."
http://blogs.msdn.com/ie/archive/2005/09/15/467901.aspx

XHTML - What's the Point?
http://hsivonen.iki.fi/xhtml-the-point/

XHTML is dead
http://www.autisticcuckoo.net/archiv.../xhtml-is-dead

Gérard
--
remove blah to email me
Mar 7 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Jeff Thies | last post by:
I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width:...
3
by: Jonah Bishop | last post by:
I have a puzzling problem with centering text, and I'm hoping that someone here can help me out. First of all, let me state that I am using XHTML 1.0 Strict and CSS for all layout purposes (no...
2
by: Ryan W Sims | last post by:
I'm having trouble with centering in IE... http://www.ryanwsims.com/koh/ The image should center over the text. It does in Firebird, but not in IE for some reason. If you look at ...
3
by: CMAR | last post by:
To center my <div>, I am currently using something like <div id="navcontainer" align="center"> This centers fine, but is deprecated code. I have seen these two solutions recommended. 1) ...
15
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...
6
by: Axel Siebenwirth | last post by:
Hi, as described at http://www.quirksmode.org/css/centering.html, I try to do to centering with my site. I did exactly as told on that page but it only seems to center horizontally. My site...
13
by: Raffi | last post by:
Hi, We have an application that requires IE. We recently incorporated CSS scroll areas. The scroll fields are supposed to be centered. They are except for IE5 for the Mac. I have tried various...
3
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
1
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.