61,112
社区成员
发帖
与我相关
我的任务
分享求助：position定位的问题
登陆图片，怎么设置能在不同分辨率下，居中显示在用户名和密码右侧
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>无标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Cache-Control" content="no-cache" />
<style type="text/css">
TD {
FONT-SIZE: 10pt; COLOR:#828282; LINE-HEIGHT: 150%; FONT-FAMILY: Arial
}
IMG { border:none; vertical-align:top;}
.tdLoginWindow{
border-collapse: collapse;
background-image: url(images/loginwindow.gif);
background-repeat: no-repeat;
width: 365px;
height: 156px;
}
.btndenglu{
position:relative;
top:-45px;
left:5px;
}
</style>
</head>
<body style="background-color: #dbdbdb; margin: 0;">
<form id="form1" runat="server">
<div align="center">
<table id="Table1" cellspacing="0" cellpadding="0" width="100%" style="height: 100%;"
border="0">
<tr>
<td align="center" valign="middle">
<table id="Table3" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" valign="middle" class="tdLoginWindow" style="height: 156px">
<table border="0" style="font-size: 12px; margin-top: 65px; margin-left: 55px;">
<tr>
<td style="height: 100px; width: 255px;">
<div style="border:solid 1px Blue">
<!--登录部分-->
<asp:LoginView ID="LoginUserView" runat="server" EnableTheming="True" EnableViewState="True">
<LoggedInTemplate>
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 100%;
vertical-align: top;">
<tr>
<td valign="top" style="width: 175px; line-height: 200%">
登录用户：<asp:Label ID="labUserName" runat="server" Text="Label"></asp:Label>
<asp:LoginName ID="LoginName1" runat="server" Visible="false" />
<br />
您现在已登录到 工作 模式
</td>
<td align="right" valign="top">
<asp:LoginStatus ID="LoginUserStatus" runat="server" LogoutImageUrl="images/loginout.gif"
OnLoggingOut="LoginUserStatus_LoggingOut" LogoutPageUrl="~/Default.aspx" />
<input type="image" src="images/loginin.gif" title="进入系统" id="button1" name="button1"
onclick="self.top.location.href='main.aspx'" />
</td>
</tr>
</table>
</LoggedInTemplate>
<AnonymousTemplate>
</AnonymousTemplate>
</asp:LoginView>
<asp:Login ID="LoginUser" runat="server" OnAuthenticate="LoginUser_Authenticate"
BorderStyle="solid" BorderColor="red" DisplayRememberMe="False" FailureText="用户名或密码错误！"
Font-Names="宋体" Font-Size="18px" ForeColor="#828282" PasswordLabelText="密 码："
LoginButtonType="Image" LoginButtonImageUrl="images/denglu.gif" PasswordRequiredErrorMessage="请输入密码！"
RememberMeSet="True" TitleText="" UserNameLabelText="用户名：" UserNameRequiredErrorMessage="请输入用户名！"
VisibleWhenLoggedIn="False" Font-Bold="True" Font-Overline="False" Font-Strikeout="False"
DestinationPageUrl="Main.aspx" Width="255px" Height="100px">
<TitleTextStyle BackColor="#507CD1" Font-Bold="False" Font-Size="0.9em" ForeColor="White" />
<InstructionTextStyle Font-Italic="True" />
<TextBoxStyle Font-Size="9pt" Font-Bold="True" Font-Names="宋体" Height="15px" Width="100px" />
<LoginButtonStyle BorderStyle="Solid" BorderWidth="0px" Font-Names="宋体" Font-Size="12px"
BackColor="Transparent" Font-Bold="False" CssClass="btndenglu" />
<LabelStyle Font-Bold="False" />
</asp:Login>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" height="30">
<a href="/conn/SVGView.rar">
<img src="images/download.gif" /> <font color="#838383">图形显示程序请在此下载</font></a> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
loveseunghun 2009-02-25
- 打赏
- 举报
不用table控制居中位置，而是用div控制。
最外层div 使用absoult定位，内层div使用relative定位，登陆图片使用absolute相对内层div定位。即可实现，不管分辨率，窗口如何变化，登陆框一直居中显示
最外层div 使用absoult定位，内层div使用relative定位，登陆图片使用absolute相对内层div定位。即可实现，不管分辨率，窗口如何变化，登陆框一直居中显示
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>无标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Cache-Control" content="no-cache" />
<style type="text/css">
.divLoginWindow{
background-image: url(images/loginwindow.gif);
background-repeat: no-repeat;
width: 365px;
height: 156px;
margin:auto;
position:absolute;
left:50%;
top:50%;
z-index:1;
margin-left:-183px;
margin-top:-98px
}
IMG { border:none; vertical-align:top;}
.btndenglu{
position:absolute;
top:10px;
right:0px;
}
#divLoginText
{
position: relative;
top: 0;
left: 0;
font-size: 10px;
margin-top: 70px;
margin-left: 75px;
height: 60px;
width: 255px;
}
#divDownload
{
position:relative;
top:25px;
float:right;
}
#tblLoginText
{
width:100%;
height:100%;
}
TD,a {
FONT-SIZE: 10pt; COLOR:#828282; LINE-HEIGHT: 150%; FONT-FAMILY: Arial
}
</style>
</head>
<body style="background-color: #dbdbdb; margin: 0; height: 100%;">
<form id="form1" runat="server">
<div class="divLoginWindow">
<div id="divLoginText">
<!--登录部分-->
<asp:LoginView ID="LoginUserView" runat="server" EnableTheming="True" EnableViewState="True">
<LoggedInTemplate>
<table cellpadding="0" cellspacing="0" border="0" id="tblLoginText">
<tr>
<td valign="top" style="width: 175px; line-height: 200%">
登录用户：<asp:Label ID="labUserName" runat="server" Text="Label"></asp:Label>
<asp:LoginName ID="LoginName1" runat="server" Visible="false" />
<br />
您现在已登录到 工作 模式
</td>
<td align="right" valign="top">
<asp:LoginStatus ID="LoginUserStatus" runat="server" LogoutImageUrl="images/loginout.gif"
OnLoggingOut="LoginUserStatus_LoggingOut" LogoutPageUrl="~/Default.aspx" />
<input type="image" src="images/loginin.gif" title="进入系统" id="button1" name="button1"
onclick="self.top.location.href='main.aspx'" />
</td>
</tr>
</table>
</LoggedInTemplate>
<AnonymousTemplate>
</AnonymousTemplate>
</asp:LoginView>
<asp:Login ID="LoginUser" runat="server" OnAuthenticate="LoginUser_Authenticate"
DisplayRememberMe="False" FailureText="用户名或密码错误！" Font-Names="宋体" Font-Size="18px"
ForeColor="#828282" PasswordLabelText="密 码：" LoginButtonType="Image" LoginButtonImageUrl="images/denglu.gif"
PasswordRequiredErrorMessage="请输入密码！" RememberMeSet="True" TitleText="" UserNameLabelText="用户名："
UserNameRequiredErrorMessage="请输入用户名！" VisibleWhenLoggedIn="False" Font-Bold="True"
Font-Overline="False" Font-Strikeout="False" DestinationPageUrl="Main.aspx" Width="255px"
Height="60px">
<TitleTextStyle BackColor="#507CD1" Font-Bold="False" Font-Size="0.9em" ForeColor="White" />
<InstructionTextStyle Font-Italic="True" />
<TextBoxStyle Font-Size="10pt" Font-Bold="True" Font-Names="宋体" Height="15px" Width="100px" />
<LoginButtonStyle BorderStyle="Solid" BorderWidth="0px" Font-Names="宋体" Font-Size="12px"
BackColor="Transparent" Font-Bold="False" CssClass="btndenglu" />
<LabelStyle Font-Bold="False" />
</asp:Login>
</div>
<div id="divDownload">
<a href="/conn/SVGView.rar">
<img src="images/download.gif" /> <font color="#838383">图形显示程序请在此下载</font></a>
</div>
</div>
<%-- </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" height="30">
</tr>
</table>
</td>
</tr>
</table>
--%>
</form>
</body>
</html>
loveseunghun 2009-02-25
- 打赏
- 举报
[Quote=引用 3 楼 div_css 的回复:]
外边的div使用相对定位，然后登陆图片用绝对定位，这样他会随着外边div的改变而改变，总是处在相对正好的位置！
[/Quote]
可是外面div 如何实现左右上下都居中啊？
外边的div使用相对定位，然后登陆图片用绝对定位，这样他会随着外边div的改变而改变，总是处在相对正好的位置！
[/Quote]
可是外面div 如何实现左右上下都居中啊？
div_css 2009-02-25
- 打赏
- 举报
外边的div使用相对定位，然后登陆图片用绝对定位，这样他会随着外边div的改变而改变，总是处在相对正好的位置！
loveseunghun 2009-02-25
- 打赏
- 举报
现在的情况是，用relative定位，首次打开页面时，登陆按钮显示位置正确，可是缩小窗口，登陆按钮就移位了。
想用absolute定位，可如何实现不同分辨率下登陆框都是居中显示。除了脚本有没有更好的办法
想用absolute定位，可如何实现不同分辨率下登陆框都是居中显示。除了脚本有没有更好的办法
