КАК СПРЯТАТЬ ДЛИННЫЙ ТЕКСТ в ПРОКРУТКУ.

Суббота, 07 Февраля 2015 г. 16:21 + в цитатник

Цитата сообщения zateinik

Прочитать целиком В свой цитатник или сообщество!

Как спрятать длинный текст в прокрутку?

Как спрятать длинный текст в прокрутку?

Декабрь 4, 2010 admin Добавить комментарий

/img1.liveinternet.ru//images/attach/c/2//67/170/67170644_74699aabbecc.gif" target="_blank">//img1.liveinternet.ru//images/attach/c/2//67/170/67170644_74699aabbecc.gif); top: 5px; text-align: left; text-indent: 5pt;">

Вот и я решила написать не большой урок для новичков.

конечно это не какое то открытие, которое я сама совершила, но все таки этот блог в основном помощь новичкам, так что кому то это явно пригодится!

Ну ладно хватит лирики переходим к маленькому и очень простому уроку.

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

И вот какой выход я нашла, что бы у меня на сайте не было такого, я просто попробовала прятать длинный пост или как я уже сделала — боковое меню, в прокрутку. Получилось! И не плохо я вам скажу, мне нравится!

В общем то писать об этом долго не стоит, код можно вставить простой и тогда будет точь в точь как у меня боковая колонка

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

Ваш ТЕКСТ
</div>

Что в коде можно и нужно изменить —

Смотрите далее…..

Вот и я решила написать не большой урок для новичков.

Ну ладно хватит лирики переходим к маленькому и очень простому уроку.

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

Ваш ТЕКСТ
</div>

Что в коде можно и нужно изменить —

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

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

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

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

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

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

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

<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 — это цвет передней стороны панели прокрутки
2.scrollbar-shadow-color — это цвет нижней и правой граней панели прокрутки.
3.scrollbar-highlight-color — это цвет верхней и левой граней панели прокрутки
4.scrollbar-3dlight-color — это цвет отсвета.
5.scrollbar-track-color — это цвет полосы, по которой «ходит» панель прокрутки.
6.scrollbar-arrow-color — это цвет треугольника на верхнем и нижнем квадратах.
7.#FFFFFF — это коды цвета, которые можно менять.
Не обязательно использовать все теги.
Я использую только те при помощи которых можно поменять цвет прокрутки.

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

Если вы — Загружаете картинку через Радикал фото.

1. Код берёте под №1.
Меняете только размеры картинки width=»100″ height=»200″
2. Если вставляете через Лиру тогда вам нужна только та часть кода,
что находится внутри кавычек.

3. Если ставите код в Ворд Прессе или любом другом сайте

Просто ставите внутрь кавычек код-адрес картинки-изображения в интернете.

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

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

Вот в примере я поставила высоту 300, и сама прокрутка выше картинки, а картинка занимает правый верхний угол. Что меня тоже вполне устраивает!
Есть важная тонкость — размер ставим Без кавычек иначе код сбивается.
Это нужно для того чтобы прокрутка не вылезала за размеры картинки или не была меньше её.

Хотя размер прокрутки можете делать любой.

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

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

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

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

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

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

<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>