HTML and CSS
HTML and CSS
{Лаборатория экстремальной web-верстки...}
Новости на букву «х...» OPERA и абсолютное позиционирование...
Новости на букву «х...»
Вариации на тему – «Есть две новости - первая плохая, вторая хорошая», как нельзя лучше соответствуют ожиданиям web-верстальщиков. Выход свежей версии практически любого популярного браузера довольно часто приводит к переоценке, казалось бы, незыблемых, прочно устоявшихся решений.
Русский язык богат на все возможные выражения позитивных и негативных эмоций, состоящие из одного слова, вот и будем сегодня использовать для этого поста парочку слов начинающихся на букву «х...».
Вместо многоточия вы можете довольно легко и просто самостоятельно найти и подставить нужное в том или ином случае продолжение.
По ряду причин мастер Горди лишен возможности без лишних телодвижений, использовать горячо «любимый» IE6. Нет, понятно, что, достав еще один ноут, который давно пылится на полке проблему можно решить очень просто, но три компа на рабочем столе явный перебор.
Наличие флешки, во многом упрощает перенос информации с одного компьютера на другой, что «х...», но неизбежные в этом случаи потери времени говорят о том, что это «х...».
Выход OPERA 10.50 (10.51) привел к тому, что часто используемый css хак:
@media all and () {.XXX {color:#F00;}}
прекрасно работающий в OPREA 9.64 (10.10), новыми версиями не поддерживается, что как вы понимаете «х...».
Совместный css хак для OPERA и IE8 собственного изобретения:
.XXX {color:#F00\0;}
многое упрощает, что «х...», но часто приводит к дополнительным записям в файле стилей css хака, конкретно для IE8, найденного мной:
.XXX {color:#F00\0/;}
что по вполне понятным причинам может быть «х...».
Вот такие они новости на букву «х...» ;)
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, тут не грех, хотя и не велико сиё удовольствие, но иногда довольно трудно оказаться от представленной возможности, где она, так не хило подставляется в очередной раз :)
