Гибридная верстка – гремучая смесь...

Trifler Blog

19 февраля 2009, 15:04

Гибридная верстка – гремучая смесь...

Сочетание float и position:relative/absolute действительно напоминает гремучую смесь. Но на какие только жертвы не пойдешь из-за необъяснимой любви к колонкам одинаковой высоты.

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

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

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

Мог бы, писать и в "гламурном" стиле, про всякие прибамбасы, ценность которых весьма и весьма сомнительна и читателей было бы наверняка по больше и все такое прочее, но что выросло, то выросло.

Хотя еще не вечер :)

Предлагаю сместить акценты и отказаться от порядком набившего оскомину:

margin-bottom:-32767px;padding-bottom:32767px;

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

<body>
<div id="header">Header</div>
<div id="middle">
  <div id="content">Content</div>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div class="left"></div>
  <div class="content"></div>
  <div class="right"></div>
  <div class="fon"></div> <!-- for IE6 --> 
</div>
<div id="footer">Footer</div>
</body>

Что и зачем нужно.

Контейнеры с идентификаторами, рассматривать не будем, тут все понятно.

А вот на блоках с классами left, content, right и fon остановимся более подробно.

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

Первым делом про:

<div class="fon"></div>

Единственная цель на него возлагаемая, спрятать, замаскировать отображение центральных колонок вверх, это касается только IE6, если страница имеет сто процентную высоту с включением header и footer. Без него картина такая, фрагмент макета:

position:relative/absolute

Позиционируя его абсолютно, задавая соответствующую фоновую заливку, закрываем вертикальные border-ы центральных колонок, между ними и header-ом. Для страницы, не имеющей сто процентную высоту в нем и стилях относящихся к нему, нет необходимости. Это также снимет проблему, если у вас для body вместо фоновой заливки идет графика.

Контейнеры :

  <div class="left"></div>
  <div class="content"></div>
  <div class="right"></div>

Обеспечивают равенство колонок по высоте с прорисовкой того или иного border-а.

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

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

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

Дополнительные блоки, ясное дело не украшают, и приветствовать их появление можно с большой натяжкой, но иначе только таблицы :(

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

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

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

Отказ от резиновой разметки в пользу фиксированной из-за особенностей трактовки процентов различными браузерами, OPERA привет :), и абсолютного позиционирования, фиксированный макет выглядит более предпочтительным.

Но все зависит от ситуации и поэтому выбор остается за вами.

Комментарии к этой заметке больше не принимаются.
Все заметки категории «HTML and CSS»

Рейтинг популярности - на эти заметки чаще всего ссылаются:

  1. 1277268923532 position:absolute; Ликбез
  2. 0877996995200 Вертикальное раздвигающееся меню
  3. 0865950425348 Закругленные углы - градиент, html and css
  4. 0838942916744 Hack CSS for IE8
  5. 0831563727184 display:inline-block; and display:inline;
  6. 0688630796544 Фиксированные блоки на web-странице
  7. 0643210485892 max-width и min-width в IE6. Решить за 60 секунд
  8. 0415034819082 Footer всегда внизу. Личный архив
  9. 0380826026240 position:relative;overflow:hidden;border-top; Браузеры
  10. 0292057796608 Вертикальный скролл

banner counters.php

leftcounters
width:160px;
height:160px;

banner counters.php

centercounters
width:160px;
height:160px;

banner counters.php

rightcounters
width:160px;
height:160px;

Горизонтальный banner counters.php - width:494px;

февраль, 2009
пн вт ср чт пт сб вс
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28  
free counters