Спираль времен, закручена не слабо,
Прильнуть к истокам в гонке бытия,
На миг вернуться в прошлое хотя бы…
Вновь обрести и потерять себя…
Gordi

Периодически перечитываю свои старые посты, смотрю предложенные вашему вниманию практические примеры. Многое по прошествии времени кажется забавным и многое, если не все требует коррекции.

Знания, практика, а лозунг блога – “Практика HTML and CSS” никто не отменял, великая не заменимая вещь.

Тема “Иллюзия идеала” оказалась столь захватывающей, что никак не могу остановиться, взять передышку и опубликовать несколько постов на другие не менее интересные темы, хотя черновики давно пылятся в ящике стола - флешке :)

Но пока есть желание и время, хочется докопаться до истины, сделать маленький шажок в верном направлении. В данном случае разговор вновь пойдет о самом главном кирпичике “Техники Gordi” – блоке #middle.

Все начиналось с “Float…”, “Универсального шаблона”, его модернизации, далее - “Время шаблона…”, “Комплект шаблонов” да и в ряде других публикаций линия по выработке концепта прослеживается довольно четко.

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

Сказывается и этот факт, что большинство моих разработок прямо или косвенно используются в скриптах Мастера Lasto. Поэтому, чем разнообразнее глобальная разметка страницы с минимумом html-кода и css, тем лучше для меня самого.

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

У меня нет полной статистики, в каком количестве разошлись по миру те же Lasto Blog, nano-CMS, portator, но то, что встречается, поверьте на слово, это сотни ресурсов, в 99% случаев нет никакого ухода от дефолта, кругом сплошные клоны и это прискорбно.

Уникальный, эксклюзивный дизайн отдельная и не менее интересная история. Но ничто не мешает применить принципы, заложенные в “Технике Gordi” и тут. Возможно, когда-нибудь дам линки на ресурсы сделанные не только мной и там будет на что посмотреть.

Ресурс, с использованием “Техники Gordi”, тестируется Вадимом Николаевичем на предмет респекта поисковиков, думаю, результаты, и их анализ будет им опубликован, о чем непременно будет сообщено дополнительно.

Вернемся к #middle.

Что представлял из себя html-код используемый мной в то время? Посмотрим ради спортивного интереса:

<div class="main">
 <div class="wrap">
   <div class="center">
     <div class="content">MIDDLE Content</div>
   </div>
   <div class="right">MIDDLE Right</div>
 </div>
 <div class="left">MIDDLE Left</div>
</div>

По человечески, да и исторической справедливости ради, стоит отметить, что прототипом послужил предложенный Александром Исаковым (uggallery) макет, впервые опубликованный на webmascon, но к сожалению, автор не пошел дальше, хотя его идея, оказалось весьма перспективной и плодотворной. В общем, респект и пожелание не останавливаться на полпути в будущем :)

Судите сами.

Вот каким он стал после соответствующих манипуляций направленных в сторону, как упрощения html, так и стилей его описывающих:

html

<div id="middle">
  <div class="wrap">
   <div class="content">MIDDLE Content</div>
  </div>
  <div class="right">MIDDLE Right</div>
  <div class="left">MIDDLE Left</div>
</div>

Встречается очень часто, но все фишка в стилях.

css

#middle {
  margin:2px auto;
  overflow:hidden;
  min-width:920px;max-width:960px;
}
*html #middle {width:960px;}
.wrap,.left,.right {
  margin-bottom:-32767px;
  padding-bottom:32767px;
}
.wrap {
  background-color:#fff;
  float:left;
  margin-right:-960px;
  width:100%;
}
.content {padding:0 200px;}
.left {
  background:url(left.png) repeat-y #eee;
  float:left;
  width:200px;
}
.right {
  background:url(left.png) repeat-y #ddd;
  float:right;
  width:200px;
}

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

Остается направить вас на тестовую страницу, ищем ссылку #middle, где есть дополнительные пояснения. Семь вариантов, которые по мановению волшебной палочки предстанут пред вами во всей своей красе. Такой легкости исполнения и трансформации из одного состояния в другое вы вряд ли найдете где-нибудь еще.

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

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