HTML and CSS
HTML and CSS
{Лаборатория экстремальной web-верстки...}
OPERA и абсолютное позиционирование... Северная "ведьма" или пинок под зад...
OPERA и абсолютное позиционирование...
Что и говорить, но мой самый не любимый браузер, снова облажался по полной программе.
Захотелось мастеру Горди экзотики, а фантазер он в этих делах изрядный, макетик нарисовать сто процентной высоты, все по простенькому ТЗ, кратенькому такому – сущий мизер с бонусом хитрым.
Как всегда для этих целей используем:
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, тут не грех, хотя и не велико сиё удовольствие, но иногда довольно трудно оказаться от представленной возможности, где она, так не хило подставляется в очередной раз :)
Северная "ведьма" или пинок под зад...
Кто бы, что не говорил, но "норвежская красавица" - OPERA, браузер не классический, и чем чаще с ним работаю, тем больше мое мнение об его способностях верно работать с самыми простыми стилевыми правилами подвергается вполне обоснованным сомнениям.
Пришлось, как-то делать простую, обычную казалось бы вещь.
Скриншот
ТЗ проще не куда:
- Плавающая ширина всех колонок.
- Колонки равной высоты.
- Header и горизонтальное меню по ширине вровень с областью контента.
- Все блоки и колонки имеют индивидуальные по цвету - border и фоновую заливку.
- Сто процентная высота макета.
Так как метки-якоря в данном случае не предусмотрены, то для создания иллюзии одинаковой высоты колонок, принято решение использовать:
margin-bottom:-32767px;padding-bottom:32767px;
Тут надо сделать маленькое отступление.
Многие верстальщики предпочитают начинать верстку в самых продвинутых браузерах. У меня же несколько иной подход.
Все начинается в проблемных – IE6(7) и уж когда все доведено до ума, то просмотр в наиболее популярных и не значительная корректировка часто сводящаяся к переносу некоторых стилевых правил для IE6(7) в секцию хаков.
Единственным исключением является OPERA. Она в списке самая последняя и всегда жду от нее подвоха. Причем, мало что меняется от версии к версии, а это печально :(
Так случилось и на этот раз.
Говорить о том, что проценты это головная боль верстальщика нет никакого смысла и без индивидуальных стилевых правил практически под каждый браузер при любом раскладе не обойтись, но задача и не ставилась в данном конкретном случае добиться чуть ли не по пиксельной точности.
А вот поднять правую колонку на уровень header без пинка под зад "горячо" любимой OPER’е не удалось :)
Не привожу ни html-кода ни стилей.
На примерах все достаточно наглядно и убедительно показано и они говорят сами за себя.
Пример № 1 – в OPER’a бесконечная вертикальная прокрутка.
Пример № 2 - везде все в норме, если не считать погрешностей в интерпретации процентных величин различными браузерами.
