ZODIOS.net

Метод «Раздвижных дверей» Sliding Doors

10.9.2008  –  Рубрика: HTML&CSS

В сети можно накопать много информации об этом методе, но большинство заметок о нем написано очень громоздко так, что многие не дочитывают до конца. Он не является революционным, но довольно популярный, многие его используют, не зная его истинного названия. Цель этой заметки – дать минимальное представление об этом распространенном методе.

Метод «Раздвижных дверей»( Sliding Doors) придумал Douglas Bowman и был опубликован на A List Apart 20 октября 2003 года.

Главное назначение метода – создание резиновых блоков, которые имеют стилизированные края. Например, нужно сделать кнопочку такого вида (см. рис), можно вырезать плашку под кнопочкой и в нее добавлять текст, но нужно, чтоб кнопочка была универсальной, чтоб в нее можно было вставлять текст любой и задняя плашка от этого растягивалась. Это и помогает сделать метод раздвижных дверей (Sliding Doors).

Суть метода состоит в том, что создается блок, которому присваивается правый фоновый рисунок, который будет всегда справа, а внутрь него помещается другой блок, у которого фоновый рисунок будет всегда слева. Таким образом, при увеличении содержимого блока его боковые рисунки разъезжаются по краям. Тонкость состоит при возникновении ситуации, с неоднородным фоном. Тогда можно правый рисунок сделать максимально-допустимой ширины, или сделать еще один блок, в котором фоновый рисунок центральной части будет повторятся.

<ul>
   <li class="”menu”"><a>Статьи</a></li>
</ul>

.menu {
	display:block;
	float:left;
	height:39px;
	margin-right:10px;
	background:url(rightdoor.png) no-repeat top right;
	}
	.menu a {
	display:block;
	height:39px;
	color:#fff;
	text-decoration:none;
	font:11px Tahoma;
	text-transform:uppercase;
	line-height:33px;
	padding:0 10px;
	background:url(leftdoor.png) no-repeat top left;
	}

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

Есть еще одна вариация этого метода. Она состоит в абсолютном позиционировании. То есть родительскому элементу, который содержит контент, присваивается относительное позиционирование (position:relative) и в нем абсолютно, по углам, позиционируются боковые элементы.

Пример раздвижных дверей

Tags: CSS, HTML