2010-07-31

Сообщение с прокруткой

   Для оформления дневника можно создавать записи с прокруткой. Они занимают меньше места и выглядят достаточно оригинально. Самая простая запись с прокруткой, или как он еще называется "скроллбаром" выглядит следующим образом:


Код №1
<div style="overflow:scroll;scrollbar-arrow-color:#000000;scrollbar-base-color: #228B22; position: width:99%;height:280px;background-image:url(' URL ');top:5px;text-align:left;text-indent:5pt">Ваш текст</div> ,

где div - задает границы блока через переменные width и height, которые могут измеряться как в процентах по отношению к экрану или в пикселях.
.. style="overflow:auto может принимать следующие значения:
-auto означает, что скроллбар (вертикальная полоса) появляется автоматически при превышении размера текста над заданными значениями блока, или рамки.
-scroll - полоса прокрутки обязательна независимо от размеров текста вертикальная и горизонтальная.
-visible - отображается весь блок;
-hidden - не влезающая часть текста будет скрыта.
теперь рассмотрим параметры самого скроллбара:
scrollbar-face-color - это цвет передней стороны панели прокрутки
scrollbar-track-color - это цвет полосы, по которой "ходит" панель прокрутки.
scrollbar-arrow-color - это цвет треугольника на верхнем и нижнем квадратах.
scrollbar-shadow-color - это цвет нижней и правой граней панели прокрутки.
scrollbar-darkshadow-color - это цвет тени от панели прокрутки.
scrollbar-highlight-color - это цвет верхней и левой граней панели прокрутки
scrollbar-3dlight-color - это цвет отсвета.
Отражать можно не все параметры полосы прокрутки/
Подставив в код №1 вместо 'URL ' прямую ссылку на изображение (первая строчка в Радикале или ее можно узнать в свойствах изображения (подробнее можно прочитать здесь), Ваша запись будет отображена на фоне с полосой прокрутки.
Если перед кодом №1 поставить код изображения, заданным значением обтекания текстом картинки слева,


то получим сообщение следующего вида.

Оно выглядит более интересно

Эта запись будет иметь код №2 :

Код №2
<img src="http://www.kom-snab.ru/templates/komsnab/images/phone.jpg" width="56" height="56" align="left" /><div style="overflow:auto;scrollbar-arrow-color:#000000;scrollbar-base-color: #228B22; position: width:99%;height:280px;background-image:url(' URL ');top:5px;text-align:left;text-indent:5pt">Ваш текст</div>

Готовые рамочки с прокруткой можете взять здесь

6 комментариев :

Ирина комментирует...

Как сделать сообщние с прокруткой для блога на mail.ru?

NATALKA комментирует...

Ответ на свой вопрос читайте в сообщении Полоса прокрутки. Способ 2.

Анонимный комментирует...

фуфло... Колор скроллера поддерживает только опера, остальные браузеры игнорят

Ольга Ватутина комментирует...

Здравствуйте, Наташа! В своём блоге http://russkiyiliteratura.blogspot.ru/ оформила сообщение с помощью Полосы прокрутки. Спасибо Вам за подробные разъяснения. Подскажите, пожалуйста, как сделать, чтобы текст в Полосе прокрутки отступал немного от краёв этой самой полосы. Теоретически представляю, что в какое-то значение надо ввести энное количество пикселей, а практически, увы, чайник:)
PS. У меня Mozilla Firefox, всё поддерживается:)

Анонимный комментирует...

Все так лаконично, а блог то называется Азбука.... ТО бишь я совсем ничего непонимающая в этом всем, должна понимать ваш язык1 При всем моем уважении, ничего практически не поинмаю1 Ясно ЧТО вставлять, а куда и как туда пробраться? Без обид, просто хочется более понятных Аз Есемь)))

Mycrib комментирует...

Я не обижаюсь - у меня с самооценкой все в порядке ;)
Лучше бы спросили что конкретно непонятно, тогда, глядишь бы, получили конкретную помощь..

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML