Geek Answers Handbook

I have problems positioning this button

I’m already going for 1.5 hours, and I just can’t figure out how to do it the way I want. I’m kind of a newbie with all the things on the Internet, and it takes so much time (maybe more?), Trying to get things where I want and do it the way it is elegant.

In any case, I have two text fields with two inscriptions above them and in the center. I just want to put a button between them and focus on the height of the text fields.

This is as close as possible to what I want. I would like the left text block to move so that it aligns with the words "Go to:", "Client:" and "Client No.:", and then the right square will be at the same distance to the right, and the "Next" button may only 10px higher, but still focused. The problem with this picture is that it only works when text fields are displayed and expanded, if they are hidden, then the panel actually displays half way over the Customer # part due to the way I manipulated the fields that I assume.

http://img192.imageshack.us/img192/259/controls.jpg http://img192.imageshack.us/img192/259/controls.jpg

Here is my attempt with <div> s

 <div style="position:relative; overflow:auto; margin-top:15px; margin-bottom:10px;"> <div style="width:40%; float:left; margin-left:10px;"> <div><asp:Label runat="server" ID="lblInfoDesc" /></div> <div><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div> </div> <%--<div style="position:absolute; margin-top:25px; margin-left:-10px;"><asp:Button ID="Button1" runat="server" Text="Next" /></div>--%> <div style="width:40%; float:right; margin-right:16px;"> <div><asp:Label runat="server" ID="lblInfoData" /></div> <div><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div> </div> </div>

And here is my attempt with table elements

  <div style="margin-bottom:10px;"> <table style="position:relative; width:100%; margin-bottom:15px;"> <tr style="text-align:center";> <td><asp:Label runat="server" ID="lblInfoDesc" /></td> <td></td><td></td><td></td><td></td> <td><asp:Label runat="server" ID="lblInfoData" /></td> </tr> <tr> <td style="margin-left: 0px;"><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td> <td></td><td></td><td></td><td></td> <td style="margin-right:10px;"><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td> </tr> </table> <div style="position:inherit; text-align:center; margin-top:-55px; margin-bottom:25px;"> <asp:Button ID="Button2" runat="server" Text="Next" /> </div> </div>

All of these <td></td><td></td><td> should have tried to put spaces between the button and text fields, because I could not get the float or margin to work. Any help would be greatly appreciated!

And here is the full page source:

 <asp:Panel ID="pnlCustomer" runat="server" style="background-color:#ccccff; width:500px; height:90%; position:relative;" BorderColor="DarkBlue" BorderWidth="2px"> <div style="position:relative; margin-top:10px; margin-left:10px;"> <div style="color:#003399; font-size:18px; text-align:left;">Jump To: <asp:DropDownList ID="ddlCategory" runat="server" AutoPostBack="True" onselectedindexchanged="ddlCategory_SelectedIndexChanged" style="margin-left:40px;"/> </div> </div> <div style="position:relative; margin-top:10px; margin-left:10px;"> <div style="color:#003399; font-size:18px; text-align:left;">Customer: <asp:DropDownList ID="ddlCustomersList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCustomersList_SelectedIndexChanged" style="margin-left:35px;"/> <asp:Button ID="btnAddCustomer" runat="server" Text="Add" OnClick="btnAddCustomer_Click" OnClientClick="return confirm('Warning: This will redirect you from the page');" /> </div> </div> <div style="position:relative; margin-top:10px; margin-left:10px;"> <div style="color:#003399; font-size:18px; text-align:left;">Customer #: <asp:DropDownList ID="ddlCustomerNumber" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCustomerNumber_SelectedIndexChanged" style="margin-left:20px;"/> <asp:TextBox ID="txtCustomerNumber" runat="server" style="margin-left:20px;" /> <asp:Button ID="btnModify" runat="server" Text="Modify" OnClick="btnModify_Click" /> <asp:Button ID="btnCreateNew" runat="server" Text="Create New" OnClick="btnCreateNew_Click" /> <asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" /> <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click" OnClientClick="return confirm('Do you want to delete the record ?');" /> <asp:Button ID="btnSaveNew" runat="server" Text="Save" OnClick="btnSaveNew_Click" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" /> </div> </div> <%-- <div style="margin-bottom:10px;"> <table style="position:relative; width:100%; margin-bottom:15px;"> <tr style="text-align:center";> <td><asp:Label runat="server" ID="lblInfoDesc" /></td> <td></td><td></td><td></td><td></td> <td><asp:Label runat="server" ID="lblInfoData" /></td> </tr> <tr> <td style="margin-left: 0px;"><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td> <td></td><td></td><td></td><td></td> <td style="margin-right:10px;"><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td> </tr> </table> <div style="position:inherit; text-align:center; margin-top:-55px; margin-bottom:25px;"> <asp:Button ID="Button2" runat="server" Text="Next" /> </div> </div>--%> <div style="position:relative; overflow:auto; margin-top:15px; margin-bottom:10px;"> <div style="text-align:center; margin-bottom:-20px; "> <asp:Button ID="btnNextInfo" runat="server" Text="Next" /> </div> <div style="width:40%; float:left; margin-left:10px;"> <div><asp:Label runat="server" ID="lblInfoDesc" /></div> <div><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div> </div> <div style="width:40%; float:right; margin-right:16px;"> <div><asp:Label runat="server" ID="lblInfoData" /></div> <div><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div> </div> </div> <div style="margin-top:-20px; position:absolute; font-size:12px;"><asp:Label runat="server" ID="lblErrorMessage" /></div> </asp:Panel>
