YUI Grid CSS для страницы шириной 100% с настраиваемой шириной шаблона

Question

Я использую сетки пользовательского интерфейса Yahoo для структурирования большинства своих страниц. Одна из моих страниц - карта Google, и мне нужно около 400 пикселей фиксированного левого столбца, чтобы поместить информацию легенды карты. Однако сетки YUI предлагают только 3 столбца для 100% макетов страниц, а именно 160px, 180px и 300px.

Есть ли способ, которым я могу настроить их 'шаблон 3', который обеспечивает столбец 300px, чтобы получить мой столбец 400px, который мне нужен?

Answer 1

Я решил, как это сделать. Слава Нейту на форумах YUI за то, что он указал мне правильное направление.

Чтобы установить фиксированный левый столбец, вам нужно разделить ширину пикселя столбца на 13, чтобы определить их для всех браузеров, отличных от IE. Для IE, разделите ширину столбца на 13,3333

например. желая фиксированной ширины 480px, 480/13 дает мне 36,9231em для не IE, а 480 / 13,33 - точно 36em для IE

Используя шаблон 3, CSS выглядит так:

.yui-t3 .yui-b {
  float: left;
  width: 12.3207em; *width: 12.0106em;
}

.yui-t3 #yui-main .yui-b {
  margin-left: 36.9231em; *margin-left: 36em;
}

Кроме того, если вы хотите настроить поля, например нулевое поле, вы можете сделать что-то вроде:

#doc3 {
  margin: auto 0;
}

Сетки в YUI 3 в настоящее время устарели - немного шокировало, когда я это увидел. В июле будут некоторые браузеры, которые исключают категорию A, и в результате гриды будут переработаны, учитывая, что некоторые из первоначальных проектных решений были основаны на старых браузерах.

Answer 2

Определенно есть способ. Я думаю, что нужно просто настроить CSS, чтобы добавить еще один столбец размером 400 пикселей или изменить существующий столбец в соответствии с вашими потребностями. Если вы добавляете другой столбец, не забудьте учесть дополнительную ширину (плюс поле) и либо уменьшите ширину для других элементов, либо увеличьте ширину содержащего вас элемента.

Если макет использует 100% ширину браузера, ширина может не быть проблемой, но если ваш контент обернут в элемент контейнера, который содержит все ваши столбцы, обязательно настройте существующие элементы, чтобы они соответствовали размер вашей новой колонки.

РЕДАКТИРОВАТЬ: Также, если вы имеете дело с макетами шириной 100%, вероятно, лучше размер столбцов, используя процент, а не фиксированный размер пикселя. Поскольку содержащий элемент для ваших столбцов будет экраном пользователя, если вы используете процент, размеры столбцов должны корректироваться относительно их разрешения / размера окна.

Если вы хотите, чтобы ваш новый столбец отображался слева от других ваших столбцов, обычно вы помещаете его перед остальными столбцами в разметке и применяете свойство "float: left". Но взгляните на то, как настроены другие столбцы в CSS YUI, и следуйте их методу.

Надеюсь, это поможет.

Acorn