2010-11-17 4 views
3

Bon, je suis perplexe sur celui-ci et j'ai besoin d'aide rapide. J'ai une application ASP.NET utilisant l'authentification par formulaires. Dans ma page Login.aspx, j'utilise plusieurs images en arrière-plan pour l'effet visuel. Les URL sont définies en utilisant les styles CSS qui sont définis dans le fichier (pas dans un thème et al). Toutes les images sont situées dans un dossier Images sous le niveau racine du site Web. Il y a un web.config distinct dans le dossier Images permettant à tous les utilisateurs d'y accéder.Les images de la page de connexion avec l'URL CSS ne sont pas affichées

Le problème que je rencontre est de résoudre les images de manière cohérente dans l'environnement de développement et l'environnement de production. Ce que j'ai appris (et dont je n'ai aucun contrôle) est que le site est déployé sur un sous-site en production alors que nous utilisons le serveur web Cassini dans Visual Studio pour le développement. Par conséquent, démarrer chaque chemin avec une barre oblique inversée (/) ne fonctionne pas en production (bien que cela fonctionne bien en développement). La suppression de la barre oblique inverse brise l'environnement de développement.

Actuellement, je suis le CSS défini semblable à:

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

Cela ne fonctionne pas dans le développement, mais il fonctionne dans nos environnements d'assurance qualité et de production. Pour compliquer les choses, cela fonctionnait apparemment bien et des collègues moins compétents blâment des ajouts récents à l'application où nous avons ajouté plusieurs nouvelles pages dans un sous-dossier. Je devrais mentionner qu'avant toutes ces pages étaient à la racine du site.

Je ne sais pas quoi d'autre je peux partager alors s'il vous plaît poser toutes les questions qui sont nécessaires pour aider à trouver une solution.

MISE À JOUR: Il s'avère que l'une des trois images s'affiche correctement dans tous les environnements. Celui associé à l'élément BODY fonctionne, mais les autres, l'un utilisant l'ID comme indiqué dans l'exemple ci-dessus et l'autre via une classe CSS, ne le sont pas.

MISE À JOUR: Voici le code de ma page web:

<%@ 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> 
+0

Je ne vois rien de mal avec la syntaxe, vérifiez le chemin – Starx

Répondre

6

Après tout l'arrière-et-vient discussion J'ai trouvé cet article: ASP.NET theme not rendering correctly. Je réalise maintenant que le problème était dû aux règles d'autorisation que Cassini impose dans le dossier App_Themes. Comme j'utilise l'authentification par formulaires, la page Login.aspx est affichée pour les utilisateurs non authentifiés et Cassini n'autorisait pas la page à accéder à quoi que ce soit dans App_Themes. Pour une raison quelconque, cela bloquait le reste des styles CSS d'être appliqué, je suppose.

Néanmoins, la solution ultime était d'ajouter ce qui suit dans mon web.config:

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

Je voudrais remercier @matt_ashbury pour la direction - Je ne pouvais pas trouver une solution sans votre aide !

+0

Ce fut une excellente réponse, et m'a aidé à corriger le même problème sur une application dont j'ai hérité et qui travaille sur un serveur, mais pas sur ma boîte de dev pour l'écran de connexion. Je souhaite qu'il y avait un moyen de les pousser à l'avant de google! – FSBarker

0

Si - comme je l'imagine - vous avez un css dossier au même niveau d'images dossier que vous pouvez alors également écrire

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

Vous pouvez référencer les images en utilisant les chemins relatifs (à part, vous pouvez également éviter les guillemets).

+0

Malheureusement, le dossier Images est au même niveau que ma page Login.aspx, donc en utilisant ../ forcer le runtime à essayer de grimper la hiérarchie des dossiers pour trouver Des images qui ne sont pas situées dans les deux environnements. – SonOfPirate

1

Utilisez cette

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

il est plus sûr que d'utiliser .. comme emplacement de l'image pourrait être déplacé facilement

+0

Deux problèmes avec cette solution. Un, je reçois une exception - mais j'aurais pu faire une erreur de frappe. Néanmoins, l'utilisation du tilde (~) n'est pas la solution car elle indique à l'exécution que le chemin est relatif à la racine du site. En développement, c'est bien car le chemin est quelque chose comme http: // localhost: 1234/Login.aspx. En production, cela ne fonctionne pas parce que l'application s'exécute dans un dossier sous le site racine, comme http: //server/root/Login.aspx. (BTW, le dossier Images est dans le même dossier que Login.aspx). – SonOfPirate

1

Que diriez-vous:

url(./Images/plainBlueHeader2.png) 
+0

Toujours ne fonctionnait pas dans l'environnement de développement. – SonOfPirate

+0

Juste par intérêt, si vous permutez l'image que vous utilisez dans la balise body avec celle du #banner, l'image est-elle toujours affichée ou est-ce que (plainBlueHeader.png) fonctionne maintenant pour le corps? –

+0

Intéressant. Oui, lorsque je change les images, le tag BODY restaure correctement (avec plainBlueHeader2.png) et l'image d'origine ne s'affiche pas pour #banner. – SonOfPirate

Questions connexes