?
Solved

Html Alignment in .aspx page.

Posted on 2010-09-22
5
Medium Priority
?
340 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

770 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