2009-10-13 20 views
6

Ich habe dieses recht beliebte Problem, aber habe keine Lösung gefunden, die funktioniert.CSS und Bilder auf Masterseite

Basicly, ich bin mit einer Master-Seite (/Masterpages/Default.master), dass

<link href="../css/style.css" rel="stylesheet" type="text/css /> 

beinhaltet Und es enthält auch einige Bilder mit der gleichen relativen Verknüpfung.

Aber wenn ich die Masterseite auf Inhaltsseiten (in verschiedenen Ordnerebenen) anwende, gehen die CSS-Formatierung und Bilder verloren.

Gibt es trotzdem eine dynamische Lösung der Ordnerlevel-Links zu CSS und Bildern zu allen Inhaltsseiten mit der Masterpage?

Vielen Dank im Voraus

UPDATE:

Es gibt ein zusätzliches Problem. Es ist schwierig, die Ausgabe sowohl im Browser als auch in der Entwurfsansicht in Visual Studio korrekt darzustellen.

Ich habe es mit Hilfe des asp zu arbeiten: Bild Lösung für die Bilder in der Masterpage und von doppelten css in der Masterpage verbindet, man es in VS machen zu machen und man es richtig machen machen Durchsuchen der Website.

<link href="../css/style.css" rel="stylesheet" type="text/css" /> 
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" /> 

Antwort

10

am besten zu nutzen:

<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css /> 

da dies bewältigen iis Anwendung Wurzeln im Gegensatz zu:

<link href="/css/style.css" rel="stylesheet" type="text/css /> 
+0

Also die ResolveUrl, muss auch auf allen img-Tags verwendet werden? – Andreas

+0

Nicht, wenn Sie asp: Image-Komponente verwenden, aber ja, wenn Sie HTML-Tags verwenden und das src-Attribut angeben. – Richard

1

ziemlich sicher, dass diese

arbeiten
<link href="/css/style.css" rel="stylesheet" type="text/css /> 

/gelingen Sie auf die Wurzel Ihrer Website

+1

Das funktioniert, bis Sie Ihre Anwendung in einem Unterordner von der Web-Site veröffentlichen. – tvanfosson

0

Bilder in CSS sind in Bezug auf die Datei, die sie aus verwiesen werden.

(Eine Ausnahme hiervon ist der "Filter" -Regel in Internet Explorer, die für PNG-Fixes verwendet wird, um die Bilder sind in diesem Fall zu dem HTML-Dokument relativ..)

1

Sie die Tilde verwenden können, um den Link zu bekommen von der Arbeit irgendwo. Dies funktioniert auch in Bildern.

<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css /> 
0

Ja, das ist das Problem, dass die materpage eine relative URL wird mithilfe der CSS laden:

"../css/style.css" 

Sie dies auf der Website root ändern müssen (auf den Standort Ihrer CSS-Dateien abhängig) etwas wie:

"/css/style.css" 

als alle verschiedenen Ordnerebenen können die gleiche URL verwenden.

3

Sie können Ihren Link runat = "server" erstellen und das Tilde-Mapping verwenden, um den CSS-Pfad relativ zum Site-Root festzulegen.

<link runat="server" id="siteStyle" 
     href="~/css/style.css" 
     rel="stylesheet" 
     type="text/css" /> 

Die Bilder in den CSS referenziert sollten an die Stelle der CSS-Datei relativ sein und sollen in der Regel lösen, wenn die CSS-Datei selbst richtig enthalten ist. Für Bilder in Tags auf der Seite müssen Sie das ASP: Image-Steuerelement verwenden und wiederum das Tilde-Mapping für einen Pfad relativ zum Stamm verwenden.

0

Eigentlich werden Masterseiten automatisch CSS-Dateien für Sie neu erstellen, ohne dass Sie runat = "server" hinzufügen müssen. Stellen Sie sicher, dass sich Ihre CSS-Datei in dem von Ihnen angegebenen Ordner in einem Verzeichnis befindet.

Sie können einen absoluten Pfad zur CSS-Datei verwenden, aber Visual Studio scheint die Stile in der Entwurfsansicht nicht darzustellen, wenn Sie dies tun. Manchmal werden Sie auch nicht wissen, ob Sie in einem virtuellen Verzeichnis laufen werden, daher ist es nicht immer ideal, den absoluten Pfad zu verwenden.

Verwenden Sie auch relative Links zu Ihren Bildassets aus der CSS-Datei selbst - was unabhängig von der Verknüpfung mit Ihrem Stylesheet funktioniert.