Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old March 7th, 2006, 07:25 PM
rengaw03@hotmail.com
Guest
 
Posts: n/a
Default 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

  #2  
Old March 7th, 2006, 07:35 PM
Els
Guest
 
Posts: n/a
Default Re: Centering using CSS

rengaw03@hotmail.com wrote:
[color=blue]
> How do I center a HTML login form horizontally on a page?[/color]

Give the parent 'text-align:center;' (for non-standard compliant
browsers), and the element itself a width and 'margin:auto;'.
[color=blue]
> I can't find anything useful on the web[/color]

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

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
  #3  
Old March 7th, 2006, 07:55 PM
rengaw03@hotmail.com
Guest
 
Posts: n/a
Default Re: Centering using CSS

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

  #4  
Old March 7th, 2006, 08:25 PM
Gérard Talbot
Guest
 
Posts: n/a
Default Re: Centering using CSS

rengaw03@hotmail.com wrote :[color=blue]
> How do I center a HTML login form horizontally on a page?[/color]

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).
[color=blue]
> I can't find
> anything useful on the web[/color]

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.
[color=blue]
> -- 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[/color]

No. <center> is formally deprecated in HTML 4.

, or is there something I'm missing?[color=blue]
>
> Thanks,
> Mark[/color]

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
  #5  
Old March 7th, 2006, 08:45 PM
rengaw03@hotmail.com
Guest
 
Posts: n/a
Default Re: Centering using CSS

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

  #6  
Old March 7th, 2006, 09:15 PM
Gérard Talbot
Guest
 
Posts: n/a
Default Re: Centering using CSS

rengaw03@hotmail.com wrote :[color=blue]
> The current HTML for the form:
>[/color]

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.).
[color=blue]
> <?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">[/color]

Transitional is for old documents which are updated in the interim; new
documents should be using strict DTD.
[color=blue]
> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"
> xml:lang="en-US">[/color]

I recommend using HTML 4.01 strict DTD instead.

<head><title>Login</title>[color=blue]
> <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>[/color]

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.
[color=blue]
> </div>
> <div id="global_body">[/color]

In your code, this <div id="global_body"> never gets to be closed; so
this is a markup error.
[color=blue]
> <center><form method="post" action="http://localhost/cgi-bin/login.pl"
> enctype="application/x-www-form-urlencoded" id="login_form">
> <table>[/color]


<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.
[color=blue]
> <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>
>[/color]

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

<td colspan="2" style="text-align: center;">
[color=blue]
> <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>[/color]

As you can see, the closing </div> for your start tag
<div id="global_body"> is not there.
[color=blue]
> </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.[/color]


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
 

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles