HTML and CSS
HTML and CSS
{Лаборатория экстремальной web-верстки...}
Секрет Полишинеля... CSS Hack от Trifler Blog
Секрет Полишинеля...
Собственно и секрета никакого нет. Все премудрости и тайны 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 :)
CSS Hack от Trifler Blog
В большинстве случаев использование хаков в таблице стилей вынужденная мера и без них по большому счету не обойтись.
Собственно говоря, браузеры можно разделить на две группы:
- OPERA, IE6 (7, 8)
- FF, Google Chrome, Safari
В последнее время все чаще начинаю верстку под браузеры второй группы, может быть потому, что для Google Chrome, Safari нет нормальных хаков, да и нужны ли они им.
В тоже время они ведут себя вполне предсказуемо, чего не скажешь об OPERA и семействе IE.
При просмотре наиболее часто употребляемыех мной css хаков, как-то само собой нарисовалась такая табличка.
Совместный хак для OPERA и IE8, может быть полезен, к тому же он короче, чем индивидуальный хак для OPERA, в случае необходимости, для IE8, используем персональный хак.
