Исходное сообщение Сахарина:

Учимся делать рамку!

Хочу поделиться с вами простейшим кодом на изготовление  рамочки. Даже самый ленивый, может научиться.   Берем этот код

<table cellpadding="10" border="3" background="___ФОН 1___" style="width: 500px;"> <tbody> <tr> <td> <table cellpadding="10" border="3" background="__ФОН 2___" style="width: 500px;"> <tbody> <tr> <td> <table cellpadding="10" border="3" background="___ФОН 3___" style="width: 500px;"> <tbody> <tr> <td> <table cellpadding="3" border="3" background="___ФОН 4___" style="width: 500px;"> <tbody> <tr> <td><font size="2" face="arial" color="#000000"> <p align="center">Картинка </p> <h1><span style="font-size: larger;"><span style="color: rgb(128, 0, 0);"><strong>Текст</strong></span></span><br />  </h1> </font></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table></ textarea> 

Сделаем рамку с заголовком и закругленым уголком.

Новогодняя песня

В лесу родилась елочка,
В лесу она росла,
Зимой и летом стройная,
Зеленая была.

Метель ей пела песенку:
"Спи, елочка, бай-бай!"
Мороз снежком укутывал:
"Смотри, не замерзай!"

Трусишка зайка серенький
Под елочкой скакал.
Порою волк, сердитый волк
Рысцою пробегал.

Чу! Снег по лесу частому
Под полозом скрипит;
Лошадка мохноногая
Торопиться, бежит.

Везет лошадка дровенки,
А в дровнях старичок, [мужичок]
Срубил он нашу елочку
Под самый корешок.

Теперь она, нарядная,
На праздник к нам пришла
И много, много радости
Детишкам принесла.

Для этого понадобяться 2 рисунка, один для фона заголовка и рисунок уголка

[показать] - Фоновый рисунок заголовка высотой 25 пикселей и шириной в 1 пиксель

[показать] - рисунок уголка ширина и высота по 25 пикселей

Что бы сделать такую рамку понадобится 3 <DIV>. Один общий который задаст ширину рамки, один для заголовка рамки и див в котором разместится текст

Упрощенно это выглядит так

Полный вариант выглядит так. Для удобства я пронумеровал дивы 1,2,3

Первый див задает общую ширину рамка width 600px и добавляет бордер к рамке border: solid 1px #00000f;

Обратите внимание на то что высота второго дива задана явно и составляет height: 25px столько же сколько и высота фонового рисунка который задается в background

Остальные стили задают цвет фона, размер шрифта и тд.

Что бы скруглить уголок нужно поверх угла дива вывести рисунок скругленного уголка. Что бы вывести рисунок в нужном нам месте нужно к рисунку добавить стиль position: relative и параметрами top, left задать нужное нам место

Код с скругленым уголком выглядит вот так