防止-DIV - 嵌段 - 来自-运动时窗口调整大小的使用CSS

-2

在asp.net主页时的浏览器窗口是resized.The图像可以是任何GIF/PNG图象防止-DIV - 嵌段 - 来自-运动时窗口调整大小的使用CSS

万事达DIV的移动背后

protected void Page_Load(object sender, EventArgs e) 
    { 
     const string imageGreen = "~/App_Ressources/Images/traffic_light_green_small.png"; 

     HtmlGenericControl imgDiv = new HtmlGenericControl(); 

     HtmlImage imgGreen = new HtmlImage(); 
     imgGreen.Src = imageGreen; 
     imgDiv.Controls.Add(imgGreen); 
     HtmlGenericControl txtDiv = new HtmlGenericControl(); 
     txtDiv.Attributes.Add("style", "color:green;"); 
     StringBuilder sb = new StringBuilder(); 
     sb.Append("Feed name as of " + DateTime.Now.ToString("dd MMM yyyy HH:mm")); 
     sb.Append("<br/>"); 
     sb.Append("<br/>"); 
     txtDiv.InnerHtml = sb.ToString(); 
     imgDiv.Controls.Add(txtDiv); 
     Refeshbox.Controls.Add(imgDiv); 

    }

母版页页中的代码

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head runat="server"> 
    <title></title> 
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> 
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> 
    </asp:ContentPlaceHolder> 
    <style type="text/css"> 
     .Refeshdiv 
     { 
      position: absolute; 
      top: 130px; 
      right: 400px; 
      width: 240px; 
      height: 244px; 
      padding: 10px; 
      color: green; 
      display: none; 
      border: 1px solid green; 
      z-index: 98001; 
      background-color: White; 
     } 

     .imgdivclass 
     { 
      position: absolute; 
      top: 56px; 
      right: 640px; 
      display: inline; 
      white-space: nowrap; 
      margin-left:0px; 
      margin-right:0px; 
     } 
     .anchordivclass 
     { 
      position: absolute; 
      top: 62px; 
      right: 530px; 
      text-align: right; 
      display: inline; 
      white-space: nowrap; 
      margin-left:0px; 
      margin-right:0px; 
     } 
     body 
     { 
      width: 100%; 
      background-color: white; 
     } 
    </style> 
</head> 
<body> 
    <form runat="server"> 
    <script type="text/javascript" language="javascript"> 

     function Show(id, visibility) { 
      var id = '<%=Refeshbox.ClientID%>'; 
      document.getElementById(id).style.display = visibility; 
     } 
    </script> 
    <div class="page"> 
     <div class="header"> 
      <div class="title"> 
       <h1> 
        My ASP.NET Application 
       </h1> 
      </div> 
      <div class="loginDisplay"> 
       <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> 
        <AnonymousTemplate> 
         [ <a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server">Log In</a> 
         ] 
        </AnonymousTemplate> 
        <LoggedInTemplate> 
         Welcome <span class="bold"> 
          <asp:LoginName ID="HeadLoginName" runat="server" /> 
         </span>! [ 
         <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" 
          LogoutPageUrl="~/" /> 
         ] 
        </LoggedInTemplate> 
       </asp:LoginView> 
      </div> 
      <div class="clear hideSkiplink"> 
       <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" 
        IncludeStyleBlock="false" Orientation="Horizontal"> 
        <Items> 
         <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" /> 
         <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" /> 
        </Items> 
       </asp:Menu> 
      </div> 
     </div> 
     <div class="main"> 
      <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
      <%--<div id="divlink" class="adiv">--%> 
      <div id="imgdiv" class="imgdivclass"> 
       <img id="imgLights" src="App_Ressources/Images/traffic_light_green_small.png" height="29px" 
        width="20px" alt="" /> 
      </div> 
      <div id="anchordiv" class="anchordivclass"> 
       <a href="" style="color: Black" onmouseover="Show('Refeshbox','block');" onmouseout="Show('Refeshbox','none');"> 
        last updates info</a> 
      </div> 
      <%--</div>--%> 
      <div id="Refeshbox" class="Refeshdiv" runat="server"> 
      </div> 
     </div> 
     <div class="clear"> 
     </div> 
    </div> 
    <div class="footer"> 
    </div> 
    </form> 
</body> 
</html>

当浏览器窗口大小的被移动到左边的股利。问题在于下面这些div标签的问题。

 <div id="anchordiv" class="anchordivclass"> 
      <a href="" style="color: Black" onmouseover="Show('Refeshbox','block');" onmouseout="Show('Refeshbox','none');"> 
       last updates info</a> 
     </div>

任何帮助，高度赞赏。

感谢湿婆

来源

2014-12-02 Shiva

“div正在移动”哪个div？ – Zack 2014-12-02 15:13:28

我很抱歉，我没有描述这个问题。现在更新它。 – Shiva 2014-12-02 15:50:45

看看你anchordivclass CSS。您有position: absolute和right: 530px。在这种情况下，div不会遵循正常的布局。由于没有指定位置的祖先元素，因此它始终保持自身距离窗口的右边缘530个像素。

.anchordivclass 
{ 
    position: absolute; 
    top: 62px; 
    right: 530px; 
    text-align: right; 
    display: inline; 
    white-space: nowrap; 
    margin-left:0px; 
    margin-right:0px; 
}

来源

2014-12-02 16:13:02 Zack

Zack你能告诉我什么是我需要在div的CSS做的改变。任何帮助表示赞赏 – Shiva 2014-12-02 16:18:57

我只是说从'anchordivclass' CSS样式中删除'right：530px;'。你知道为什么当窗口调整大小时让你的div移动吗？ 'right：530px;'使它从窗口的右边缘保持530像素... – Zack 2014-12-02 16:21:15

我有一个菜单，我需要将菜单结束后的图像和超链接文本放在同一行。菜单是一个asp。净用户控制。为了将图像和超链接文本旁边的菜单我用530px.and顶部：62px.我试过几个选项，但每次它发生相同的。任何帮助赞赏 – Shiva 2014-12-02 16:38:28

防止-DIV - 嵌段 - 来自-运动时窗口调整大小的使用CSS

回答

相关问题