need quick-and-dirty html help :o)

March 26, 2009 3:32 AM

I have only the most basic HTML skills and I am posting a form on my Typepad blog, with some HTML provided by Yahoo groups. It all works great, except I would like to center the form on the page. I am hoping that someone here in the "hive mind" would be kind enough to tell me what code to put where in the following html so that the form will center? Many thanks!!! (code below)

Here is the code (with all identifying information removed and every <>-style bracket replaced with square brackets so it would display here).

[form method="get"
action="http://groups.yahoo.com/subscribe/xyxyxyx"
style="background-color: #ffc; width: 254px; padding: 2px 4px"]
[h6 style="font-weight: bold; margin-bottom: 5px; text-align: center"]
Subscribe to xyxyxyx/h6]
[input style="vertical-align: top"
type="text"
name="user"
value="enter email address"
size="20" /]
[input type="image" alt="Click to join xyxyxyx"
name="Click to join xyxyxyx"
src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif" /]
<p style="text-align: center;"]
Powered by [a href="http://us.groups.yahoo.com/"]us.groups.yahoo.com[/a]</p]
[/form]

A million thanks!!

posted by leticia to Computers & Internet (4 answers total)

Best answer: you can simply wrap the form in a table, it's a bit old school, but tables are easier for layout than css

just

[table align="center"]
[tr]
[td]

[your form]

[/your form]

[/td]
[/tr]
[/table]
posted by mattoxic at 3:42 AM on March 26, 2009

Response by poster: Fantastic! thanks mattoxic :o) That did the trick. I never quite got the hang of tables -- it's been a dog's age since I took a couple basic HTML classes at the adult ed of the local college, and since then I've just managed to avoid them. But old school is definitely OK -- it was a quick-and-dirty solution. Just what I needed.

Thanks again :o)
posted by leticia at 3:49 AM on March 26, 2009

np, glad to help
posted by mattoxic at 4:02 AM on March 26, 2009

The alternative is to use:

<div style="margin: 0px auto;">

[your form]

</div>

You may also need to specify the div width, or it will just zoom to 100% of the available space.

By the W3C standards, using table for layout is frowned upon (even if it is sometimes easier). It's supposed to be reserved for tabular data only. The align property is deprecated, meaning it really isn't considered proper coding practice any more. That doesn't mean it doesn't work though.

For all the good the W3C has done for standardizing web design, they never saw fit to add a property that would allow you to easily center an object on the page, so we're all playing with automatic margins to make it work. And there are standards for making objects act as if they were part of a table, for layout purposes, but the properties aren't supported very well by some major browsers (most notably Internet Explorer, the current whipping child of web designers everywhere)
posted by caution live frogs at 5:46 AM on March 26, 2009