Это цитата сообщения Великовозрастное_дитя Оригинальное сообщение

"Хитрая" рамка для текста

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

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

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

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

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

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

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

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

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

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

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

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

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

<div> <div>Заголовок</div> <div>Текст поста</div> </div>

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

<center> 1 - <div style="width: 600px; border: solid 1px #00000f;"> 2 - <div style="width: 100%; height: 25px; text-align: center; vertical-align: middle; color: #ffffff; font-size: 20px; font-family: Verdana; background: url('http://img0.liveinternet.ru/images/attach/c/0//46/913/46913808_b.jpg');"> Новогодняя песня </div> 3 - <div style="width: 100%; border-top: solid 1px #00000f; text-align: center; font-size: 22px; color: #000000; font-family: Verdana; background-color: #f7f0e0; padding-top: 10px;"> <pre> В лесу родилась елочка, В лесу она росла, Зимой и летом стройная, Зеленая была. Метель ей пела песенку: "Спи, елочка, бай-бай!" Мороз снежком укутывал: "Смотри, не замерзай!" Трусишка зайка серенький Под елочкой скакал. Порою волк, сердитый волк Рысцою пробегал. Чу! Снег по лесу частому Под полозом скрипит; Лошадка мохноногая Торопиться, бежит. Везет лошадка дровенки, А в дровнях старичок, [мужичок] Срубил он нашу елочку Под самый корешок. Теперь она, нарядная, На праздник к нам пришла И много, много радости Детишкам принесла. </pre> </div> </div> </center>

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

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

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

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

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

<div style="width: 600px; border: solid 1px #00000f;"> <div style="width: 100%; height: 25px; text-align: center; vertical-align: middle; color: #ffffff; font-size: 20px; font-family: Verdana; background: url('http://img0.liveinternet.ru/images/attach/c/0//46/913/46913808_b.jpg');"> Новогодняя песня </div> <div style="width: 100%; border-top: solid 1px #00000f; text-align: center; font-size: 22px; color: #000000; font-family: Verdana; background-color: #f7f0e0; padding-top: 10px;"> <pre> В лесу родилась елочка, В лесу она росла, Зимой и летом стройная, Зеленая была. Метель ей пела песенку: "Спи, елочка, бай-бай!" Мороз снежком укутывал: "Смотри, не замерзай!" Трусишка зайка серенький Под елочкой скакал. Порою волк, сердитый волк Рысцою пробегал. Чу! Снег по лесу частому Под полозом скрипит; Лошадка мохноногая Торопиться, бежит. Везет лошадка дровенки, А в дровнях старичок, [мужичок] Срубил он нашу елочку Под самый корешок. Теперь она, нарядная, На праздник к нам пришла И много, много радости Детишкам принесла. </pre> </div> <img style="position: relative; top: -29px; left: 6px;" src="http://img1.liveinternet.ru/images/attach/c/0//46/914/46914691_s.jpg" width="25" height="25" alt=" (25x25, 0Kb)" align="right" /> </div> </center>

Что бы не мучаться с видом рамки уберите галочку с "Сохранять переводы строк в тексте."
Что бы текст выводился со всеми пробелами и переносами строк заключите его в теги <pre></pre>