Заметки об HTML, CSS, AJAX, DOM, PHP, MySQL и многом другом

Иногда бывает нужно сделать два блока, у которых будут стыковаться между собой рамки. (Типичная ситуация — заголовок, у которого рамка имеет один цвет, а текст под ним обрамлен рамкой другого цвета, и при этом вся конструкция должна восприниматься как едиое целое). Типичный подход в такой ситуации — использование трех тегов div примерно такого вида:

<div>
<h1 style="border: #ccc 1px solid">Заголовок</h1>
<div style="border: #888 1px solid; border-top: 0">Текст</div>
</div>

Однако имеется более элегантное решение, позволяющее уменьшить число DOM-элементов:

<div style="border: #888 1px solid">
<h1 style="border: #ccc 1px solid; margin: -1px">Заголовок</h1>
Текст
</div>

Кроме того, такое решение удобно и тем, что не требует дублировать общие свойства CSS (например, выравнивание) для двух различных селекторов (внутреннего div и h1 в первом примере), их можно задавать только для внешнего divа.

В MSIE 6, как известно, свойство position: fixed не работает. Решается эта проблема с помощью expression:

#intb #leftmenu { position: absolute; top: expression( eval(document.documentElement.scrollTop+смещение) + "px");}

(Важно отметить, что рекомендация eval(document.body.scrollTop), которая дается в некоторых источниках, не работает в IE6 в режиме соответствия стандартам.) Чтобы блок при прокрутке не дергался, можно задать фиксированный фон для тега body. Помещаем это в условные комментарии и получаем следующее (при смещении 200px):

<style type="text/css"><!--
#intb #leftmenu { position: fixed; left: 0; top: 200px }
-->
</style>

<!--[if lt ie 7.0]>
<style type="text/css">
body { background: url('spacer.gif') no-repeat;  background-attachment: fixed; }
#intb #leftmenu { position: absolute; top: expression( eval(document.documentElement.scrollTop+200) + "px"); }
</style>
<![endif]-->

Основные идеи были заимствованы отсюда: http://www.artlebedev.ru/tools/technogrette/html/fixed_in_msie/

Об скругленных уголках на сайтах написано достаточно много. Но почти все примеры предназначены для ситуаций, когда либо фон блока, либо область, поверх которой расположен блок, являются однородными. Но бывают ситуации, когда фон блока является градиентным, а область — неоднородной (например, содержит какую-нибудь сетку).

В этом случае внешняя часть уголка делается прозрачной, внутренняя — закрашивается соответствующим градиентом, также делается полоска шириной в 1 пиксель для части блока, которая оказывается между уголками. Все это вставляется с помощью следующей CSS-конструкции:

<div id="block">
<div id="topline"><div><div></div></div></div>
Здесь идет контент блока<
div id="bottomline"><div><div></div></div></div>
</div>

Слои с помощью CSS описываются следующим образом:

#topline, #bottomline { font-size:0 }
#topline div, #bottomline div { margin: 0 0 0 19px }
#topline div div, #bottomline div div { margin: 0 19px 0 0; height: 20px } 

#topline { background-image: url('upload/lockey/corn_tl.gif'); background-repeat: no-repeat }
#topline div { background-image: url('upload/lockey/corn_tr.gif'); background-position: right; background-repeat: no-repeat; }
#topline div div { width: 732px; background: url('upload/lockey/topline.gif') #FFF; background-repeat: repeat-x } 

#bottomline { background-image: url('upload/lockey/corn_bl.gif'); background-repeat: no-repeat }
#bottomline div { background: url('upload/lockey/corn_br.gif'); background-position: right; background-repeat: no-repeat }
#bottomline div div { width: 732px; height: 20px; background: #000 }

Здесь corn_?? — это файлы уголков (top, left, bottom, right сокращаются по первым буквам соответственно) . Также возможно попытаться оптимизировать код, объединив некоторые div (например, вместо второго div в topline можно использовать сам #block), а также уменьшить количество обращений к серверу за счет объединения нескольких файлов с уголками в один.

Часто требуется сделать так, чтобы “подвал” страницы отображался в самом ее низу даже в тех случаях, когда на странице мало контента. Реализуется это следующим образом: в CSS тегам body и html присваивается высота 100%.

Далее основной контент берется в один блок div (назовем его content), “подвал” — в другой (назовем его footer). Блоку content присваивается минимальная высота (min-height) 100%, для footerа высота задается явно. Нижнее поле блока content задается равным высоте footerа, а для самого footerа верхнее поле указывается в 2 раза больше, чем его высота.

В результате получаем следующий код:

<html><head><style type="text/css"><!--
html { height: 100%; }
body { height: 100%}
#content { min-height: 100%; margin-bottom: 50px }
* html #content { height: 100% } /* Это для Internet Explorer, который не воспринимает min-height */
footer { height: 50px; position: relative; margin-top: -100px; }
--></style></head>
<body>
<div id="content">
Здесь находится основное содержимое
</div>
<div id="footer">
А это подвал сайта
</div>
</body></html>

Советы: 1) для того, чтобы подвал масштабировался при изменении размера шрифта в броузере, поля и высоту имеет смысл задавать не в пикселях, а в относительных единицах (em);
2) нижнее поле у body должно быть равно нулю (типичная ошибка — использование конструкций вида body { 5px 10px}, которые добавляют не только верхнее, но и нижнее поле).