Сделать текст с окошечком прокрутки (флеймом)

Воскресенье, 08 Ноября 2015 г. 13:34 + в цитатник

Цитата сообщения Шадрина_Галина

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

Сделать текст с окошечком прокрутки (флеймом)

Сделать текст с прокруткой во флейме.
Флейм - это очень нужное окошечко, куда можно спрятать длинный текст и читать его, прокручивая вниз. Наверняка уже встречали подобное. Например я вставляю в пост разделители ( можно длинный текст, или картинки), и для экономии места, делаю это вот в таком окошечке, который и называется флейм.

Сделать такое окошечко очень просто. Сначала пишете нужный Вам текст, затем в самое начало (перед Вашим текстом) вставляете вот этот код:

<div style="width: 100%; height: 300px; margin-top: 0px; margin-left: 0px; text-align: center; font-size: 14px; overflow: auto">

Рассмотрим эту формулу на картинке

Значения указанные цифрами:

1 - это ширина текста по отношению к странице, сейчас стоит 100% (это по ширине страницы, то есть поста) - если хотите чтоб было окошечко было меньше (как у меня вверху, где написана формула)меньше просто поменяйте цифру. Да и если Вам по какой-то причине не нравиться делать в процентах, то вы всегда можете изменить % на px.
2 - это высота видимого текста, стоит 300, можете по необходимости менять в большую или меньшую сторону.( У меня поменяно на 150)
3 - это отступ сверху от начала сообщения, сейчас стоит 0, если хотите, то можете поменять и флейм с текстом опустится вниз, на нужное вам значение.
4 - это отступ с левой стороны страницы, стоит 0, так же можете поменять на нужное вам значение. Это нужно, если вы например перед окошечком хотите вставить картинку.

Выглядеть это будет вот так.

Первое, что Вам нужно поменять, так это отступ с левой стороны, потом ширину и высоту прокрутки, для этого нужно знать размер картинки. Размеры моей картинки 250х260, значит 4 ПУНКТ (отступ слева) мы меняем на 260, а 2 пункт (высота прокрутки ) мы меняем, на 250. Ширину прокрутки (пункт 1) с 100% я поменяла на 360px (под ширину своего экрана) - Вы можете поменять на нужное Вам значение

Если вы хотите сделать несколько таких окошечек в посте, или продолжить текст далее без окошечка (сделать просто окно- вставку), то, что б закрыть окно, сделайте закрывающий тег - /div

Весь код (с закрывающим окошечко тегом /div, будет выглядеть вот так.

Успехов в вашем творчестве.

Серия сообщений "Уроки для блогов":

Часть 1 - Как скопировать текст с сайта, который защищен от копирования.
Часть 2 - Как взять картинку с альбомов Яндекс -фото
...
Часть 20 - Как просматривать и брать картинки с Яндекс фото в связи с новыми изменениями
Часть 21 - Как увидеть пароль вместо звездочек?
Часть 22 - Сделать текст с окошечком прокрутки (флеймом)
Часть 23 - Как быстро вставить в пост на ЛиРу картинку из Интернета
Часть 24 - Рамка для блога, имитирующая картину.
...
Часть 42 - Как вставить плейкаст в сообщение в дневнике
Часть 43 - Для тех, кто перестал получать сообщения и комментарии на почту.
Часть 44 - Календарь на ЛиРу, где находится и его функции

Рубрики:

Для дневника

<a href="https://www.liveinternet.ru/users/5130568/post376253729/">РЎРґРµР»Р°С‚СЊ С‚РµРєСЃС‚ СЃ РѕРєРѕС€РµС‡РєРѕРј РїСЂРѕРєСЂСѓС‚РєРё (С„Р»РµР№РјРѕРј) </a><br/>РЎРґРµР»Р°С‚СЊ С‚РµРєСЃС‚ СЃ РѕРєРѕС€РµС‡РєРѕРј РїСЂРѕРєСЂСѓС‚РєРё (С„Р»РµР№РјРѕРј)

РЎРґРµР»Р°С‚СЊ С‚РµРєСЃС‚ СЃ РїСЂРѕРєСЂСѓС‚РєРѕР№ РІРѕ С„Р»РµР№РјРµ.
 Р¤Р»РµР№Рј - СЌС‚Рѕ РѕС‡РµРЅСЊ РЅСѓР¶РЅРѕРµ РѕРєРѕС€РµС‡РєРѕ, РєСѓРґР° РјРѕР¶РЅРѕ СЃРїСЂСЏС‚Р°С‚СЊ РґР»РёРЅРЅС‹Р№ С‚РµРєСЃС‚ Рё С‡РёС‚Р°С‚СЊ РµРіРѕ, РїСЂРѕРєСЂСѓС‡РёРІР°СЏ РІРЅРёР·. РќР°РІРµСЂРЅСЏРєР° СѓР¶Рµ РІСЃС‚СЂРµС‡Р°Р»Рё РїРѕРґРѕР±РЅРѕРµ. РќР°РїСЂРёРјРµСЂ СЏ РІСЃС‚Р°РІР»СЏСЋ РІ РїРѕСЃС‚  СЂР°Р·РґРµР»РёС‚РµР»Рё ( РјРѕР¶РЅРѕ РґР»РёРЅРЅС‹Р№ С‚РµРєСЃС‚, РёР»Рё РєР°СЂС‚РёРЅРєРё), Рё РґР»СЏ СЌРєРѕРЅРѕРјРёРё РјРµСЃС‚Р°, РґРµР»Р°СЋ СЌС‚Рѕ РІРѕС‚ РІ С‚Р°РєРѕРј РѕРєРѕС€РµС‡РєРµ, РєРѕС‚РѕСЂС‹Р№ Рё РЅР°Р·С‹РІР°РµС‚СЃСЏ С„Р»РµР№Рј.

РЎРґРµР»Р°С‚СЊ С‚Р°РєРѕРµ РѕРєРѕС€РµС‡РєРѕ РѕС‡РµРЅСЊ РїСЂРѕСЃС‚Рѕ. РЎРЅР°С‡Р°Р»Р° РїРёС€РµС‚Рµ РЅСѓР¶РЅС‹Р№ Р’Р°Рј С‚РµРєСЃС‚, Р·Р°С‚РµРј РІ СЃР°РјРѕРµ РЅР°С‡Р°Р»Рѕ (РїРµСЂРµРґ Р’Р°С€РёРј С‚РµРєСЃС‚РѕРј) РІСЃС‚Р°РІР»СЏРµС‚Рµ РІРѕС‚ СЌС‚РѕС‚ РєРѕРґ:

&lt;div style=&quot;width... <a href="https://www.liveinternet.ru/users/5130568/post376253729/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Рубрики

-Цитатник

-Ссылки

-Метки

-Музыка

-Видео

-Поиск по дневнику

-Подписка по e-mail

-Интересы

-Друзья

-Постоянные читатели

-Сообщества

-Статистика

Сделать текст с окошечком прокрутки (флеймом)