Пустые споры, слов туман, 
Дворцы и норы, свет и тьма, 
И облегченье лишь в одном, 
Стоять до смерти на своем...
"В моей душе осадок зла"
К. Никольский

Как и было обещано…

Но прежде, чем перейти к шаблону, не много ликбеза :)

Давайте посмотрим, из чего в общем случае состоит web-страница:

1. Шапка (HEADER)
2. Горизонтальное меню(может отсутствовать)
3. Центральная часть
4. Подвал (FOOTER)(может отсутствовать)

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

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

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

1. Одна колонка – только контент
2. Две колонки - колонка под вертикальное меню, слева от области контента
3. Две колонки - колонка под вертикальное меню, справа от области контента
4. Три колонки - область контента находится между колонками с меню
5. Три колонки - контент и две колонки с меню справа от области контента

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

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

Представление html-кода – контент идет раньше боковой колонки. Такая структура представляется оптимальной не только с точки зрения SEO, но и при отключенных стилях. Область контента резиновая, причем для этих целей мы не будем использовать ни JavaScript, ни expression для IE6, эмуляция max/min-width и min-height для основных браузеров, только на css.

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

1. max-width и min-width в IE6. Решить за 60 секунд
2. min-height, min/max-width для IE6. Макет шаблона
3. Забавные метаморфозы. Когда умрет IE6?

css

* {font:11px/1.18 verdana,arial,helvetica,sans-serif;margin:0;padding:0;}

html {background-color:#eee;}
body {margin:5px 7%;padding:0 0 0 720px;}
#trifler {margin:0 0 0 -720px;position:relative;}
*html #trifler {float:right;}
#header {
  background-color:#f9f9f9;
  border:silver 1px solid;
  border-bottom:0;
  height:100px;
}
#header h2 {
  color:#aaa;
  cursor:default;
  font:bold 25px georgia,Helvetica,sans-serif;
  margin:0 0 0 40px;}

.main {border:silver solid;border-width:0 1px;}
.main,.center,.left {overflow:hidden;zoom:1;}
.wrap,.center {background:#fff;width:100%;}
.wrap,.left {float:right;margin-bottom:-32767px;padding-bottom:32767px;}
.center {padding-top:500px;}
.content {margin-top:-500px;padding-left:200px;zoom:1;}
*html .content {float:left;}
.left {
  background:url(../i/left.gif) repeat-y #fbfbfb;
  margin-right:-200px;
  width:200px;}

.footer {
  background-color:#fbfbfb;
  border:silver 1px solid;
  clear:both;
  padding:5px 0;
  position:relative;
  text-align:center;
  height:28px;
}
/* start banner */
.boxleft{background:#ddd;color:#000;position:absolute;left:4px;top:4px;width:88px;height:31px;}
.boxright{background:#ddd;color:#000;position:absolute;right:4px;top:4px;width:88px;height:31px;}
.boxleft1 {background:#eee;color:#000;position:absolute;left:94px;top:4px;width:88px;height:31px;}
.boxright1 {background:#eee;color:#000;position:absolute;right:94px;top:4px;width:88px;height:31px;}
/* end banner */
.tmenu {
  background-color:#f9f9f9;
  border:silver 1px solid;
  padding:8px 0;
  text-align:center;
  height:16px;
}
p {margin:3px 10px;text-indent:1em;}

При внимательном изучении стилей вы не увидите упоминания об max/min-width и min-height. Хотя для тех, кто понимает можно было бы отдать эти правила, но это привело бы к проблеме более точного подбора размеров, что не оправданно трудоемко, о чем справедливо было замеченно в комментариях к одному из ранее опубликованных материалов. Поэтому все решено в едином ключе.

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

body и блок с идентификатором trifler организуют необходимую нам эмуляцию max/min-width, выделено синим.

Реализация min-height осуществляется указанием стилевых правил классам: center и content, выделены зеленым.

*html .content - параметр выделен красным цветом, стилевое правило для IE6, без его указания эмуляция min-height в этом браузере не работает.

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

html

<body>
  <div id="trifler">
    <div id="header"><h2>HEADER</h2></div>
    <div class="tmenu">Горизонтальное меню</div>

    <div class="main">
      <div class="wrap">

        <div class="center">
          <div class="content">
            <p>CONTENT</p>
          </div>
        </div>

      </div>

      <div class="left">
        <p>LEFT</p>
      </div>

    </div>

    <div class="footer">
      <div class="boxleft">box Left<br>Счетчик</div>
      <div class="boxleft1">box Left1<br>Баннер</div>
      FOOTER
      <div class="boxright">box Richt<br>Баннер</div>
      <div class="boxright1">box Richt1<br>Счетчик</div>
    </div>

  </div>
</body>

Все предложенное работает в FF2.0.11, OPERA9.23, IE6(7). Хотелось бы написать и в Safari303beta/WIN, но воздержусь, там через раз, видимо интеграция в OC пока подводит :)

Пример

К достоинствам шаблона можно отнести, его хорошую повторяемость и устойчивость, все, что будет шире области контента при установленном вами min-width - фото, графика, блоки с фиксированной шириной более 500px, как в данном случае, безжалостно обрезаются. Нет переноса колонок при уменьшении размеров окна браузера по горизонтали. Присутствует иллюзия одинаковой высоты колонок – независимо от наполнения любой из них, border разделяющий колонки, просто background-color: или фон пущенный графикой - всегда растягивается до высоты самой высокой колонки.

Проблема footer-а, который всегда внизу не рассматривается, высказывался по этому поводу, ничего принципиально не изменилось :)

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