Универсальный HTML шаблон (с примером)

Не мало сломано копий, как и каким образом, сверстать макет страницы, удовлетворяющий следующим условиям:

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

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

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

  1. Реализация на слоях, идентичность отображения в IE, FF, CHROME, OPERA
  2. Контент выводится раньше, чем колонки навигации
  3. Не иллюзия, а реально одинаковые по высоте колонки
  4. Footer всегда внизу
  5. Отсутствие JavaScript, правда, для IE6, без expression не обойтись
  6. Независимое использование фона и разделителей для колонок
  7. Минимальные, легко читаемые/понимаемые css и html

 

Давайте посмотрим, что из всего этого получилось.

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

Основной движущей силой нашего шаблона будет идея изложенная мной в Float, margin, padding, overflow:hidden;, естественно мне не принадлежащая.

В конце этой статьи я предоставлю ссылку на готовый пример шаблона!

html

<div id="trifler">
  <div class="header">...</div>
   <div class="center">
    <div class="left">...</div>
    <div class="content">...</div>
    <div class="right">...</div>
    <div class="clear"></div>
   </div>
  <div class="footer">...</div>
</div>

Вот и вся наша страница, теперь дело за стилями.

css

<style type="text/css">
/* start shablon */
#trifler,#gordi {background-color:#fff;border:#a00 1px solid;margin:2px auto;width:912px;}
#gordi {width:712px;}
.header {background:url(../i/logo.png) no-repeat #fff;border-bottom:#a00 5px solid;height:84px;}
.footer {background-color:#fff;border-top:#a00 5px solid;padding-top:15px;height:34px;}
.center {overflow:hidden;}
.content,.left,.right {float:left;margin-bottom:-32767px;padding-bottom:32767px;text-align:left;}
.content {background-color:#fff;width:510px;min-height:540px;}
.left {background-color:#fff;border-right:silver 1px solid;width:200px;}
.right {background-color:#fff;border-left:silver 1px solid;width:200px;}
.clear {clear:both;}
<!--[if IE 6]>
<style type="text/css">
.content {height:expression(((document.documentElement.clientHeight || document.body.clientHeight) < 450)? "auto":"490px");}
</style>
<![endif]-->
/* end shablon */
</style>

Если вы посмотрите внимательно, то наверняка обратите внимание, что в стилях прописан идентификатор #gordi, он нам необходим для двух колоночных вариантов шаблона.

html две колонки

 

<div id="gordi">
  <div class="header">...</div>
   <div class="center">
    <div class="left">...</div>
    <div class="content">...</div>
    <div class="right">...</div>
    <div class="clear"></div>
   </div>
  <div class="footer">...</div>
</div>

Сменив #trifler на #gordi и удаляя из html строки, выделено цветом,

<div class=»left»>…</div>

или

<div class=»right»>…</div>

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

Следует отметить, нет ни одного хака для того или иного браузера, кроме, как expression для IE6, да и без него можно прекрасно обойтись.

Что касается, пункта № 2, то двух колоночный шаблон с правой колонкой навигации, этому условию полностью соответствует. Остальные — тема отдельной публикации.

 

Как я и обещал — предоставляю тебе, мой дорогой читатель, пример универсального HTML шаблона (просто нажми на ссылку и сохрани открытую страницу: Ctrl+S).