OPERA и абсолютное позиционирование...

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

17 февраля 2010, 02:23

Что и говорить, но мой самый не любимый браузер, снова облажался по полной программе.

Захотелось мастеру Горди экзотики, а фантазер он в этих делах изрядный, макетик нарисовать сто процентной высоты, все по простенькому ТЗ, кратенькому такому – сущий мизер с бонусом хитрым.

Как всегда для этих целей используем:

margin-bottom:-32600px;padding-bottom:32600px;

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

Проблема нижнего border’a, тоже особо не волнует, подумаешь пара-тройка дополнительных контейнеров, кого этим не испугаешь :)

Пишут же весьма уважаемые "гуру" после float-колонок такое:

<div class="clear"></div>

И в ус не дуют :)

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

clear:both;

отсутствует, потому как нет в том необходимости.

Итак, техническое задание:

100% процентная высота макета
Иллюзия равной высоты колонок центральной части
Фоновая заливка и border, у все колонок и блоков - индивидуальны
Область контента выводится раньше колонок навигации
Header вкупе с горизонтальным меню по html-коду ниже всего
Бонус – в колонках центральной части имеются контейнеры, которые всегда находятся внизу оных, причем при наполнении информацией растут они вверх, понятно, что ограничение на их высоту имеется, как без него :)

html-код двух колончного макета - "Content-Right":

<body>
<div id="middle">
  <div class="content">
    <div class="bottom_content">Content</div>
  </div>
  <div class="right">
    <div class="bottom_right">Right</div>
  </div>
</div>
<div id="footer">
  Footer
  <div class="border_content"></div>
  <div class="border_right"></div>
  <div class="footer_content">Блок content bottom</div>
  <div class="footer_right">Блок right bottom</div>
</div>
<div id="header">Header</div>
<div id="menus>Горизонтальное меню</div>
</body>

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

То, что в зеленом цвете это и есть блоки, расположенные в низу колонок, также используя position:absolute; выставляем с необходимым зазором над footer’ом, по месту.

А вот синие контейнеры, соль фишки.

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

Стили для них таковы:

.bottom_content {margin-bottom:95px;}
.bottom_right {margin-bottom:325px;}

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

А где про OPERA, спросите вы?

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

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

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

А попинать OPERA, тут не грех, хотя и не велико сиё удовольствие, но иногда довольно трудно оказаться от представленной возможности, где она, так не хило подставляется в очередной раз :)

Комментарии к этой заметке больше не принимаются.

Все заметки категории «HTML and CSS»

февраль, 2010

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