CSS и изображения на главной странице

Question

У меня есть довольно популярная проблема, но я не смог найти решение, которое работает.

Обычно я использую мастер-страницу (/Masterpages/Default.master), которая включает

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

И это также включает в себя некоторые изображения с той же относительной связью.

Но когда я применяю мастер-страницу к страницам содержимого (на разных уровнях папок), форматирование css и изображения теряются.

Есть ли способ динамически разрешать ссылки на уровне папок на css и изображения на все страницы содержимого с помощью главной страницы?

Заранее спасибо

UPDATE

Есть дополнительная проблема. Сложно сделать так, чтобы вывод правильно отображался как в браузере, так и в режиме конструктора в Visual Studio.

Я заставил его работать, используя решение asp: image для изображений на главной странице и двойное связывание css на главной странице, одно, чтобы заставить его отображаться в VS и один, чтобы заставить его правильно просматривать сайт.

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

Answer 1

лучше всего использовать:

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

, поскольку это будет работать с корнями приложения iis в отличие от:

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

Answer 2

Вы можете сделать свою ссылку runat = "server" и использовать отображение тильды, чтобы сделать путь CSS относительно корня сайта.

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

Изображения, на которые ссылаются в CSS, должны относиться к местоположению файла CSS и должны нормально разрешаться, как только сам файл CSS включен правильно. Для изображений в тегах на странице вам потребуется использовать элемент управления ASP: Изображение и снова использовать отображение тильды для пути относительно корня.

Answer 3

Вы можете использовать тильду , чтобы получить ссылку для работы из любого места. Это будет работать и в изображениях.

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

Answer 4

Совершенно уверен, что это будет работать

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

/ переводит вас в корень вашего сайта

Answer 5

Вас также может заинтересовать просмотр тем и скинов.

Обзор тем и скинов ASP.NET

Answer 6

На самом деле, мастер-страницы автоматически перебазируют css-файлы без необходимости добавлять runat = "server". Убедитесь, что ваш CSS-файл расположен на один каталог в указанной вами папке.

Вы можете использовать абсолютный путь к файлу CSS, но Visual Studio, похоже, не отображает стили в режиме конструктора, когда вы делаете это. Кроме того, иногда вы не будете знать, собираетесь ли вы работать в виртуальном каталоге, поэтому не всегда идеально использовать абсолютный путь.

Кроме того, используйте относительные ссылки на ваши изображения из самого файла CSS - который будет работать независимо от того, как вы ссылаетесь на свою таблицу стилей.

Answer 7

Да, проблема в том, что materpage использует относительный URL для загрузки CSS:

"../css/style.css"

вам нужно изменить это значение на корневой каталог сайта (в зависимости от расположения ваших css-файлов), например:

"/css/style.css"

, чем все различные уровни папок могут использовать один и тот же URL.

Answer 8

Изображения в CSS относятся к файлу, на который они ссылаются.

(Исключением из этого является правило «фильтра» в Internet Explorer, которое используется для исправлений PNG. Изображения в этом случае относятся к документу HTML.)