Положение div с унаследованным DIV для jqDock сводит меня с ума - PullRequest
0 голосов
/ 16 марта 2012

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

Я использую jqDock и хочу разместить панель инструментов в «поле» в столбце. Включено довольно много кода, но вы можете увидеть пример здесь: http://ag.wasen.net/index.php?option=com_content&view=section&id=2&Itemid=17

Посмотрите на "Simple File Lister v2.0 # 2" в правой колонке, где панель инструментов идеально расположена. Затем посмотрите на левую сторону, где панель инструментов поворачивается вертикально и полностью отклоняется от курса. Эти два модуля (как их называют в Joomla) используют один и тот же код!

Разница между этими двумя модулями, левым и правым, заключается в том, что левый наследует много CSS от операторов "div" в левом столбце.

Проблема, похоже, связана с унаследованной "шириной" из ранее загруженного файла CSS. Если я посмотрю на него в FireBug и удалю объявление для #leftcolumn div {width: 191px;} в FireBug, то панель инструментов слева будет работать нормально.

Я пытался вставить свою собственную «ширину» во все различные DIV и использовал «! Важное», но даже если FireBug показывает «#leftcolumn div» как зачеркнутый, он все равно влияет на мою панель инструментов DIV.

Независимо от того, как я пытался «обнулить» унаследованную ширину «#leftcolumn div», это все равно влияет на мой DIV. Какие-нибудь подсказки о том, как бы я от этого избавился?

С уважением, Андерс

Ответы [ 2 ]

0 голосов
/ 01 апреля 2012

Проблема 1. Вы пытаетесь разместить горизонтальную док-станцию ​​с максимальной расширенной шириной 263 пикселя (7 значков 48x48) в столбце шириной всего 191 пикселя: док-станция будет переполнена!

Проблема 2. Шаблон, который вы используете, задает определенную ширину 191px для любого div больше, чем на 1 уровень ниже div.module потомка div # leftcolumn. Кроме того, в вашем шаблоне указываются ширина и отступы для некоторых элементов, что может вызвать кросс-браузерную несогласованность, а также заставляет некоторые элементы выходить за границы столбца.

Поскольку jqDock не предоставляет много идентификаторов элементов, правила, необходимые для переопределения вашего шаблона, должны быть как минимум такими же «специфичными», как и шаблоны, если не больше.

Например, замените правила вашей страницы на ...

.sflpage {...}
.sflmenu {...}
#main_bg #leftcolumn div.module_menu div div div,
#main_bg #leftcolumn div.module div div {...}

с ...

/*position the Dock's container, ensuring it's visible, and killing
  the padding imposed by the template...*/
#leftcolumn div.module div div div div.sflpage {
    padding: 0pt;
    position: relative;
    top: -20px;
    width: auto;
    z-index: 9999;
}
/*put the Dock in the center of its container, and give it plenty
  of width for a fully-expanded Dock...*/
#leftcolumn div.module div div div div.jqDocked {
    left: 50%;
    margin-left: -150px;
    padding: 0px 0pt;
    position: absolute;
    top: 0pt;
    width: 300px;
}
/*kill the width and padding imposed by the template...*/
#leftcolumn div.module div div div div.jqDocked div {
    width: auto;
    padding: 0;
}
/*center the dock...*/
#leftcolumn div.module div div div div.jqDocked .jqDockWrap {
    margin: 0pt auto;
}
/*use this to set/tweak the label's styling...*/
#leftcolumn div.module div div div div.jqDocked .jqDockLabelText {
}

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

0 голосов
/ 16 марта 2012

Попробуйте приведенный ниже файл css - вставьте его в свой файл template.css и попробуйте установить ширину, если необходимо, для различных селекторов.

#main_bg #leftcolumn div.module_menu div div div, #main_bg #leftcolumn div.module div div .jqDocked div {
    width: 20px;
}

см. Изображение ниже для вывода: откройте изображение в новом окне, чтобы вы могли четко видеть.

enter image description here

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