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

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

Код №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 ответов к «Сообщение с прокруткой»

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *