Joomla 1.5 - создание сайтов, верстка и программирование

Хочу поделиться вариантом вертски тянущегося (резинового) как по ширине, так и по высоте блока.

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

Для начала нам необходимо подготовить 4 png с закругленными углами, в моем примере ширина и высота обрамления составляет 23 пикселя, сами картинки - верхняя правая (rtr.png) и нижняя левая (tbl.png) - картинки размером 23 на 23 пикс, а вот картинки верхняя левая (rtl-full.png) и нижняя правая (rbr-full.png) сделал заведомо более крупными чем может быть сам блок и разместил в них кроме закругления также полоски бордюра.

Ниже представлен вариант, рабочий в Opera, Google Chrome, FireFox и Internet Explorer 7.

Сразу хочу сказать что его можно оптимизировать методом css-sprites а также возможно уменьшить число элементов (если есть мысли - жду с удовольствием в комменты).

И еще интересная особенность всплыла у IE7 - если задавать margin для внутреннего div (5го) то IE 7 игнорирует margin-top при условии что перед этим div стоят div с абсолютным позиционированием, если же их переставить за него, то все хорошо, именно этим кстати и объясняться то что дивы стоят не по порядку.

	

		
Сам текст обрамленный
		

		
		

		
	

div#nf1 {
background: url("../images/rtr.png") no-repeat top right;
overflow:hidden;
}
div#nf2{
position:relative;
background: url("../images/rbl.png") no-repeat bottom left;
overflow:hidden;
padding:23px;

}
div#nf3{
position:absolute;
background: url("../images/rtl-full.png") no-repeat top left; 
overflow:hidden;
left:0px;
top:0px;
right:23px;
bottom:23px;
}
div#nf4 {
position:absolute;
overflow:hidden;
background: url("../images/rbr-full.png") no-repeat bottom right;
left:23px;
top:23px;
right:0px;
bottom:0px;

}
div#nf5 {
overflow:hidden;
background: white;
}

А вот ссылка на готовый пример.