Question

Стоит задача заключить компаненты (новостные блоки, поиск, галерею)в красивые рамки со скругленными углами. Не могу разобраться как это сделать. Реально ли?

Answer 1

Цитата
Константин Береснев пишет: Реально ли?

Почему же не реально. Только это с компонентом в принципе не связано. Это только HTML и CSS.

Как варианты мы делаем обычно так

Код
<div>   <div>     <div>      _Код_компонента     </div>   </div> </div>

А дивам соответствующие стили создать. Рамку придеться нарисовать.

Второй вариант: - это только для FF - CSS свойство -moz-border-radius

Answer 2

А есть ещё неплохой вариант - скрипт ShadedBorder - маленький, умеет закруглять углы, делать тени, подсветку.

Answer 3

Если предполагается авторесайз по вертикали и совместимость с ИЕ, то лучше заключать компонент в таблицу из 9 ячеек, центральная которой будет контентом, а остальные 8 - рамкой.

Answer 4

Цитата
Дмитрий Якинцев пишет: Если предполагается авторесайз по вертикали и совместимость с ИЕ, то лучше заключать компонент в таблицу из 9 ячеек, центральная которой будет контентом, а остальные 8 - рамкой.

С тремя дивами и резайзом по вертикали в IE тоже прекрасно работает даже в IE6

Answer 5

Как в этих дивах привязаны картинки углов и рамок?
Или дайте пожалуйста пример, если можно.

Answer 6

Цитата
Дмитрий Якинцев пишет: Как в этих дивах привязаны картинки углов и рамок? Или дайте пожалуйста пример, если можно.

Пример под рукой нет, но в двух словах

Рамка состоит из трех частей:
1. фон растянутый по вертикали (background:url(_картинка_) repeat-y top left)
2. Полоска сверху с закруглениями (background:url(_картинка_) no-repeat top left)
3. Полоска снизу с закруглениями (background:url(_картинка_) no-repeat bottom left)

внутреннему диву задаем необходимые отступы (padding:5px)

Вертикаль масштабируется по контенту. Работает отлично везде, включая IE6

Учитывая, что рамки в png весят "копейки" можно обойтись двумя дивами (верхний и нихний), просто с запасом взять края

Answer 7

Есть и несложные плагины jquery для решения этой задачи.

Видел недавно на сайте jquery.

Answer 8

Цитата
Виталий Соков пишет: Есть и несложные плагины jquery для решения этой задачи.

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

Answer 9

Павел, оно при этом не ресайзится по горизонтали :)
Я думал, есть решение на трех дивах для произвольного ресайза и по вертикали и по горизонтали на дивах, аналогично таблице из 9 ячеек.