Изображения страницы входа с CSS-адресами не отображаются - PullRequest
3 голосов
/ 17 ноября 2010

Хорошо, я нахожусь в тупике и нуждаюсь в быстрой помощи.

У меня есть приложение ASP.NET, использующее проверку подлинности с помощью форм. На моей странице Login.aspx я использую несколько изображений в фоновом режиме для визуального эффекта. URL-адреса устанавливаются с использованием стилей CSS, которые определены в файле (не в теме и т. Д.). Все изображения находятся в папке «Изображения» под корневым уровнем веб-сайта. В папке «Изображения» есть отдельный файл web.config, который разрешает доступ всем пользователям.

Проблема, с которой я сталкиваюсь, заключается в том, чтобы заставить изображения последовательно разрешаться в среде разработки и производственной среде. Что я узнал (и не могу контролировать), так это то, что сайт развертывается на дочернем сайте в производственном процессе, пока мы используем веб-сервер Cassini в Visual Studio для разработки. В результате, запуск каждого пути с обратной косой чертой (/) не работает в производственной среде (хотя он отлично работает в разработке). Удаление обратной косой черты нарушает среду разработки.

В настоящее время у меня есть CSS, определенный как:

#banner
{
    background: transparent url('Images/plainBlueHeader2.png') no-repeat 20% 0;
    height: 70px;
    top: 21px;
    left: 3px;
}

Это не работает в разработке, но работает в наших средах контроля качества и производства.

Что еще хуже, это, очевидно, работало нормально, и менее осведомленные сотрудники обвиняют некоторые недавние добавления в приложение, где мы добавили несколько новых страниц в подпапку. Следует отметить, что до этого ВСЕ страницы находились в корне сайта.

Не уверен, что еще я могу поделиться, поэтому, пожалуйста, задавайте любые вопросы, которые необходимы, чтобы помочь найти решение.

UPDATE: Оказывается, что одно из трех изображений правильно отображается во всех средах. Один, связанный с элементом BODY, работает, но другие, один из которых использует идентификатор, как показано в примере выше, а другой - через класс CSS, - нет.

