конечно это не какое то открытие, которое я сама совершила, но все таки этот блог в основном помощь новичкам, так что кому то это явно пригодится! Ну ладно хватит лирики переходим к маленькому и очень простому уроку. Не знаю кого как, а меня иногда очень раздражают длиннющие и тяжелые страницы, хотя в них есть плюс - на одной странице сразу много интересного материала, но.... страница ну очень длинная, и грузится долго, и прокручивается медленно.... в обще это конкретный и жирный МИНУС! И вот какой выход я нашла, что бы у меня на сайте не было такого, я просто попробовала прятать длинный пост или как я уже сделала - боковое меню, в прокрутку. Получилось! И не плохо я вам скажу, мне нравится! В общем то писать об этом долго не стоит, код можно вставить простой и тогда будет точь в точь как у меня боковая колонка

Вот основной код самой простой прокрутки -

<div style="overflow: auto; height: 300px; top: 5px; text-align: left; text-indent: 5pt;"> Ваш ТЕКСТ </div>

Что в коде можно и нужно изменить - overflow: auto - здесь ничего менять не надо, это ширина прокрутки, и здесь стоит - auto что сие означает? А то что прокрутка сама подстроится под ширину вашего поста страницы.

height: 300px; - а вот здесь уже надо и можно менять это высота вашей прокрутки, здесь обозначено 300 пикселей, а в моей прокрутке в боковой колонке 1800 пикселей. Вот сами и решайте какую высоту вам нужно в каждом разном случае. :)

Такая же прокрутка может быть и немного в другом виде -

<div style="overflow-y: scroll; width: 100px; height: 100px;">Ваш текст</div>

В общем то ничем почти не отличается, но здесь вы можете самостоятельно задать не только высоту, но и ширину прокрутки, width: 100px;

что тоже очень иногда нужно и полезно! меняем 100 пикселей на любую нужную вам ширину. :)

Итак идем дальше, если вам захочется вставить не просто прокрутку, а с картинкой тоже не вопрос! Нет проблем! Сейчас вставим! :)

Прокрутка с картинкой

<img src="КОД адрес КАРТИНКИ" width="120" height="97" align="left" /> <div style="overflow:auto;scrollbar-arrow-color:#000000;scrollbar-base-color: #228B22; position: width:99%;height: РАЗМЕР ПРОКРУТКИpx;background-image:url(' ФОН ДЛЯ ТЕКСТА ');top:5px;text-align:left;text-indent:5pt"> ВАШ ТЕКСТ </div>

Возле текста "Код адрес картинки" есть так же значения ширины и высоты.

width="120" height="97" - это важные значения! их нужно ставить соответствующие реальным размерам изображения! Иначе картинку поведет-сожмет-растянет или вообще на текст заведет! В общем будет не красота а ерунда полная! :)

А теперь посмотрим из чего состоит прокрутка.

• 1.scrollbar-face-color - это цвет передней стороны панели прокрутки
• scrollbar-shadow-color - это цвет нижней и правой граней панели прокрутки.
• scrollbar-highlight-color - это цвет верхней и левой граней панели прокрутки
• scrollbar-3dlight-color - это цвет отсвета.
• scrollbar-track-color - это цвет полосы, по которой «ходит» панель прокрутки
• scrollbar-arrow-color - это цвет треугольника на верхнем и нижнем квадратах.
• #FFFFFF - это коды цвета, которые можно менять.
• Не обязательно использовать все теги. Я использую только те при помощи которых можно поменять цвет прокрутки.

В коде где написано. КОД КАРТИНКИ.

Если вы - Загружаете картинку через Радикал фото. 1. Код берёте под №1. Меняете только размеры картинки width="100" height="200" 2. Если вставляете через Лиру тогда вам нужна только та часть кода, что находится внутри кавычек. 3. Если ставите код в Ворд Прессе или любом другом сайте Просто ставите внутрь кавычек код-адрес картинки-изображения в интернете.

РАЗМЕР ПРОКРУТКИ.

Меняем эту надпись на цифры размера КАРТИНКИ. В моём случае height=289 . Тоесть вместо слов РАЗМЕР ПРОКРУТКИ ставим высоту картинки 219 , но можно конечно и произвольную высоту взять. Вот в примере я поставила высоту 300, и сама прокрутка выше картинки, а картинка занимает правый верхний угол. Что меня тоже вполне устраивает!

Есть важная тонкость - размер ставим Без кавычек иначе код сбивается. Это нужно для того чтобы прокрутка не вылезала за размеры картинки или не была меньше её. Хотя размер прокрутки можете делать любой.

ФОН ДЛЯ ТЕКСТА.

можно поставить фон. Так же мы вставляли код картинки.

• Если сюда ничего не добавлять, то фон останется прозрачным, т.е. сольется с основным фоном сайта-блога
• А можно поставить код-адрес любого фона-картинки. Что я и сделала для примера.

