Solved

Html Alignment in .aspx page.

Posted on 2010-09-22
5
334 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
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now