• Авторизация


"Хитрая" рамка для текста 30-07-2009 12:06 к комментариям - к полной версии - понравилось!


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

вверх^ к полной версии понравилось! в evernote
Комментарии (4):
Спасибки за очередной урок!!! Так весь твой днев скачаю... А что делать?! Учиться надо!
IRIS 13-10-2009-21:44 удалить
Вот спасибочки. Попробуем еще такой вариант.


Комментарии (4): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник "Хитрая" рамка для текста | Великовозрастное_дитя - Дневник Великовозрастное_дитя | Лента друзей Великовозрастное_дитя / Полная версия Добавить в друзья Страницы: раньше»