| февраль, 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 | ||||
Собственно и секрета никакого нет. Все премудрости и тайны html и css, очень часто не стоят подробных описаний и примечаний чуть ли не каждой строчке кода.
Важна первоначальная идея и ее голое воплощение в примере.
Обладающим определенным опытом все будет понятно буквально с листа, не посвященным чуть труднее, но внимательный разбор тестовой страницы даст свои плоды и еще один пробел в знаниях легко устраняется и в будущем подобного рода приемы и методы помогут в решении более сложных проблем.
Многие задают вопрос, каким образом устранить не совсем адекватное поведение OPERA из одной предыдущей публикации.
Речь шла о размещении дополнительных блоков в колонках центральной части шаблона, которые всегда находятся внизу данных колонок.
Проблемный html-код:
<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>
Минимальные изменения:
<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 class="footer_content">Блок content bottom</div>
</div>
<div class="border_right">
<div class="footer_right">Блок right bottom</div>
</div>
</div>
<div id="header">Header</div>
<div id="menus>Горизонтальное меню</div>
</body>
Естественно, это влечет за собой правку стилей:
.footer_content,.footer_right {bottom:40px;}
.footer_content {left:3px;}
.footer_right {right:2px;}
Вот так простенько лечим 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/;}
что по вполне понятным причинам может быть «х...».
Вот такие они новости на букву «х...» ;)
Что и говорить, но мой самый не любимый браузер, снова облажался по полной программе.
Захотелось мастеру Горди экзотики, а фантазер он в этих делах изрядный, макетик нарисовать сто процентной высоты, все по простенькому ТЗ, кратенькому такому – сущий мизер с бонусом хитрым.
Как всегда для этих целей используем:
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, тут не грех, хотя и не велико сиё удовольствие, но иногда довольно трудно оказаться от представленной возможности, где она, так не хило подставляется в очередной раз :)
Горизонтальный 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 | ||||