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

Закругленные или фигурные углы блока в настоящее время — один из самых распространенных элементов дизайна. Решений существует множество и на CSS, и на JavaScript, но большая их часть либо требует большого количества лишних пустых тегов и несемантичной верстки, либо позволяет закруглять углы только блоков с фиксированной высотой или с однородным фоном самого блока и страницы под ним.

Однако есть универсальное решение этой проблемы, которое может применяться в решениях любой сложности. Выглядит оно следующим образом: над блоком с контентом, которому нужны углы, добавляем два блока, высота которых равна радиусу скругления, с горизонтальными полями (margin), также равными отступу. Фон этого блока по цвету совпадает с фоном блока контента. Внутри этого блока помещаем еще два блока, у первого из которых отрицательным является левое поле, у второго — правое (величина отступа опять же равна радиусу скругленного угла). Для этих углов задаем фоновые картинки и отменяем фоновый цвет.

Далее идет блок с контентом, после которого вставляется еще один блок, полностью аналогичный верхнему, но углы скруглены вниз. Далее…

Иногда при использовании абсолютного позиционирования возникают ситуации, когда в Internet Explorer 6 элемент позиционируется не относительно контейнера, а относительно всей страницы в целом (точнее относительно элемента, в который вложен этот контейнер, но чаще всего таким элементом и оказывается страница). Чтобы избавиться от этой ошибки, нужно вложить в контейнер еще один элемент div с явно заданной шириной:

<div id="containter" style="position: relative; ....">
<div style="width:100%">
<div id="element" style="position: absolute; ...;...">Содержимое элемента</div>
</div>
</div>

Если контейнер содержит только элементы с аттрибутом float, то высота такого контейнера оказывается минимально-допустимой с точки зрения броузера. Для избежания этого обычно в конец контейнера помещается пустой div с clear:both, что нежелательно с точки зрения семантической верстки. Однако если контейнеру задать в свойствах ширину, отличающуюся от auto (например, width: 100%), его высота станет подбираться так, чтобы в нем умещались все плавающие элементы. В результате необходимость в пустом div с clear: both оптадает.

Добавлено (благодарности пользователю Шурик за уточнение): необходимо ещё установить свойство overflow (в auto, но из-за “некоторых” браузеров лучше в hidden).

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

Второй способ предпочтительнее по двум причинам: а) можно написать универсальную процедуру генерации скрытых полей, б) можно добавить проверку на JavaScript, которая будет запрашивать подтверждение на стороне клиента.

Пример: ссылка для удаления сообщения: <a href=”index.php?a=delete&post=1″ >Удалить</a>. Добавляем в эту ссылку событие onClick=”if (confirm(’Вы действительно хотите это удалить?’)) { this.href+=’&confirm=1′; return true; } else return false;”.

Далее  в процедуре удаления выполняем проверку Далее…

В 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), а также уменьшить количество обращений к серверу за счет объединения нескольких файлов с уголками в один.

Иногда бывает нужно сделать блок, который будет виден только в том случае, если у пользователя включен JavaScript. Самый простой способ сделать это выглядит так:

<noscript><div style="display:none"></noscript>
Здесь размещается часть, которая должна быть видна только при включенным JavaScript.
<noscript></div></noscript>

Существует способ пройти валидацию с noindex. Для этого тег открывающие и закрывающие теги noindex помещаются в секцию cdata (работать это будет, естественно, только в XHTML), а затем обе секции cdata помещаются в невидимый div или span:

<span style="display: none"><![CDATA[<noindex>]]></span>
То, что запрещено к индексации
<span style="display: none"><![CDATA[</noindex>]]></span>

Идея позаимствована вот отсюда: http://www.seoburg.ru/2007/01/25/162/

Иногда бывает нужным сделать ссылку, куда могли бы зайти только пользователи, но не заходили бы боты. (Пример такой ситуации — ссылка “Показать все сообщения” в профиле пользователя на форуме.) Обычно это делается аттрибутом rel=”nofollow”, но часть поисковых систем его игнорирует.

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

