How to shrink the ASPX page
Question
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></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 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>
5 answers
solution1
0 2010-04-15 03:10:14
The reason is because you've got some inline CSS.
Remove the:
top:148px;
And optionally the:
left: 155px;
solution2
0 2010-04-15 03:10:19
减少或删除asp：Label中的“顶部”标签
<asp:Label ID="resultLabel" runat="server" style="position:absolute; text-align:center; top:148px; left: 155px;" Visible="False"></asp:Label>
solution3
0 2010-04-15 04:38:03
我不确定如何将这两个表相对放置，但是尝试将border =“ 1”添加到表标签中以查看表和单元格正在发生什么。
solution4
0 2010-04-15 18:04:07
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>
solution5
0 2010-04-15 18:37:23
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.