Заметки об 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а.

Иногда возникает задача хранить какие-то свойства большого количества разнородных объектов, которые никогда не будут участвовать в условиях выборки или сортировке, но которые могут добавляться/исчезать по мере развития сайта. Например, к таким свойствам относятся задаваемые поля профиля пользователя на форуме, настройки сайта в целом, какие-то опции отдельных страниц этого сайта.

В такой ситуации можно использовать универсальную таблиц для всех настроек, которая будет иметь следющую структуру:

type : enum(’user’,'page’,’site’) (признак, кому принадлежит данная настройка: сайту, пользователю или странице, вместо типа enum можно использовать tinyint, чтобы не изменять структуру таблицы, если появятся новые типы объектов),
id : int (идентификатор пользователя или страницы)
name: varchar(24) (название опции)
value: varchar(255) (значение опции).

Далее…