CSS e imágenes en la página maestra

Question

Tengo este problema bastante popular, pero no he podido encontrar una solución que funcione.

Básicamente, estoy usando una página principal (/Masterpages/Default.master), que incluye

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

y también incluye algunas imágenes con la misma vinculación relativa.

Pero cuando aplico la página maestra a páginas de contenido (en diferentes niveles de carpeta) se pierde el formateo de css y las imágenes.

¿Hay alguna forma de resolver dinámicamente los enlaces de nivel de carpeta a CSS e imágenes a todas las páginas de contenido que utilizan la página maestra?

Gracias de antemano

ACTUALIZACIÓN:

Existe un problema adicional. Es difícil hacer que la salida se muestre correctamente tanto en el navegador como en la vista de diseño en Visual Studio.

lo tengo para trabajar mediante el uso de la ASP : Imagen solución para las imágenes de la Maestra y por doble que une el css en el masterpage, uno para hacer que rinda en VS y uno para hacer que representa correctamente navegando por el sitio.

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

Answer 1

mejor manera de utilizar:

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

ya que esto hará frente con IIS raíces a diferencia de aplicación:

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

Answer 2

bastante seguro de que esto va a funcionar

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

/te lleva a la raíz de su sitio

Answer 3

Imágenes en CSS son en relación con el archivo que se hace referencia a partir de.

(Una excepción a esto es la regla de "filtro" en Internet Explorer que se utiliza para los arreglos PNG Las imágenes en este caso son en relación con el documento HTML..)

Answer 4

puede utilizar la tilde para obtener el enlace a trabajar desde en cualquier sitio. Esto funcionará en Imágenes también.

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

Answer 5

Sí, el problema es que el materpage está utilizando una URL relativa para cargar el CSS:

"../css/style.css" 

necesita cambiar esto a la raíz del sitio (dependiendo de la ubicación de los archivos CSS) algo así como:

"/css/style.css" 

que todos los distintos niveles de carpetas pueden usar la misma URL.

Answer 6

Puede hacer que su enlace runat = "server" y usar tilde mapping para hacer que la ruta CSS sea relativa a la raíz del sitio.

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

Las imágenes que se hace referencia en el CSS deben ser relativas a la ubicación del archivo CSS y deben resolver normalmente una vez que el archivo CSS en sí está incluido correctamente. Para las imágenes en las etiquetas en la página, necesitaría usar el control ASP: Image y, nuevamente, usar el mapeo tilde para una ruta relativa a la raíz.

Answer 7

En realidad, las páginas maestras volverán a basar los archivos css de forma automática, sin tener que agregar runat = "server". Asegúrese de que su archivo css esté ubicado en un directorio de la carpeta que especificó.

Puede usar una ruta de acceso absoluta al archivo css, pero el estudio visual no muestra los estilos en la vista de diseño cuando hace esto. Además, en algún momento no sabrá si va a ejecutar en un directorio virtual, por lo que no siempre es ideal usar la ruta absoluta.

Además, utilice enlaces relativos a sus datos de imagen del archivo css en sí, lo que funcionará independientemente de cómo se vincule a su hoja de estilo.

Answer 8

Puede que también le interese buscar temas y máscaras.

ASP.NET Themes and Skins Overview