Подход с плавающими боковыми панелями, используемый в теме Drupal Zen

В теме Drupal Zen я заметил, что боковые панели и основные элементы div перемещаются влево, а поле каждого элемента div возвращается в 0 позицию страницы. Демонстрацию можно посмотреть здесь. Я знаю, что есть много способов добиться одного и того же результата, но мне просто интересно узнать о преимуществах использования этого подхода. Почему бы просто не сделать так, чтобы вторая боковая панель плавала вправо? Заранее спасибо!

#main {
    float: left;
    margin-left: 20%;
    margin-right: -80%;
    width: 60%;
    background-color: #eee;
}

#sidebar-first {
    float: left;
    margin-left: 0;
    margin-right: -20%;
    width: 20%;
    background-color: #FFFF66;
}

#sidebar-second {
    float: left;
    margin-left: 80%;
    margin-right: -100%;
    width: 20%;
    background-color: #FFFF66;
}

​


css drupal drupal-theming drupal-zen
person Mr. 14    schedule 26.07.2012    source источник
comment
Я не уверен на 100%, почему, и результаты могут быть очень похожими, но мне кажется, что это способ постоянно держать элементы на одном уровне друг с другом. Если по какой-то причине контейнер больше, чем его 3 дочерних элемента, между серединой и правом будет разрыв. Это мое мнение, по крайней мере.   -  person Chad    schedule 26.07.2012

Ответы (2)


arrow_upward
0
arrow_downward

Первое, что приходит на ум, это то, что перемещение их всех влево приведет к тому, что каждый контейнер будет прижат к другому. Если бы вторая боковая панель была смещена вправо, а содержащий ее элемент div был бы больше, чем сумма его дочерних элементов, то эта вторая боковая панель оказалась бы на расстоянии от других. Легче сохранить плавность макета, когда все они плавают влево.

Второе, что приходит на ум, и, возможно, более фундаментально важное, это то, что обычно хорошо применять такие вещи, как float и margin, только в одном направлении. Когда все они идут в одном направлении, намного легче следить за ними во время разработки. Наличие полей, которые толкают вниз и вверх, или плавающие, которые перемещаются вправо и влево, просто добавляют путаницы для разработчика.

Есть также некоторые ошибки IE, касающиеся направлений поплавков по отношению к направлениям полей, хотя я не могу их точно вспомнить... думаю, это что-то вроде того, что поля не применяются в тех же направлениях, что и поплавки... поэтому они плавают влево и маржа (?) справа.

P.S.:

Гарри Робертс, мастер CSS, написал отличную статью о том, зачем сохранять поля и все остальное в одно направление.

И первая статья об ошибке IE при добавлении отступа в том же направлении, что и поплавок.< /а>. Проблема в том, что это удвоит маржу в IE5/6. ИМХО, я не думаю, что нам нужно больше проектировать для lte IE6, но, вероятно, лучше всего размещать margin и float в противоположных направлениях.

person Zachary J Rollyson    schedule 26.07.2012

arrow_upward
0
arrow_downward

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

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

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

Я считаю, что эта старая статья A list Apart в целом объясняет используемый метод: http://alistapart.com/article/negativemargins

person bjornmeansbear    schedule 29.03.2015