Solved

Html Alignment in .aspx page.

Posted on 2010-09-22
5
338 Views
Last Modified: 2012-05-10
Hi I am not good in Html alignment. Can you please help me. I want make some space between two button (add, cancel  button).(Please see the image) I tried ti fix it but no luck. Please help me.

<table style="background-color: #F5F5E9" cellspacing="2">
                                                                                    <tr>
                                                                                        <td align="left" style="width: 70px;">
                                                                                            Note Type
                                                                                        </td>
                                                                                        <td align="left" style="width: 82px; height: 24px;">
                                                                                            <telerik:RadComboBox ID="ddlNoteType" EmptyMessage="Please select" runat="server"
                                                                                                MarkFirstMatch="True" CollapseDelay="0" Width="115px" DropDownWidth="100px" AllowCustomText="True">
                                                                                                <CollapseAnimation Duration="0" />
                                                                                            </telerik:RadComboBox>
                                                                                            <asp:RequiredFieldValidator InitialValue="" ValidationGroup="Notes" ID="custValCou"
                                                                                                runat="server" ControlToValidate="ddlNoteType" ClientValidationFunction="ddlNt"
                                                                                                Display="None" ErrorMessage="Please select Note Type."></asp:RequiredFieldValidator>
                                                                                            <cc2:ValidatorCalloutExtender ID="valExt" TargetControlID="custValCou" runat="server"
                                                                                                Enabled="True">
                                                                                            </cc2:ValidatorCalloutExtender>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td align="left" valign="middle" style="width: 70px;">
                                                                                            Notes
                                                                                        </td>
                                                                                        <td align="left">
                                                                                            <asp:TextBox ID="txtNoteDesc" runat="server" TextMode="MultiLine" Rows="3" Width="570px"></asp:TextBox>
                                                                                            <asp:RequiredFieldValidator ID="valCliID" ValidationGroup="Notes" ControlToValidate="txtNoteDesc"
                                                                                                Display="None" runat="server" ErrorMessage="Please enter Notes."></asp:RequiredFieldValidator>
                                                                                            <cc2:ValidatorCalloutExtender ID="ValidatorCalloutExtender19" TargetControlID="valCliID"
                                                                                                runat="server">
                                                                                            </cc2:ValidatorCalloutExtender>
                                                                                            &nbsp;&nbsp;
                                                                                        </td>
                                                                                        <td valign="top">
                                                                                            <span style="padding-bottom: 4px;">
                                                                                                <asp:Button ID="btnAddNote" Width="60px" OnClick="btnAddNote_Click" ValidationGroup="Notes"
                                                                                                    runat="server" Text="Add" /></span>
                                                                                            <asp:Button ID="imgbtnNotesCancel" Width="60px" runat="server" OnClientClick="return  hideAddNotes()"
                                                                                                Text="Cancel" />
                                                                                        </td>
                                                                                    </tr>
                                                                                </table>

Open in new window

1.JPG
0
Comment
Question by:prasadpbr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 7

Expert Comment

by:aboredman
ID: 33735959
As a best practice you should use div tags and a CSS to layout your page, not tables.

You can have pretty good tutorials at: http://www.w3schools.com/css/default.asp

good luck
0
 
LVL 16

Expert Comment

by:MikeMCSD
ID: 33736131
start with added one <br /> and see what that does:
 </td>
<td valign="top">
<span style="padding-bottom: 4px;">
<asp:Button ID="btnAddNote" Width="60px" OnClick="btnAddNote_Click"
ValidationGroup="Notes" runat="server" Text="Add" /></span>

<br />      <<<< add here

<asp:Button ID="imgbtnNotesCancel" Width="60px" runat="server" OnClientClick="return  hideAddNotes()" Text="Cancel" />
</td>
                                                                                    </tr>
                                                                                </table>
0
 
LVL 16

Expert Comment

by:MikeMCSD
ID: 33736165
or try making the "<span style="padding-bottom: 4px;">"
larger to like 12px or more :

</td>
<td valign="top">

<span style="padding-bottom: 4px;">   <<< increase to 12px and up

<asp:Button ID="btnAddNote" Width="60px" OnClick="btnAddNote_Click"
ValidationGroup="Notes" runat="server" Text="Add" /></span>
<asp:Button ID="imgbtnNotesCancel" Width="60px" runat="server" OnClientClick="return  hideAddNotes()" Text="Cancel" />
</td>
                                                                                    </tr>
                                                                                </table>
0
 
LVL 10

Expert Comment

by:codingbeaver
ID: 33736249
Try to increase the width of the last <td> so that it has enough space for the "Cancel" button to stay on the same line as the "Add" button. If you don't have enough space, then the "Cancel" button will be wrapped to the next line.
0
 

Accepted Solution

by:
prasadpbr earned 0 total points
ID: 33736863
its working ... instead of span i used div. Thanks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question