Жизнь так устроена, увы…
 Полны иллюзий дни и ночи,
 Но, а, по сути, только прочерк,
 Есть линия твоей судьбы…
Gordi

Может быть не совсем удачное название для данного контейнера, но куда лучше безликого center. Центр чего? Вселенной? Вы в праве переименовать его, как вам будет угодно, это касается и находящихся в нем блоков.

Но…

Middle. Середина чего-то. Жизни, дня, ночи…

Что-то уже было, что-то еще будет. Нет, есть в этом какой-то не разгаданный, непостижимый смысл бытия. Возможно, настроение сегодня ни к черту или…

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

Не последнюю роль тут сыграла и профессия. Радиоэлектроника, она же в качестве приложения, к сожалению уже в прошлом – хобби.

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

Причем это является всеобщей тенденцией, практически во всех областях и грозит полной унификацией.

Куда катится мир :)

И, что тогда придется делать бедному верстальщику? Поживем, увидим.

А в качестве примера, внимательно посмотрите на свой компьютер, вернее его нутро, возможности апргейда практически безграничны, а блочно-модульный принцип, заложенный в него, всем только в радость.

Но обо всем по порядку.

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

В качестве практически идеального модуля предлагаю вашему вниманию такую конструкцию. В ней есть, на сколько мне пока известно, только один минус, но об этом чуть позже в заключительной части цикла "Иллюзия идеала". Буду рад, если вы примете не посредственное участие в тестировании не только в самых популярных браузерах OPERA 9.xx, FF2.xx(3), IE6(7). Что мной, в общем-то, уже сделано, но и более, экзотических и выскажете свое мнение по этому поводу.

html-код блока middle:

 <div id="middle">
    <div class="wrap">
      <div class="main">
          <div class="center">
            <div class="content">Center</div>
          </div>
          <div class="left">Left</div>
      </div>
    </div>
    <div class="right">Right</div>
  </div>

Все встречалось бесчисленное количество, раз и уже давно стало классикой жанра. Так, что подробно останавливаться на html нет особых причин.

Лучше обратимся к стилям описывающих его поведение.

css

* {margin:0;padding:0;}
body {background-color:#fff;font:11px;tahoma,arial,serif;padding:top:150px;position:pelative;}

#middle {margin:0 auto;overflow:hidden;min-width:780px;max-width:960px;}

#middle .wrap {margin-right:-200px;}
#middle .main {margin-right:200px;}
#middle .center {margin-left:-200px;}
#middle .content {margin-left:200px;padding-top:10px;}
#middle .left {background:url(../i/left.png) repeat-y #eee;width:200px;}
#middle .right {background:url(../i/right.png) repeat-y #ddd;width:200px;}

.wrap,.center,.content,.left,.right {margin-bottom:-32767px;padding-bottom:32767px;}
.wrap,.center {width:100%;}
.wrap,.left {float:left;}
.center,.right {float:right;}

*html #middle {width:960px;}
*html .content {zoom:1;}

Часть из них определяющие внешнюю сторону оформления блока middle вам встречалась в предыдущем посте. Рассмотрим более подробно внутреннюю часть.

Следующие строки таблицы стилей определяют общие правила поведения слоев, а именно - #header,#middle,#footer. В ней ничего трогать не надо. Мог бы конечно объяснить, что и почему, куда и зачем, но с практической точки зрения не вижу никаких оснований рассказывать об этом.

.wrap,.center,.content,
.left,.right {margin-bottom:-32767px;padding-bottom:32767px;}
.wrap,.center {width:100%;}
.wrap,.left {float:left;}
.center,.right {float:right;}

Другая часть:

#middle .wrap {margin-right:-200px;}
#middle .main {margin-right:200px;}
#middle .center {margin-left:-200px;}
#middle .content {margin-left:200px;padding-top:10px;}
#middle .left {background:url(../i/left.png) repeat-y #eee;width:200px;}
#middle .right {background:url(../i/right.png) repeat-y #ddd;width:200px;}

Строго индивидуальна для блока middle и определяет ширину колонок и заливку фоном или возможность использования графики через background:url(../i/right.png) repeat-y #ddd;

Ширина левой и правой колонок по дефолту имеют одинаковую ширину 200px, а центральная колонка занимает все оставшееся место.

Чтобы изменить ширину боковых колонок, надо поменять некоторые параметры. Это никоим образом не говорит о том, что они должны быть одинаковой ширины. Эти же параметры позволяют легко прейти к варианту двух колоночного макета с удалением из html-кода соответствующей колонки правой или левой и корректировкой значения max-width, если потребуется.

Теперь вертикальные линии, что отделяют область контента от колонок отведенных под навигацию и рекламные блоки. Обращаю ваше внимание, что это обычный border и прописывать его необходимо только контейнеру с классом content.

В IE6 блок middle имеет фиксированную ширину. Но через width:expression проблема легко решается. Просто не много достал "любимый" браузер, вот его и приструнил :)

С целью уменьшения объема файла стилей управление оформлением border-а вынесено в отдельную секцию, что в конечном итоге дает легкую и быструю смену цвета, вам не понадобится рыскать по всему файлу стилей в поисках, где же еще надо править цвет border-а. Имя класса может быть и другим.

.bord {border:1px solid #000;} /* border */
.bordt {border-top:1px solid #000;} /* border-top */
.bordr {border-right:1px solid #000;} /* border-right */
.bordb {border-bottom:1px solid #000;} /* border-bottom */
.bordl {border-left:1px solid #000;} /* border-left */

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

Часто используется Мастером Lasto. Подсмотрено при разборке табличных завалов в Gold Shop-е, и попытке перевести его на не табличное представление. Правда работа еще не закончена, что, в общем-то, связанно с разметкой и имеет прямое отношение к представленному вашему вниманию циклу публикаций.

Известный прием, почему-то всегда о нем забываю, хотя и отметился постом по поводу.

Смотрим примеры. Сравнив html-код и стили трех примеров, вы увидите, что необходимо изменить для получения того или иного варианта отображения блока middle. Стили и html будут или удалены или закомментированы.