Jump to content

Button alignment in a form (round 2)


pjfarley3
 Share

Recommended Posts

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

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

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;"

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

<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

<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

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

<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

...<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.

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

<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

<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.

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...