pjfarley3 Posted February 9, 2006 Share Posted February 9, 2006 OK, here are three simple examples of trying to align buttons in a form. Example 1 *almost* works (table with a cell for each button, alignment at the cell level controls where the button appears inside the cell), but the third (rightmost) button not only aligns to the right (as requested), is also aligns vertically at the TOP of the cell, while the first two buttons align vertically in the MIDDLE of their respective cells. Thus, even though the horizontal alignment is taken care of, the vertical alignment is not.Why does this happen? What am I doing wrong?Example 2 is a table with a single cell, and example 3 is a bare form. My question in both cases is, Why don't the alignment attributes do anything to position the buttons on their line (inside a table cell or not)?My final question is this: Where can I find examples of multi-button HTML pages where alignment attributes are used to position the buttons? I am assuming that I am not coding something correctly, so I really, really need to see examples of how to do it correctly, if there are any out there to be seen.TIA for any help or info you can provide.Peter <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head></head><body><table width="100%" border="2"> <tr> <td align="left"> <FORM METHOD=POST ACTION="/web/page"> <INPUT style="ALIGN: left" TYPE=SUBMIT NAME=PREV VALUE=Prev> </td> <td align="center"> <INPUT style="ALIGN: center" TYPE=SUBMIT NAME=REFR VALUE=Refresh> </td> <td align="right"> <INPUT style="ALIGN: right" TYPE=SUBMIT NAME=NEXT VALUE=Next> </FORM> </td> </tr></table><br> <br> <br> <table width="100%" border="2"> <tr> <td> <FORM METHOD=POST ACTION="/web/page"> <INPUT style="ALIGN: left; WIDTH: 10%" TYPE=SUBMIT NAME=PREV VALUE=Prev> <INPUT style="ALIGN: center; WIDTH: 45%" TYPE=SUBMIT NAME=REFR VALUE=Refresh> <INPUT style="ALIGN: RIGHT; WIDTH: 10%" TYPE=SUBMIT NAME=NEXT VALUE=Next> </FORM> </td> </tr></table><br> <br> <br> <FORM METHOD=POST ACTION="/web/page"> <INPUT style="ALIGN: left; WIDTH: 10%" TYPE=SUBMIT NAME=PREV VALUE=Prev> <INPUT style="ALIGN: center; WIDTH: 45%" TYPE=SUBMIT NAME=REFR VALUE=Refresh> <INPUT style="ALIGN: RIGHT; WIDTH: 10%" TYPE=SUBMIT NAME=NEXT VALUE=Next> </FORM></body></html> Link to comment Share on other sites More sharing options...
pulpfiction Posted February 9, 2006 Share Posted February 9, 2006 Hi, <INPUT style="WIDTH: 10%; ALIGN: left" TYPE="submit" NAME="PREV" VALUE="Prev"><INPUT style="WIDTH: 45%; ALIGN: center" TYPE="submit" NAME="REFR" VALUE="Refresh"><INPUT style="WIDTH: 10%; ALIGN: RIGHT" TYPE="submit" NAME="NEXT" VALUE="Next"> As far as I know "ALIGN:" will not work for buttons, it will work for images,To position in the center you can use somthing like this,style="Z-INDEX: 101; LEFT: 848px; WIDTH: 10%; POSITION: absolute; TOP: 296px;" Link to comment Share on other sites More sharing options...
pjfarley3 Posted February 9, 2006 Author Share Posted February 9, 2006 Hi, <Snipped>As far as I know "ALIGN:" will not work for buttons, it will work for images,To position in the center you can use somthing like this,style="Z-INDEX: 101; LEFT: 848px; WIDTH: 10%; POSITION: absolute; TOP: 296px;"<{POST_SNAPBACK}> This is exactly what one should NOT have to do. Absolute positioning ASSUMES that you know in advance what size your client's browser window is going to be. No one can know that. Do you (or anyone else here) know how we are supposed to align buttons within the standard? It was pointed out to me in a private communication that the separate "align" attribute is deprecated in favor of styles. OK, I can live with that, but even when I put the "align" attribute inside a "style", it seems to have no affect on buttons.Why not? Again, how is alignment of buttons supposed to happen? It makes no sense to me that an attribute like "align" has no effect on a button. Is there something in XHTML to substitute? I'll gladly switch if I can get the effect that I want.The only way I have been able to get it to work is by using separate table cells in a single table row, where the style="align: xxxx" attribute at least seems to apply to everything in the table cell. Link to comment Share on other sites More sharing options...
aspnetguy Posted February 10, 2006 Share Posted February 10, 2006 <div style="width:100%;text-align:center"><INPUT style="WIDTH: 10%; ALIGN: left" TYPE="submit" NAME="PREV" VALUE="Prev"><INPUT style="WIDTH: 45%; ALIGN: center" TYPE="submit" NAME="REFR" VALUE="Refresh"><INPUT style="WIDTH: 10%; ALIGN: RIGHT" TYPE="submit" NAME="NEXT" VALUE="Next"></div> do that Link to comment Share on other sites More sharing options...
OTTO Posted February 11, 2006 Share Posted February 11, 2006 lol aspnet guy and they were trying so hard. Link to comment Share on other sites More sharing options...
pjfarley3 Posted February 13, 2006 Author Share Posted February 13, 2006 <div style="width:100%;text-align:center"><INPUT style="WIDTH: 10%; ALIGN: left" TYPE="submit" NAME="PREV" VALUE="Prev"><INPUT style="WIDTH: 45%; ALIGN: center" TYPE="submit" NAME="REFR" VALUE="Refresh"><INPUT style="WIDTH: 10%; ALIGN: RIGHT" TYPE="submit" NAME="NEXT" VALUE="Next"></div> do that <{POST_SNAPBACK}> I tried that, but it does not produce the desired effect. Yes, the three <input> buttons are grouped all together in the center of the page, but the desired arrangement is:0. In a single table row:1. First <input> on the left-hand edge of the page2. Second <input> in the center of the page3. Third <input> on the right-hand edge of the pageHow would that be accomplished? I am also trying hard to move to XHTML strict, and the "align" attribute won't work there. What substitutes for "align" for <input> buttons in XHTML strict?A secondary question is how (in XHTML strict) to arrange an arbitrary number of buttons (4,5,6,...) spaced evenly across a row, not smacked up one against the other?Thanks for trying to help, and for your patience with my ignorance.Peter Link to comment Share on other sites More sharing options...
aspnetguy Posted February 13, 2006 Share Posted February 13, 2006 <div style="width:100%;text-align:center"><INPUT style="WIDTH: 10%; ALIGN: left" TYPE="submit" NAME="PREV" VALUE="Prev"><INPUT style="WIDTH: 45%; ALIGN: center" TYPE="submit" NAME="REFR" VALUE="Refresh"><INPUT style="WIDTH: 10%; ALIGN: RIGHT" TYPE="submit" NAME="NEXT" VALUE="Next"></div> ...<tr> <td> <table cellpadding="0" cellspacing="0" style="width:100%"> <tr> <td align="left"><INPUT style="WIDTH: 10%; ALIGN: left" TYPE="submit" NAME="PREV" VALUE="Prev"> </td> <td align="center"><INPUT style="WIDTH: 10%; ALIGN: left" TYPE="submit" NAME="REFR" VALUE="Refresh"> </td> <td align="right"><INPUT style="WIDTH: 10%; ALIGN: left" TYPE="submit" NAME="NEXT" VALUE="Next"> </td> </tr> </table> </td></tr>... try that...it should space them evenly apart. Link to comment Share on other sites More sharing options...
pjfarley3 Posted February 13, 2006 Author Share Posted February 13, 2006 ...<tr> <td> <table cellpadding="0" cellspacing="0" style="width:100%"> <tr> <td align="left"><INPUT style="WIDTH: 10%; ALIGN: left" TYPE="submit" NAME="PREV" VALUE="Prev"> </td> <td align="center"><INPUT style="WIDTH: 10%; ALIGN: left" TYPE="submit" NAME="REFR" VALUE="Refresh"> </td> <td align="right"><INPUT style="WIDTH: 10%; ALIGN: left" TYPE="submit" NAME="NEXT" VALUE="Next"> </td> </tr> </table> </td></tr>... try that...it should space them evenly apart. <{POST_SNAPBACK}> Yes, that does work -- I have used that exact technique.Two questions:1. Where do you put the <form> and </form> elements? At the <tr> level before the first <td> and after the last </td>, right?2. This technique still uses the "align" attribute, which is not allowed in strict XHTML. How would this be coded in strict XHTML?Thanks for the quick reply.Peter Link to comment Share on other sites More sharing options...
aspnetguy Posted February 13, 2006 Share Posted February 13, 2006 <form....><table>...<tr> <td> <table cellpadding="0" cellspacing="0" style="width:100%"> <tr> <td style="text-align:left"><INPUT style="WIDTH: 10%" TYPE="submit" NAME="PREV" VALUE="Prev"> </td> <td style="text-align:center"><INPUT style="WIDTH: 10%" TYPE="submit" NAME="REFR" VALUE="Refresh"> </td> <td style="text-align:right"><INPUT style="WIDTH: 10%" TYPE="submit" NAME="NEXT" VALUE="Next"> </td> </tr> </table> </td></tr>...</table></form> how is that?As far as the <form> goes if you are going to use javascript to process the button click you do not need the <form>...although XHTML strict might require it...I can't remember. Link to comment Share on other sites More sharing options...
pjfarley3 Posted February 13, 2006 Author Share Posted February 13, 2006 <Code snipped>how is that?As far as the <form> goes if you are going to use javascript to process the button click you do not need the <form>...although XHTML strict might require it...I can't remember.<{POST_SNAPBACK}> Thanks, that seems to work OK. How and where to intermix forms and tables isn't very well documented, IMHO. At least for this newbie, it was not apparent that the table has to be inside the form instead of vice-versa.Do you know of any url's to discussions/turorials about how to mix tables and forms correctly?Thanks again for your help.Peter Link to comment Share on other sites More sharing options...
aspnetguy Posted February 14, 2006 Share Posted February 14, 2006 well as far as mixing forms and tables gostick to inclosing whole tables inside forms as a general rule...if you mix the form tags inside of tables it will affect the cell margins,etc....if you are inclosing a table that is nested in another table (the code I gave above)place the <form> tags inside the <td></td>. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now