<form action="" method="get"><fieldset><caption style="display: none"></caption>
<button style="border: none; background: none">Текст ссылки</button>
</fieldset></form>

На многих сайтах можно увидеть кнопки для добавки ссылки в социальные сети закладок типа Memory.Ru, BobrDobr.Ru и тому подобные. Идея весьма удачная, так как значительно увеличивается вероятность, что пользователь добавит ссылку в эти системы, что во-первых, повысит вероятность того, что он вернется на сайт сам, во-вторых, может привлечь новых пользователей из социальной сети.

Обычно такие кнопки представляют собой маленькие (16×16 px) логотипы этих социальных сетей. Но при этом каждая такая кнопка — это отдельный запрос, поэтому когда их становится много, время загрузки страницы начинает расти, что нежелательно. Но можно сделать иначе: поместить все картинки в один большой файл, и воспользоваться тегом map для простановки ссылок. Вот пример такого набора кнопок для 18 социальных сетей (максимальное количество, которое удалось собрать на сегодняшний день).

Код для HTML:

<img src="links.png" style="width: 306px;  height:16px; border: none" usemap="#addurl" alt="Добавить в закладки">

<map name="addurl">
<area shape="rect" coords="0,0,15,15" alt="Добавить на Del.icio.us" href="http://del.icio.us/post?url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="16,0,31,15" alt="Добавить на News2.Ru" href="http://news2.ru/add_story.php?url=URL_страницы">
<area shape="rect" coords="32,0,47,15" alt="Добавить на Digg.com" href="http://digg.com/submit?phase=2&url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="48,0,63,15" alt="Добавить на Mister-Wong.Ru" href="http://mister-wong.ru/add_url/?bm_url=URL_страницы&bm_description=Описание_закладки">
<area shape="rect" coords="64,0,79,15" alt="Добавить на Linkstore.Ru" href="http://linkstore.ru/servlet/LinkStore?a=add&url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="80,0,95,15" alt="Добавить на Netscape.com" href="http://netscape.com/submit/?U=URL_страницы&T=Описание_закладки">
<area shape="rect" coords="96,0,111,15" alt="Добавить на MyScoop.Ru" href="http://myscoop.ru/add/?title=Описание_закладки&URL=URL_страницы">
<area shape="rect" coords="112,0,127,15" alt="Добавить в Yahoo" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=URL_страницы&t=Описание_закладки">
<area shape="rect" coords="128,0,143,15" alt="Добавить в Vaau.Ru" href="http://vaau.ru/submit/?action=step2&url=URL_страницы">
<area shape="rect" coords="144,0,159,15" alt="Добавить в Technorati" href="http://technorati.com/faves?add=URL_страницы">
<area shape="rect" coords="160,0,175,15" alt="Забобрить" href="http://bobrdobr.ru/add.html?url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="176,0,191,15" alt="Добавить в Закладки Google" href="http://google.com/bookmarks/mark?op=edit&bkmk=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="192,0,207,15" alt="Добавить на Newsland.Ru" href="http://newsland.ru/News/Add/type/news/">
<area shape="rect" coords="208,0,223,15" alt="Redd it!" href="http://reddit.com/submit?url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="224,0,239,15" alt="Добавить в Rumarkz.ru" href="http://rumarkz.ru/bookmarks/?action=add&popup=1&address=URL_страницы&title=Описание_закладки&description=%7Bt%7D">
<area shape="rect" coords="240,0,255,15" alt="Добавить в Blogmarks.net" href="http://blogmarks.net/my/new.php?mini=1&url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="256,0,271,15" alt="Добавить на Memori.Ru" href="http://memori.ru/link/?sm=1&u_data%5Burl%5D=URL_страницы&u_data%5Bname%5D=Описание_закладки">
<area shape="rect" coords="272,0,287,15" alt="Добавить на MoeMesto.Ru" href="http://moemesto.ru/post.php?url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="288,0,301,15" alt="Добавить в RuCity.Ru" href="http://rucity.com/bookmarks.php?action=add&address=URL_страницы&title=Описание_закладки&description=">
</map>

