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

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

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

Давайте посмотрим, из чего в общем случае состоит 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-а, который всегда внизу не рассматривается, высказывался по этому поводу, ничего принципиально не изменилось :)

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

Может быть один взгляд назад,
Мне откроет в будущее глаза...
"Один взгляд назад"
К. Никольский

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

Есть что-то притягательное во всем этом :)

Вагон и маленькая тележка дополнительных контейнеров, наводят тоску и грусть, но как иначе победить IE6? Дело даже не в том, что есть другие методы и приемы, просто смутная не удовлетворенность, почему имея такой мощный инструмент - "Каскадные таблицы стилей" и не используя ничего другого, не находится оптимального решения этой задачи.

В принципе ничего нового, упор сделан на максимальное упрощение html и css.

Не значительная особенность – в роли одного из контейнеров используется body.

css

* {margin:0;padding:0;}
html {background-color:#ccc;}
body {
  background-color:#fff;
  border:#000 1px solid;
  margin:5px 10%;
  padding:230px 0 0 500px;
}
.box {margin:-230px 0 0 -500px;padding:5px 0;}
*html .box {float:right;}
p {margin:5px 10px;}

html

<body>
  <div class="box">
    <p>TEXT</p>
  </div>
</body>

Тест-страница живет здесь. Меняем размер шрифта. Играем с размерами окна браузера. Поклонники OPER-ы отдыхают, с ее дурной привычкой масштабировать всё и вся :)

Осталось набросать простенький шаблон, чтобы оценить, стоит ли овчинка выделки :)

Может, кто-то я не знаю,
Смысл иной во всем постиг,
Может истина иная…
"От любви к любви"
К. Никольский

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

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

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

Следует отметить, что автор предпочитает фиксированную разметку c фиксированным размером шрифта, что на мой взгляд, дает если не полный контроль над страницей, то по крайне мере сохраняется иллюзия оного :(

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

Так же стоит остановиться на вопросе минимальной ширины в "резиновом" макете шаблона, тут есть ряд ограничений связанный с отображением графики и блоков с фиксированной шириной – таблицы, всевозможный формы и т.д.и т.п. Мало кому понравится, если нужная информация будет тупо обрезана при уменьшении размеров окна браузера ;)

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

Пример: 3 колонки – на всю ширину окна браузера

P.S. Контент выводится раньше боковых колонок. Проблема footer-а всегда прибитого к низу окна браузера, в данном случае, не рассматривается, хотя соответствующее решение имеется. Одно из самых простых и лучших, на все случаи жизни, пишите хорошо и много ;)