+4
source share
3 answers

This seems like a CSS and HTML question rather than an ASP.Net question.

To be clear, centering things vertically in parent CSS using CSS is not easy, the trick:

  • The parent element must have a position: relative or absolute.
  • The child should be wrapped in a div or something positioned.
  • The child must have the upper hand: 50%
  • The child must declare height.
  • the child should have margin-top = it height / 2 * -1. (basically you move it halfway).

Try the following:

 <style> div.textboxArea { text-align:center; float:left; width:40%; height:400px; } .textboxArea textarea { width:80%; height:400px; } .centerMeVertically div { position:absolute; top:50%; vertical-align:middle; height:30px; width:100%; margin-top:-15px; text-align:center; } div.centerMeVertically { float:left; width:20%; text-align:center; height:400px; position:relative; } p { height:35px; margin:-35px 0 0 0; } .container { margin-top:35px; } </style> <div class="container"> <div style="width:100%;"> <div class="textboxArea"> <p>Label 1</p> <textarea></textarea> </div> <div class="centerMeVertically"> <div><button>Button2</button></div> </div> <div class="textboxArea"> <p>Label 2</p> <textarea></textarea> </div> </div> </div>

EDIT: Seeing your revised question, I revised my answer to the center of the button for the vertical text box only .

You need to do some stupid CSS tricks with maximum margin, but it does the job. Also pay attention to the container div. This is to make sure that if you put something “above” this fragment in your markup, it does not overlap the labels.

+5
source

If I do not understand, it is not so difficult. see if the following code matches the layout of your image.

 <table cellpadding="3px" cellspacing="0" border="0" style="width: 100%;"> <tr> <td align="center" valign="top"> Label </td> <td align="center" valign="top"> &nbsp; </td> <td align="center" valign="top"> Label </td> </tr> <tr> <td align="center" valign="top"> <asp:TextBox ID="TextBox1" TextMode="MultiLine" Rows="7" runat="server"></asp:TextBox> </td> <td align="center" valign="top"> <asp:Button ID="Button1" runat="server" Text="Button" /> </td> <td align="center" valign="top"> <asp:TextBox ID="TextBox2" TextMode="MultiLine" Rows="7" runat="server"></asp:TextBox> </td> </tr> </table>
+1
source

I would stick with something as simple as this table ... then add an addition as needed.

 <table> <tr> <td align="center">label a</td> <td></td> <td align="center">label b</td> </tr> <tr> <td valign="top"><textarea id="txtinfodescription" rows="3" maxlength="500" width="80%"></textarea></td> <td valign="middle"><input type="button" id="button2" value="next"/></td> <td valign="top"><textarea id="txtinfodata" rows="3" maxlength="500" width="80%"></textarea></td> </tr> </table>

Don’t get me wrong, you can also switch to a pure CSS route ... but if the layout becomes much more complicated and you need to maintain a fairly rigid "mesh" structure ... the tables help.

0
source

More articles:


All Articles