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



Была сразу идея сделать таблицу с тремя TR и много TD, куда вставить нарезки краев... И, в принципе, должно пойти. Но вот второй рисунок говорит о том, что придётся сделать куда сложнее таблицу, чтобы выполнялось условие, когда картинка заезжает за макс. линию бордера.

Но может есть какой-нибудь другой способ верстки круглых краев?

И ещё момент. Если это все-таки делать таблицами, как расположить так таблицу, чтобы справа текст обрамлял ее. Только ли align="left"? Может есть какие-нибудь подводные камни?

не вижу, чтобы картинка на обоих рисуках заходила за края. обман зрения
если всё же надо, и таблицами, то выход очевиден - использовать таблицу не 3*3 а 5*5
метод проще - слоями. восемь слоёв - каждый внутри следующего (хотя можно и разбросать). картинка внутри всех. в каждом слое свой background, четыре угла и четыре стороны

4 вложенных дива

Violator, спасибо огромное  Ваш вариант прекрасно работает во всех браузерах и его легко редактировать )

Извиняюсь, но появилась проблема - если я убираю float: left, то див расплывается на всю ширину, которая возможна для него. Дело в том, что этот float: left организовывает обтекание текста и есть моменты, когда он мне совсем не нужен и я хочу, чтобы текст не обтекал этот DIV.

roskov, 
по умолчанию див будет растягиваться на 100%, задайте ему width в таком случае

К сожалению, не все так просто :(
Прикрепляю просто пример где все ведет себя не лучшим образом (

На картинке так:



Т.е. если почему-то картинка правильно опускается под абзац, а вот див стремится в следующей строке абзаца. Почему так? (

В архиве исходник...



Это сообщение отредактировал(а) roskov - 18.2.2009, 13:45

roskov, 
потому что верхний блок с рисунком у вас плавающий (используется float), добавьте перед вторым блоком строку