CSS et images sur Master Page

Question

J'ai ce problème assez populaire, mais je n'ai pas réussi à trouver une solution qui fonctionne.

Basiquement, je me sers d'une page maître (/Masterpages/Default.master), qui comprend

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

Et il comprend aussi quelques images avec le même liaison relative. Mais lorsque j'applique la page principale aux pages de contenu (dans différents niveaux de dossier), le formatage css et les images sont perdus.

Est-il possible de résoudre dynamiquement les liens de niveau dossier à css et les images vers toutes les pages de contenu à l'aide de la page maître?

Merci à l'avance

MISE À JOUR:

Il y a un problème supplémentaire. Il est difficile d'obtenir la sortie à afficher correctement dans le navigateur et en mode Création dans Visual Studio.

Je l'ai à travailler en utilisant le asp: l'image solution pour les images du masterpage et par à double reliant le css dans le masterpage, un pour faire le rendre dans VS et un pour faire le rendre correctement naviguer sur le site.

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

Answer 1

utiliser au mieux:

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

car cela face aux racines iis d'application à la différence:

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

Answer 2

assez sûr que cela fonctionnera

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

/vous emmène à la racine de votre site

Answer 3

images en CSS sont relatives au fichier, ils sont référencés à partir.

(Une exception à cela est la règle du « filtre » dans Internet Explorer qui est utilisé pour des corrections PNG Les images dans ce cas sont par rapport au document HTML..)

Answer 4

Vous pouvez utiliser le tilde pour obtenir le lien au travail de n'importe où. Cela fonctionnera aussi dans Images.

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

Answer 5

Oui, le problème est que le materpage utilise une URL par rapport à charger le CSS:

"../css/style.css" 

vous devez changer cela à la racine du site (en fonction de l'emplacement de vos fichiers CSS) quelque chose comme:

"/css/style.css" 

que tous les différents niveaux de dossiers peuvent utiliser la même URL.

Answer 6

Vous pouvez faire votre lien runat = "serveur" et utiliser le mappage de tilde pour faire le chemin CSS par rapport à la racine du site.

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

Les images référencées dans le CSS devrait être par rapport à l'emplacement du fichier CSS et devrait permettre de résoudre normalement une fois le fichier CSS est lui-même inclus correctement. Pour les images dans les balises sur la page, vous devez utiliser le contrôle ASP: Image et, encore une fois, utiliser le mappage de tilde pour un chemin relatif à la racine.

Answer 7

En fait, les pages maîtres vont automatiquement rebasculer les fichiers CSS sans avoir à ajouter runat = "server". Assurez-vous que votre fichier css se trouve dans un répertoire situé dans le dossier spécifié.

Vous pouvez utiliser un chemin absolu vers le fichier css, mais Visual Studio ne semble pas afficher les styles en mode Création lorsque vous effectuez cette opération. De même, parfois, vous ne saurez pas si vous allez exécuter dans un répertoire virtuel, il n'est donc pas toujours idéal d'utiliser le chemin absolu. De plus, utilisez des liens relatifs à vos images assises du fichier css lui-même - ce qui fonctionnera indépendamment de la manière dont vous liez votre feuille de style.

Answer 8

Vous pourriez également être intéressé par les thèmes et les habillages.

ASP.NET Themes and Skins Overview