CSS и изображения на главной странице
У меня есть довольно популярная проблема, но я не смог найти решение, которое работает.
В основном я использую мастер-страницу (/Masterpages/Default.master), которая включает
<link href="../css/style.css" rel="stylesheet" type="text/css />
И это также включает в себя некоторые изображения с той же относительной связью.
Но когда я применяю мастер-страницу к страницам контента (на разных уровнях папок), форматирование css и изображения теряются.
Есть ли способ динамически разрешать ссылки на уровне папок css и изображения на все страницы контента, используя главную страницу?
заранее спасибо
ОБНОВИТЬ:
Есть дополнительная проблема. Сложно сделать так, чтобы вывод правильно отображался как в браузере, так и в режиме конструктора в 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" />
8 ответов
Лучше всего использовать:
<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />
так как это будет справляться с корнями приложения iis в отличие от:
<link href="/css/style.css" rel="stylesheet" type="text/css />
Вы можете сделать свою ссылку runat="server" и использовать отображение тильды, чтобы сделать путь CSS относительно корня сайта.
<link runat="server" id="siteStyle"
href="~/css/style.css"
rel="stylesheet"
type="text/css" />
Изображения, на которые ссылаются в CSS, должны относиться к местоположению файла CSS и должны нормально разрешаться, как только сам файл CSS включен правильно. Для изображений в тегах на странице вам потребуется использовать элемент управления ASP: Изображение и, опять же, использовать отображение тильды для пути относительно корня.
Вы можете использовать тильду, чтобы получить ссылку на работу из любого места. Это будет работать и в изображениях.
<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css />
Совершенно уверен, что это будет работать
<link href="/css/style.css" rel="stylesheet" type="text/css />
/ переводит вас в корень вашего сайта
Да, проблема в том, что materpage использует относительный URL для загрузки CSS:
"../css/style.css"
вам нужно изменить это на корень сайта (в зависимости от расположения ваших CSS-файлов) что-то вроде:
"/css/style.css"
чем все уровни папок могут использовать один и тот же URL.
На самом деле, мастер-страницы автоматически перебазируют css-файлы без необходимости добавлять runat="server". Убедитесь, что ваш CSS-файл расположен на один каталог ниже указанной вами папки.
Вы можете использовать абсолютный путь к файлу CSS, но Visual Studio, похоже, не отображает стили в режиме конструктора, когда вы делаете это. Кроме того, иногда вы не будете знать, собираетесь ли вы работать в виртуальном каталоге, поэтому не всегда идеально использовать абсолютный путь.
Кроме того, используйте относительные ссылки на ваши изображения из самого файла CSS - который будет работать независимо от того, как вы ссылаетесь на свою таблицу стилей.
Изображения в CSS относятся к файлу, на который они ссылаются.
(Исключением из этого является правило "фильтра" в Internet Explorer, которое используется для исправлений PNG. Изображения в этом случае относятся к документу HTML.)
Вам также может быть интересно посмотреть темы и скины.