UPDATE: Вот код для моей веб-страницы:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Login" %>
<!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>Login</title>
  <style type="text/css">
    body { background:#fff url('Images/bodyBackBlue.png') repeat-x;font-size:11px;font-family:Sans-Serif; }

    #wrapper { width:990px;margin-top:30px;margin-left:auto;margin-right:auto;position:relative; }

    #bannerwrapper { width:990px;margin-left:auto;margin-right:auto;position:relative; }

    #banner { background:transparent url('Images/plainBlueHeader2.png') no-repeat 20% 0;height:70px;top:21px;left:3px; }

    .logo { float:left;text-decoration:none;margin-left:30px;margin-top:29px; }

    .user-greeting { background-image:none;margin:8px 100px;color:#fff;float:right;font-weight:bold; }

    .warningWrapper { float:none;font-family:Sans-Serif;font-size:small;margin-left:20px; }

    #infowrapper { margin:3px 3px 3px 3px;width:68%;border-left:solid 1px #00629b; }

    #rightColumnWrapper { margin:3px 13px 3px 3px;width:28%;float:right; }

    #loginwrapper { height:220px;border-left:solid 1px #00629b;margin-bottom:20px; }

    #noticewrapper { height:100px;border-top:1px solid #00629b;margin-bottom:20px; } 

    .contentTopper { overflow:hidden;position:static;background:transparent URL('Images/portlet_topper_back.png') left repeat-x;height:23px;min-height:23px; }

    .contentTitle { float:left;color:#fff;font-weight:bold;font-size:15px;padding-top:2px;padding-left:4px; }

    .contentleft { padding:20px 5px 5px 8px;float:left;width:400px; }

    .contentRight { float:right;padding:30px 20px 10px 10px; }

    .content { padding-left:5px; }
  </style>
</head>

<body>
  <div id="bannerwrapper">
    <div id="banner">
      <span class="logo"><img id="LogoImage" src="Images/LogoLarge.jpg" height="40px" width="105px"/></span>
      <span class="user-greeting">Welcome!</span>
    </div>
  </div>        
  <div id="wrapper">
    <div id="rightColumnWrapper">
      <div id="loginwrapper">
        <div class="contentTopper"> 
          <span class="contentTitle"> Sign In </span>
        </div>
        <div class="content">        
          <form id="Login" runat="server">
            <asp:Panel ID="PanelLogin" runat="server">
              <table>
                <tr>
                  <td>
                    <asp:Label ID="LabelUserName" runat="server">User name:</asp:Label>
                  </td>
                </tr>
                <tr>
                  <td width="150">
                    <asp:TextBox ID="txtUsername" runat="server" Height="20px"></asp:TextBox>
                  </td>
                </tr>
                <tr>
                  <td>
                    <asp:Label ID="LabelPassword" runat="server">Password:</asp:Label>
                  </td>
                </tr>
                <tr>                                
                  <td width="150">
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Height="20px" Width="100%" ></asp:TextBox><br />
                  </td>
                </tr>
                <tr>                                
                  <td width="80" style="padding: 5px">
                    <asp:Button ID="btnLogin" runat="server" EnableTheming="true" Text="Sign In" OnClick="btnLogin_Click"></asp:Button><br />
                  </td>
                </tr>
              </table>
              <asp:Label ID="errorLabel" runat="server" ForeColor="#ff3300"></asp:Label><br />
            </asp:Panel>
          </form>
        </div>                
      </div>
      <div id="noticewrapper">
        <div class="contentTopper"> 
          <span class="contentTitle"> Special Notice </span>
        </div>
        <div class="content">
          <ul>
            <li>abc</li>
          </ul>               
        </div>
      </div>
    </div>
    <div id="infowrapper">
      <div class="contentTopper"> 
        <span class="contentTitle"> Welcome </span>
      </div>
      <div class="contentleft">
        <p><span style="font-size: small"><b>abc</b></span></p>
        <p>abc</p>
        <p><b>abc</b>abc</p>
        <p><b>abc</b>abc</p>
        <p>&nbsp;</p><p>&nbsp;</p>
      </div>
      <div class="contentRight">
        <img class="contentRight" id="LogoImage2" src="Images/LogoLarge.jpg" height="79px" width="199px"/> 
        <p style="text-align: center">abc</p>
      </div> 
    </div>
    <div class="warningWrapper">
      <asp:Label ID="Label1" runat="server" ForeColor="#FF0000" ></asp:Label>        
      <asp:Label ID="Label2" runat="server" ForeColor="#FF0000" Visible="false" Text="abc"></asp:Label>
      <asp:Label ID="Label3" runat="server" ForeColor="#FF0000" Visible="false" Text="abc"></asp:Label>
      <asp:Label ID="Label4" runat="server" ForeColor="#993300" Visible="false" Text="abc"></asp:Label>
    </div>
  </div>
</body>
</html>

Ответы [ 4 ]

6 голосов
/ 18 ноября 2010

После всех обсуждений я нашел этот пост: Неправильно отображается тема ASP.NET .Теперь я понимаю, что проблема была из-за правил авторизации, которые Cassini применяет в папке App_Themes.Поскольку я использую проверку подлинности с помощью форм, страница Login.aspx отображается неаутентифицированным пользователям, и Кассини не разрешает странице получать доступ к чему-либо в App_Themes.По некоторым причинам, это препятствовало применению остальных стилей CSS, я думаю.

Тем не менее, окончательное решение заключалось в добавлении следующего в мой web.config:

  <location path="App_Themes">
    <system.web>
      <authorization>
        <allow users="*" />
      </authorization>
    </system.web>
  </location>

Я хотел бы поблагодарить @matt_ashbury за руководство - я не смог бы найти решение без вашей помощи!

1 голос
/ 17 ноября 2010

Используйте это

#banner
{
    background: transparent url('<%= Page.ResolveUrl("~/Images/plainBlueHeader2.png") %>') no-repeat 20% 0;
}

это безопаснее, чем использовать .. так как местоположение вашего изображения может быть легко перемещено

1 голос
/ 17 ноября 2010

Как насчет:

url(./Images/plainBlueHeader2.png)
0 голосов
/ 17 ноября 2010

Если - как я представляю - у вас есть папка css на том же уровне папки с изображениями, тогда вы также можете написать

background: transparent url(../Images/plainBlueHeader2.png) no-repeat 20% 0;

Вы можете ссылаться на изображения, используя относительные пути (кроме, вы также можетеизбегать конечных кавычек).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...