Web Development

Ask something
Question Locked

Why can't I get my html form in the center???? GRRRRR!!!!!

0 helpful
22 replies

by jiminpa

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.
I am writing an HTML page with a form on it. I am using the HTML

22 replies

by robo_dev

one trick is nest the div within another div that's centered....

by jiminpa

I'm gonna try to post some code... could get ugly being that it is html.

< div align=center >
< form >
< fieldset >
< legend >Fill in the form< /legend >
< br class=clear / >
< label >PC MIS Tag< /label >
< input type=text name=pctag / >
< label >Location< /label >
< input type=text name=location / >
< br class=clear / >
< label id=scantaglabel >Scanner MIS Tag< /label >
< input type=text name=scantagtxt id=scantagtxt / >
< label id=scannerae >Scanner AE Title< /label >
< input type=text id=scanneraetxt name=scanneraetxt / >
< br class=clear / >
< label >Comment< /label >
< input type=text name=comment class=long / >
< br class=clear / >
< label >Whitelisted?< /label >
< input type=checkbox name=whtlistbx / >
< label >Scanner Attached?< /label >
< input type=checkbox name=scannerbx onclick="displayRow()" / >
< br class=clear / >
< /fieldset >
< /form >
< /div >
< div >
< input id="add" type="submit" value="submit" / >
< br / >
< br / >
< br / >
< a href=index.htm > Home< /a >
< /div >

Edit- What a pain it is to post html code :p

by aaron

you shouldn't be using align, try changing the initial div tag to div style="margin:auto"

by shellbot

Ya probably already have, but just thought I'd throw it out there..

(threw in the table for illustrative purposes)

< div align="center" >
< table >
< tr > HI < /tr >
< /table >
< /div >

**When posting HTML in TR have to put a space between < and the character, otherwise it goes invisible!

by jiminpa

That was one of the first things I tried. One would think that should have worked.

by thumbsup2

If you want to look at the source on this page, you'll see how simple it is to center your form as well as align the elements within the form. Use it if you want to. Sorry for the toot to my own site, but it's too difficult now to post code here.

http://www.chinookequine.org/login

edit: Forgive the formatting, it's done in PHP and I've never taken the time to go back and 'make it pretty'.

by jiminpa

Well I think I see how you are doing it. I just tried to place the whole form in one cell of a table and center the whole thing. The result wasn't exactly what I expected but at least it moved. I'll have to study what you did a little more closely. My elements in the form already line up, I am doing that with a style sheet. I think some of the things I was trying to do in the style sheet to get my form to move may be causing me some issue now.

P.S. You code is WAY prettier than mine so no worries about formatting ;)

by thumbsup2

Your DIV will center the table, but if the table has a width of 100%, the one cell needs to be centered too (default is left align).

Just in case you can't see the CSS (or don't know how to grab it), the CSS on the outer table (class=mine) only sets the background image.

table.mine { background:#ffffff url('images/CEALogo4TR.jpg') no-repeat inherit center; }

by jiminpa

I realize align is depreciated however, I'll try just about anything at this point.

by thumbsup2

This works for me.....

< div align=center >
< table >
< tr >
< td align="center" >
< form >
< fieldset >
< legend >Fill in the form< /legend >
< br class=clear / >
< label >PC MIS Tag< /label >
< input type=text name=pctag size="20" / >
< label >Location< /label >
< input type=text name=location size="20" / >
< br class=clear / >
< label id=scantaglabel >Scanner MIS Tag< /label >
< input type=text name=scantagtxt id=scantagtxt size="20" / >
< label id=scannerae >Scanner AE Title< /label >
< input type=text id=scanneraetxt name=scanneraetxt size="20" / >
< br class=clear / >
< label >Comment< /label >
< input type=text name=comment class=long size="20" / >
< br class=clear / >
< label >Whitelisted?< /label >
< input type=checkbox name=whtlistbx value="ON" / >
< label >Scanner Attached?< /label >
< input type=checkbox name=scannerbx onclick="displayRow()" value="ON" / >
< br class=clear / >
< /fieldset >

< input id="add" type="submit" value="submit" / >
< /form >
< br / >
< br / >
< br / >
< a rel="nofollow" href=index.htm > Home< /a >
< /td >
< /tr >
< /table >
< /div >

edit: don't forget to remove the spaces before and after the < and > characters. And, the OnClick gets transformed here in the forum. Silly thing! ;)

by maevinn

If you remove the legend tag, it aligns perfectly. I'd suspect that since legend has it's own alignment attribute, the default of left align on it is over-writing the div alignment attribute. Add align=center to your legend tag and it should work.

by jiminpa

It did make my "Fill In the form" Line center though.

by jiminpa

I had a line in my style sheet

div {text-align:center}

for some reason that didn't seem to be playing nice. As soon as I took that out I was able to use align=center and the thing lined right up? If someone can explain that to me I will gladly hand out more thumbs. This perplexes me but I won't lose sleep over it.
:)

by thumbsup2

A DIV creates a box. Elements, such as FORM or TABLE inside of a DIV create their own box within the outer box. The CSS saying to 'text-align' won't align other elements, just text. If you have a FORM inside of the TABLE, you have to center the contents of the table cell too.

by shellbot

Way I see it, 'text-align' is aligning text..not elements.

So with that in your stylesheet, you were probably overriding any in-line styles.

by jiminpa

is there is no align:center style element. It is so doggone difficult to line things up. They depreciated the align property but gave us nothing to replace. This leaves us no choice but to continue to use it. It is very frustrating and confusing to those of us who are not actually developers but do a little coding "as needed".

by thumbsup2

Various HTML Tags create a box and that box, as well as it's contents, can be aligned using the margin/padding/borders options.

A DIV tag creates a box. A TABLE tag creates another box which can inherit the properties of the surrounding box (DIV). A TD tag creates another box which can inherit the properties of the surrounding box (TABLE). You simply have to code for all of them in your CSS.

http://www.w3.org/TR/2008/REC-CSS2-20080411/box.html

by jiminpa

head about to explode...

:D

I'll have to read and attempt to absorb that at some point.

Thanks Thumbs

by thumbsup2

Yep, there's a lot to learn. But, you can do it! We have faith in you. :^0

by jiminpa

Every time I learn something new I make sure to make some good notes and file blocks of code away for future reference.

My biggest problem is I'll be asked to do something and I will spend a few days/weeks on the project and then I don't touch code again maybe for a few months. As I said development is not my primary job function it is just common knowledge in the department that I know enough to be dangerous ;)

I try to fiddle around in my spare time but that is so few and far between anymore. It's just nice to know that when I get stuck I have you guys to bail me out :D

This discussion is closed to new replies.