28 марта 2009, 19:29

Танцы с волками…

Сильно, конечно сказано…

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

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

Говорить о негативе в рамках сегодняшнего поста не буду, все проблемы с младшими версиями IE, ушли в условные комментарии (CC), там им, в общем-то, и место.

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

При создании иллюзии равной высоты колонок с использованием:

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

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

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

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

Вот и попробуем вместо position:absolute; поиграть с отрицательными отступами.

Также вернемся к псевдо эмуляции min/max-width, писал и об этом, ищем и находим.

С чем будем работать?

Пример всего один, иное размещение колонки (колонок) отведенных под навигацию делаем по аналогии.

<body>
  <div class="main">
    <div class="header">Header</div>
    <div class="middle">
      <div class="content">Content</div>
      <div class="left">Left</div>
    </div>
    <div class="left_a"></div>
    <div class="content_a"></div>
    <div class="footer">Footer</div>
  </div>
</body>

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

<style type="text/css">
* {margin:0;padding:0;}
html, body {height:100%;}
body {
  background-color:#eee;margin:0 4%;
  padding:0 0 0 614px;position:relative;
}
.main {margin:0 0 0 -614px;height:100%;}
.middle {
  background-color:#eee;overflow:hidden;
  margin-top:-150px;margin-bottom:5px;
  padding-left:204px;min-height:100%;
}
.content,.left {
  margin-top:150px;margin-bottom:-32767px;padding-bottom:32767px;
}
.content {
  background-color:#fff;border:#00f 1px solid;
  float:right;width:99%;
}
.left {
  background:#edd;border:#a00 1px solid;
  float:left;margin-left:-204px;width:200px;
}
.header {
  background:#ee9;border:#000 1px solid;
  overflow:hidden;position:relative;top:0px;
  margin-bottom:3px;zoom:1;height:100px;
}
.footer {
  background:#9ee;border:#000 1px solid;
  overflow:hidden;margin-top:3px;height:40px;
}
.content_a,.left_a {overflow:hidden;}
.content_a {
  border-bottom:#00f 1px solid;margin:-1px 0 0 210px;
}
.left_a {
  border-bottom:#a00 1px solid;margin:-5px 0 0 1px;width:200px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.main {height:auto;}
*html .main {display:inline;zoom:1;}
*html .middle {zoom:1;}
*html .left {margin-left:-102px;height:415px;}
.content_a {margin:-20px 0 0 209px;}
*html .content_a {margin:-0 0 0 209px;}
.left_a {margin:-25px 0 0 1px;}
</style>
<![endif]-->

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

Единственно, что не удалось, так это сто процентная высота макета в IE6.