Код для XHTML:

<img src="links.png" style="width: 306px;  height:16px; border: none" usemap="#addurl" alt="Добавить в закладки" />

<map id="addurl">
<area shape="rect" coords="0,0,15,15" alt="Добавить на Del.icio.us" href="http://del.icio.us/post?url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="16,0,31,15" alt="Добавить на News2.Ru" href="http://news2.ru/add_story.php?url=URL_страницы" />
<area shape="rect" coords="32,0,47,15" alt="Добавить на Digg.com" href="http://digg.com/submit?phase=2&url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="48,0,63,15" alt="Добавить на Mister-Wong.Ru" href="http://mister-wong.ru/add_url/?bm_url=URL_страницы&bm_description=Описание_закладки" />
<area shape="rect" coords="64,0,79,15" alt="Добавить на Linkstore.Ru" href="http://linkstore.ru/servlet/LinkStore?a=add&url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="80,0,95,15" alt="Добавить на Netscape.com" href="http://netscape.com/submit/?U=URL_страницы&T=Описание_закладки" />
<area shape="rect" coords="96,0,111,15" alt="Добавить на MyScoop.Ru" href="http://myscoop.ru/add/?title=Описание_закладки&URL=URL_страницы" />
<area shape="rect" coords="112,0,127,15" alt="Добавить в Yahoo" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=URL_страницы&t=Описание_закладки" />
<area shape="rect" coords="128,0,143,15" alt="Добавить в Vaau.Ru" href="http://vaau.ru/submit/?action=step2&url=URL_страницы" />
<area shape="rect" coords="144,0,159,15" alt="Добавить в Technorati" href="http://technorati.com/faves?add=URL_страницы" />
<area shape="rect" coords="160,0,175,15" alt="Забобрить" href="http://bobrdobr.ru/add.html?url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="176,0,191,15" alt="Добавить в Закладки Google" href="http://google.com/bookmarks/mark?op=edit&bkmk=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="192,0,207,15" alt="Добавить на Newsland.Ru" href="http://newsland.ru/News/Add/type/news/" />
<area shape="rect" coords="208,0,223,15" alt="Redd it!" href="http://reddit.com/submit?url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="224,0,239,15" alt="Добавить в Rumarkz.ru" href="http://rumarkz.ru/bookmarks/?action=add&popup=1&address=URL_страницы&title=Описание_закладки&description=%7Bt%7D" />
<area shape="rect" coords="240,0,255,15" alt="Добавить в Blogmarks.net" href="http://blogmarks.net/my/new.php?mini=1&url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="256,0,271,15" alt="Добавить на Memori.Ru" href="http://memori.ru/link/?sm=1&u_data%5Burl%5D=URL_страницы&u_data%5Bname%5D=Описание_закладки" />
<area shape="rect" coords="272,0,287,15" alt="Добавить на MoeMesto.Ru" href="http://moemesto.ru/post.php?url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="288,0,301,15" alt="Добавить в RuCity.Ru" href="http://rucity.com/bookmarks.php?action=add&address=URL_страницы&title=Описание_закладки&description=" />
</map>

P.S. Для того, чтобы избежать потери веса страницы в поисковой системе, целесообразно добавлять этот код не напрямую, а с помощью JavaScript. Кроме того, не следует забывать, что URL_страницы и описание_закладки должны быть закодированы в формате urlencoded, причем в кодировке UTF-8.

Файл links.png с логотипами для социальных сетей (с прозрачным фоном):

Пример работающей ссылки можно увидеть по адресу http://reinin.ru.