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

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

{magictabs}
html код::

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

||||
css::

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;
}


{/magictabs}

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

 

 

Комментарии   

Vasya
+1 #7 Vasya 19.09.2010 06:45
ну а с сылками то что(((
Дмитрий
+2 #6 Дмитрий 09.01.2010 12:58
Хорошо бы рядом и css приложить ;-)

p.s.: Оценка статьи не работает.
Igels
+3 #5 Igels 28.09.2009 01:30
Цитирую Administrator:
... но с одним эффектом - текст внутри недоступен, так что после некоторых опытов не рекомендую его применять, зато рекомендую его применять если нужна простейшая защита от копирования :-)


защита не работает... ;)
можно выделять за внешней границей блока и копировать свободно
Administrator
+1 #4 Administrator 13.09.2009 12:17
Цитирую Максим:
Спасибо, помогло! Скажите, почему при добавлении ссылок в блок
Link
ссылки не работают... (

Сей вариант оказался рабочим... но с одним эффектом - текст внутри недоступен, так что после некоторых опытов не рекомендую его применять, зато рекомендую его применять если нужна простейшая защита от копирования :-)
Максим
-1 #3 Максим 14.08.2009 01:57
Спасибо, помогло! Скажите, почему при добавлении ссылок в блок
Link
ссылки не работают... (
Administrator
+1 #2 Administrator 13.08.2009 23:55
Цитирую Максим:
Скажите, а как задать ширину этого блока?
В данном примере блок имеет ширину 100%, то есть чтоб задать его ширину достаточно выставить ширину у внешнего контейнера
Максим
+1 #1 Максим 13.08.2009 23:47
Скажите, а как задать ширину этого блока?

Добавить комментарий


Защитный код
Обновить

Последние комментарии

  • В любом случае это будет инструкция, постараюсь конечно максимально полно, но инструкция как выявлять ...

    Подробнее...

     
  • Ок жду. у меня почти 120 сайтов из них 90 на джумле разных версий ) так что мне это важно поэтому ...

    Подробнее...

     
  • Да, это важная часть. Проблема в том что айболит видит не всё. То есть это мера необходимая, но ...

    Подробнее...

     
  • Короче, я обновил php пропатчил сайты и почистился от вирусов ай болитом на этом моя процедура защиты ...

    Подробнее...

     
  • Прошло еще почти полтора месяца а так и не дописали (

    Подробнее...

Вы смотрели