How to shrink the ASPX page_问答_开发者_运维开发者技术经验分享

I am developing a C#/ASP.NET web application in VS 2008. Currently this page is too tall. The buttons appear on top and then there is a large gap between these buttons and the resultLabel text. The following code is from my ASPX file. I have tried switching to the Design tab of this file and manually moving this label, but there is still a large gap. I'm sure this is simple. How do I correct this?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataMatch.aspx.cs" Inherits="AddFileToSQL.DataMatch" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></tit开发者_C百科le>
    <style type="text/css">
    </style>
    <script language="javascript" type="text/javascript">
    </script>
</head>
<body>
    <form id="Form1" method="post" runat="server">
    <table width="50%" >
        <tr>
        </tr>
        <tr align="center">
            <td align="center" valign="top">
                <asp:placeholder runat="server" id="phTextBoxes"></asp:placeholder>
            </td>
             <td colspan="2">
                <asp:Label ID="Instructions" runat="server" Font-Italic="True"  
                    Text="Now select from the dropdownlists which table columns from my database you want to map these fields to"></asp:Label>
            </td>
            <td align="center" colspan="2" >
                <asp:button id="btnSubmit" runat="server" text="Submit" width="150px" style="top:auto; left:auto"
                    OnClick="btnSubmit_Click" top="100px"></asp:button>
                &nbsp;
                </td>
       </tr>
     <asp:panel id="pnlDisplayData" runat="server" visible="False">
        <tr>
            <td colspan="2" align="center" valign="top">
                <asp:literal id="lTextData" runat="server"></asp:literal>
            </td>
        </tr></asp:panel>
    </table> 

    <table align="center"><tr>
    <td style="text-align: center;width: 300px;">
    <asp:Label ID="resultLabel" runat="server" style="position:absolute; text-align:center;" 
        Visible="False"></asp:Label>
    </td></tr></table>    
    <p>
</p>      
    </form>
    </body>
</html>

The reason is because you've got some inline CSS.

Remove the:

 top:148px;

And optionally the:

 left: 155px;

Reduce or remove the "top" tag within your asp:Label

<asp:Label ID="resultLabel" runat="server" style="position:absolute; text-align:center; top:148px; left: 155px;" Visible="False"></asp:Label>

I am not sure how you want those 2 tables positioned relative to each other, but try to add border="1" to your table tag to see what is happening with your tables and cells.

I'm not sure exactly what you want your end result to look like, so I don't know why you need two tables. Will this work for you? I added in my own text and turned all controls on to visible to see where they would end up on the screen.

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head id="Head1" runat="server"> 
    <title></title> 
    <style type="text/css"> 
    </style> 
    <script language="javascript" type="text/javascript"> 
    </script> 
</head> 
<body> 
    <form id="Form1" method="post" runat="server"> 
    <table >
        <tr>
            <td> 
                <asp:placeholder runat="server" id="Placeholder1"></asp:placeholder> 
            </td> 
            <td> 
                <asp:Label ID="Label1" runat="server" Font-Italic="True"   
                    Text="Now select from the dropdownlists which table columns from my database you want to map these fields to"></asp:Label> 
            </td> 
            <td> 
                <asp:button id="Button1" runat="server" text="Submit" width="150px"></asp:button> 
            </td> 
            <td>
                <asp:Label ID="Label2" runat="server" Visible="true" Text="result"></asp:Label> 
            </td>
        </tr>
        <tr>
             <asp:panel id="Panel1" runat="server" visible="true"> 
                <td> 
                    <asp:literal id="Literal1" runat="server" Text="test of literal control"></asp:literal> 
                </td>
            </asp:panel>
        </tr>
    </table>
    </form> 
    </body> 
</html>

There are a lot of things which is kind of not right:

You have specified colspan which is not required since you dont have 5 TDs in any TR
Inside the table you have given asp Panel. That panel should be inside the td which hosts that literal control.
Since you are using tables you are better off not using a. position:absolute b. specifying Top

Given below is the corrected html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        </style>

    <script language="javascript" type="text/javascript">
    </script>

</head>
<body>
    <form id="Form1" method="post" runat="server">
    <table width="50%">
        <tr>
        </tr>
        <tr align="center">
            <td align="center" valign="top">
                <asp:PlaceHolder runat="server" ID="phTextBoxes"></asp:PlaceHolder>
            </td>
            <td>
                <asp:Label ID="Instructions" runat="server" Font-Italic="True" Text="Now select from the dropdownlists which table columns from my database you want to map these fields to"></asp:Label>
            </td>
            <td align="center" >
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="150px" ></asp:Button>                
            </td>
        </tr>

            <tr>
                <td colspan="3" align="center" valign="top">
                <asp:Panel ID="pnlDisplayData" runat="server" Visible="False">
                    <asp:Literal ID="lTextData" runat="server"></asp:Literal>
                </asp:Panel>
                </td>
            </tr>

    </table>
    <table align="center">
        <tr>
            <td style="text-align: center; width: 300px;">
                <asp:Label ID="resultLabel" runat="server" Style="text-align: center;"
                    Visible="False"></asp:Label>
            </td>
        </tr>
    </table>
    <p>
    </p>
    </form>
</body>
</html>

Also check if you are repositioning any of the items in code behind.

HTH