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>
</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
加载中,请稍侯......
精彩评论