Ну и еще совет-подсказка

ВАШ ТЕКСТ тут вы пишите свой текст, но не только текст, можно вставить любой код, например рекламный, и тогда ваша реклама не будет занимать много места, но её будет много! И любой при желании сам может выбрать и при желании посмотреть! например вот так как здесь в правой колонке где меню сайта, в самом верху расположен рекламный блок. Очень удобно и компактно! ПРОКРУТКА начинает проявляться тогда, когда текст длинный, больше вашей заданной высоты.

Ну вот собственно еще раз сам код прокрутки с картинкой

<img src="КОД КАРТИНКИ" width="289" height="219" align="left" /><div style="overflow:auto;scrollbar-arrow-color:#000000;scrollbar-base-color: #228B22; position: width:99%;height: РАЗМЕР ПРОКРУТКИpx;background-image:url(' ФОН ДЛЯ ТЕКСТА ');top:5px;text-align:left;text-indent:5pt"> ВАШ ТЕКСТ </div>

Я люблю себя милую, нежную,
озорную, немного небрежную,
Я люблю себя разную-разную,
даже утром, спросонья, прекрасную!
Я люблю себя стильную, сильную,
потрясающую и сексапильную!
А порою серьезную, смелую,
в этой жизни такую умелую!

Она в случайном ресторане
Сидит за столиком одна,
Расположившись на диване
У отворенного окна.
Улыбка рта слегка коснулась…
Впрямь – одинокая планета…
К прохожим полуобернулась,
Витая в женских мыслях где-то…

В зовущих пальцах с маникюром
Дымилась, тая, сигарета…
Стиль «вамп» к лицу красивым дурам!
Дым растворялся в шлейфе света,
Собою заполнял пространство,
Нес запах, таял в вышине;
Став символом непостоянства,
Он поселился вдруг во мне…

Нежность в сердце накатила
Мягкой, ласковой волною…
Я спешу, коль спит светило,
Надышаться тишиною!
Искупавшись в лунном свете,
Душу распахнув, смотри:
Тихо ходит по планете
Предвкушение зари!

И каждый вечер, лишь стемнеет,
Заводит юность хороводы…
Стараются, кто как умеет:
Наводят кто мосты, кто броды!
Как пляшут парни – охламоны,
Чем тот и этот не жених?
Босые девушки меж них,
Как перезревшие бутоны…

Твои манеры безупречны,
Во всем подчеркнута столичность,
Но, связи блудны, скоротечны…
Ведь как чудовищна двуличность!
Ты неразборчиво всеядна,
Готова к близости всегда.
Ведь хуже нет! Но, мне приятна
Безнравственная красота.

Заиграло солнышко на глазках,
Засверкала красная заря,
До сих пор тебя я вспоминаю
Не забуду видно никогда.
И никто другой мне так не нужен,
Ты был самой главною  мечтой!
Ты меня обезоружил
И водил все время за собой.

Я такая, как есть, я не буду другой,
Я такая, как есть, и останусь такой.
Я наивна бываю, бываю - вредна,
Но, такая, как есть, я на свете одна.

Я не могла достать ни с неба звезд,
Не дотянулась б до луны.
Но ты три слова произнес
И воплотились все мои мечты.
Я оказалась где-то там,
Где так волнует сердце кровь.
Я отдалась в объятья небесам.
Ты истинную подарил любовь.

Мне хочется назвать тебя своим,
За то что бесконечны дни разлуки
За то что я сейчас вот не могу
Прижать твои родные руки.

Хочу с тобой не расставаться,
Ни днем, ни ночью, ни во сне,
Чтоб некуда было деваться,
Чтоб даже там пришла ко мне.

Хочу почувствовать прикосновенья
И ласку нежных рук твоих,
Чтоб не забыть потом мгновенья,
Что так давно в мечтах моих.

Я вас люблю. Листва мне тихо шепчет.
Я вас люблю. Мне ветер говорит.
Я вас люблю, и с каждым днем все крепче.
Я вас люблю, пусть Бог меня простит...

Она из тех, непозволительно красивых:
Себя несет – любуйся без помех…
Рассыпался по речке, скрылся в ивах,
Ее гортанный, безразличный смех…
И как себя сдержать от вожделенья –
Как будто сердце исполосано ножом:
Ведь там она… Бесценные мгновенья…
Купалась с девками бесстыдно, голышом!

Она была красива и порочна.
Пиши картину: «Падшая» с неё.
И суть её лучилась денно, нощно,
Жгла в каждом вздохе-выдохе её!
Сверкала белозубая улыбка,
Она и каялась, в тот миг уже греша,
И как она была призывно гибка,
И как была в постели хороша!

Сегодня ты пришел,
Я рада, как дитя.
И дождик не пошел
Смеется солнышко шутя.

Играет лучиком в окне
И вижу я лицо твое,
А зайчик скачет по стене.
Твоя улыбка, все мое!...

Ну и так далее.......