| февраль, 2012 | ||||||
| пн | вт | ср | чт | пт | сб | вс |
| 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 | 29 | ||||
Что и говорить, но мой самый не любимый браузер, снова облажался по полной программе.
Захотелось мастеру Горди экзотики, а фантазер он в этих делах изрядный, макетик нарисовать сто процентной высоты, все по простенькому ТЗ, кратенькому такому – сущий мизер с бонусом хитрым.
Как всегда для этих целей используем:
margin-bottom:-32600px;padding-bottom:32600px;
То, что не будут работать метки-якоря, бог с ним, кому они нужны по большому-то счету.
Проблема нижнего border’a, тоже особо не волнует, подумаешь пара-тройка дополнительных контейнеров, кого этим не испугаешь :)
Пишут же весьма уважаемые "гуру" после float-колонок такое:
<div class="clear"></div>
И в ус не дуют :)
А вот у меня вы этого практически не найдете, в стилях для глобальной разметки web-страницы даже упоминание:
clear:both;
отсутствует, потому как нет в том необходимости.
Итак, техническое задание:
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, тут не грех, хотя и не велико сиё удовольствие, но иногда довольно трудно оказаться от представленной возможности, где она, так не хило подставляется в очередной раз :)
В большинстве случаев использование хаков в таблице стилей вынужденная мера и без них по большому счету не обойтись.
Собственно говоря, браузеры можно разделить на две группы:
В последнее время все чаще начинаю верстку под браузеры второй группы, может быть потому, что для Google Chrome, Safari нет нормальных хаков, да и нужны ли они им.
В тоже время они ведут себя вполне предсказуемо, чего не скажешь об OPERA и семействе IE.
При просмотре наиболее часто употребляемыех мной css хаков, как-то само собой нарисовалась такая табличка.
Совместный хак для OPERA и IE8, может быть полезен, к тому же он короче, чем индивидуальный хак для OPERA, в случае необходимости, для IE8, используем персональный хак.
С появлением IE8 практически отпала необходимость в индивидуальных стилевых правилах для очередного детища Microsoft, но так уж повелось, рано или поздно наступает момент, когда приходится, каким либо способом отделять разные версии браузеров - одну от другой.
Поиск не дал удовлетворительного результата, то что, было, найдено никак не могло быть истиной в последней инстанции.
В частности FireFox 3.5 понимает данную конструкцию:
.class {color /*\**/: #00f\9;}
Пришлось самому взяться за это не благодарное дело.
Удивительное рядом - мастер Горди в роли хакер, вот и представить себе не мог, что докачусь до такого :)
Хотелось получить легко запоминающуюся вещицу на подобие звездного хака для IE6 - *html.
Но тут вышла полная ерунда ;=(
В конце концов, задача была решена следующим образом:
.class {color:#00f\0/;}
Пример вам все покажет, краткие пояснения там присутствуют.
Горизонтальный banner counters.php - width:494px;
| февраль, 2012 | ||||||
| пн | вт | ср | чт | пт | сб | вс |
| 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 | 29 | ||||