Umgang mit CSS & Bilder in ASP.NET MVC

Question

Hallo Ich entwickle eine einfache Anwendung basierend auf ASP.NET MVC. Ich habe die Standard-Master.css geändert, um meine eigenen Stile zu haben. Jetzt ist das einzige Problem, dass ich Hintergrundbildeigenschaft zu meinem eins meiner UL-> Li-> A hinzufüge, um Menüs zu verursachen. Es funktioniert gut in Firefox, aber die Bilder werden überhaupt nicht im Internet Explorer (IE7/8) angezeigt. Hat jemand Ahnung, was schief läuft?

meine CSS folgt;

 #nav-menu ul 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    color:White; 
} 
#nav-menu li 
{ 
    /*float: left;*/ 
    margin: 0.15em 0.15em; 
    display:block; 

} 

#nav-menu li a 
{ 
    background-image: url('/Images/leftbarlightblue.jpg'); 
    background-repeat:no-repeat; 
    background-position:bottom; 

    height: 2em; 
    line-height: 2em; 
    width: 12em; 
    display: block; 
    text-decoration: none; 
    text-align: center; 
    color: white; 
} 

#nav-menu li a:hover 
{ 
    background-image: url('./Images/leftbardarkblue.jpg'); 
    background-repeat:no-repeat; 
    background-position:bottom; 

    height: 2em; 
    line-height: 2em; 

    width: 12em; 
    display: block; 

    color: white; 
    text-decoration: none; 
    text-align: center; 
} 
#nav-menu 
{ 
    width:15em 
} 

während XHTML ist

<div id="menucontainer"> 
      <div id="nav-menu"> 
       <ul> 
        <li><%= Html.ActionLink("Home", "Index", "Home")%></li> 
        <li><%= Html.ActionLink("About Us", "About", "Home")%></li>     
       </ul> 
      </div> 

    </div> 

1. Ja i mit ./Images versuchte/... aber es funktioniert immer noch nicht.

2. Folgende ist meine Hierarchie von Ordnern

   Solution -> Content 
          Site.css 
          Images 
            logo.jpg 
            leftbarlightblue.jpg 
        ->Controllers 
        -> Models 
        ->Views 
         Home 
         Shared 
           Site.Master 
   

Answer 1

Ich bekam das Problem, die Bilder wurden mit CMYK erstellt. Also zeigte FF ihnen ungefähre Farben, während der Internet Explorer sie völlig ignorierte. Ändern Sie das Format, um das Problem zu lösen. Danke für deine Hilfe.

Answer 2

Fügen Sie die XHTMLfor # nav-Menü, auch wenn Sie eine Live-Schaltung dieses Problems Post haben, dass auch

Answer 3

ich die Anzeige erraten hängt von der URL ab.

Wo befindet sich Ihre master.css?

Haben Sie stattdessen url('Images/leftbarlightblue.jpg') ausprobiert?

Answer 4

Wenn Sie viel mit CSS arbeiten, empfehle ich Ihnen, FireFox und FireBug zu verwenden. So können Sie Ihre Stylesheets im Hintergrund betrachten und genau sehen, warum bestimmte Dinge nicht funktionieren.

Als nächstes haben Sie überprüft, dass die URL für das Bild korrekt ist? Eine schnelle Möglichkeit zur Überprüfung besteht darin, die absolute URL zu erhalten (um sie im Browser zu überprüfen, sollte sie etwas Ähnliches wie http://myapp/content/images/leftbarlightblue.jpg sein) und diese in Ihrem Code anstelle Ihrer alten Bild-URL platzieren. Wenn das dann geladen wird dann sind wahrscheinlich deine relativen Pfade falsch (der ../ Teil), da ich deine Ordnerstruktur nicht kenne kann ich dir nicht helfen mit was es sein soll.

Bei einer separaten Notiz sollte die Hintergrundposition die horizontale Position gefolgt von der vertikalen Position haben.

Hintergrund-Position: links unten;

Answer 5

Versuchen Sie, die Bildpfade ohne alle zusätzlichen Punkte und Schrägstriche zu starten.Zum Beispiel:

/images/image.jpg 

Statt

../../images/image.jpg 

mir noch nicht sicher bin, wie die Dateien auf Ihrem aktuellen Web-Server gespeichert werden, so dass Sie ein Verzeichnis oder zwei hinzufügen müssen aber in der Regel ist es nicht ratsam, Verwenden Sie dots, um dem Server mitzuteilen, wie viele Ebenen in der Verzeichnisstruktur verfügbar sind (und viele Leute vergessen, dass Sie angeben müssen, wo sich das Bild befindet, aus der Position der CSS-Datei nicht unbedingt der Speicherort der HTML-/ASP-Datei)

Answer 6

Ihr Stylesheet muss den Literalpfad wie folgt verwenden:

background-image: url('/Content/Images/leftbarlightblue.jpg'); 

und nicht

background-image: url('/Images/leftbarlightblue.jpg');