Другие библиотеки CSS, перекрывающие вкладки EXT JS "look" - PullRequest
0 голосов
/ 17 марта 2011

http://www.habitat.noaa.gov/protection/efh/newInv/index.html - для просмотра живой версии

Как мне убедиться, что CSS из EXT JS используется в моих вкладках и не перезаписывается другой библиотекой?«Внешний вид» моих вкладок EXT JS отличается в файле, который также содержит другие библиотеки CSS, в отличие от того, когда мой файл не ссылается на эти другие библиотеки.Я вижу в Firebug, что происходит, но я не понимаю, как это исправить.

(Поскольку я новичок, я пока не могу вставлять изображения. Вместо этого я предоставил ссылки)

Бездругие библиотеки CSS мои вкладки выглядят так:

http://i1107.photobucket.com/albums/h395/mapguymike/tabs2.jpg

Когда я добавляю другие библиотеки:

удаляю ссылку, потому что у меня есть живая версия, которая отображает то же самоеинформация.

<link rel="stylesheet" type="text/css" href="../EXT_JS/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../EXT_JS/examples/simple-widgets/qtips.css" />
<link href="../../../css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="../../../css/contentarea.css" rel="stylesheet" type="text/css" media="screen">

Я теряю левую сторону каждой вкладки.Используя Firebug, я проследил его до элемента background в файле style.css, который включает изображение, которое в основном блокирует левую сторону.Если я выключаю его в FB, он возвращается белым, а затем мне нужно отключить фоновую позицию, чтобы выключить белый.Даже тогда это все еще не то же самое, но это близко.

#center a, #wide a, #ultrawide a {
...
background-image: url("/images_template/link.gif");
background-position: 0 0;
...
}

Другая вещь, которую я не понимаю, - то, что, когда я нажимаю на <a> в, затрагивается левая сторона вкладкиFirebug (в следующей строке) это ext-tab-right, а не ext-tab-left, который выделяется на странице.<a onclick=”return false;” href=”#”><em><span><span>New England</span></span></em></a>

Как мне не дать другой библиотеке переопределить «внешний вид» моих вкладок?

Ответы [ 2 ]

2 голосов
/ 18 марта 2011

В ExtJ фоновое изображение на вкладках определяется одним из следующих селекторов, все они нацелены на <a> -элементы.

  • .x-tab-strip-top .x-tab-right
  • .x-tab-strip-top .x-tab-left
  • .x-tab-strip-top .x-tab-strip-inner
  • заменить id="center" на class="center"
  • заменить селектор CSS #center a, #wide a, #ultrawide a на .center a, .wide a, .ultrawide a

Если вы хотите узнать, как и зачем читать немного о специфике CSS: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/


Другой вариант - снова переопределить стили в style.css. Просто добавьте следующие правила в файл CSS, который вы можете редактировать. Это довольно многословно, но должно работать.

#center a.x-tab-strip-top .x-tab-right, #wide a.x-tab-strip-top .x-tab-right, #ultrawide a.x-tab-strip-top .x-tab-right, 
#center a.x-tab-strip-top .x-tab-left, #wide a.x-tab-strip-top .x-tab-left, #ultrawide a.x-tab-strip-top .x-tab-left, 
#center a.x-tab-strip-top .x-tab-strip-inner, #wide a.x-tab-strip-top .x-tab-strip-inner, #ultrawide a.x-tab-strip-top .x-tab-strip-inner {
    background-image: url(../images/default/tabs/tabs-sprite.gif);
}
0 голосов
/ 18 марта 2011

Когда браузер пытается определить, какие стили использовать, он учитывает то, что называется специфичность .Проверьте эту ссылку, прежде чем читать дальше.Так что здесь происходит то, что те дополнительные стили, которые содержат идентификаторы, получают более высокую специфичность, чем стили, определенные в вашем CSS-файле extjs (если селекторы такие, как ChrisR упоминает в своем ответе).Вы можете исправить это двумя способами:

  1. Измените селекторы ExtJS, чтобы они были БОЛЬШЕ специфичнее, чем в другом файле стиля.Вы можете сделать это, добавив к ним ID (надеюсь, это возможно).
  2. Другой вариант - сделать стили в вашем другом файле стилей менее специфичными.Это означает, что вам, вероятно, придется извлечь ссылки на идентификаторы.

Если два стиля имеют одинаковую специфику, приоритет имеет последний, определенный последним (при условии отсутствия таблиц стилей пользователя или агента пользователя, которыене думаю, что дело здесь).Итак, вы можете изменить порядок загрузки стилей так:

<link href="../../../css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="../../../css/contentarea.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="../EXT_JS/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../EXT_JS/examples/simple-widgets/qtips.css" />

На всякий случай, если у вас возникнут проблемы с уровнем специфичности.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...