Лиру. Делаем пост, эпиграф с прокруткой

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



Код такой "вещи" очень простой:

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

Соответственно вместо слов "Ваш текст" надо вставить либо текст вашего поста, либо код вашего эпиграфа и пр. Можно и картинки:) Т.е. можно полностью ваш код эпиграфа (со всеми кодами цветов текста, размерами букавок и пр. "непонятные" значки) прописать вместо "Ваш текст",- и весь ваш эпиграф будет в этой прокручивающейся рамочке:)
Числа "100"-обозначают размер (ширина и высота) поменяйте их на свое усмотрение. Именно ширину лучше делать не больше 600.

Как-то так.. очень просто. но очень полезно:)

©2010 Legionary

Учебник Лиру
 

 

 

 

 

 

15 самых популярных уроков, не вошедших в оглавление

Вначале - кратко о спецкодах и HTML-кодах. Спецкоды – слова, заключенные в квадратные или угловые скобки, которые помогают менять вид текста и делают много полезных вещей. Спецкоды в угловых скобках <> называются HTML- кодами. Их можно вводить "от руки" только в простом редакторе, в расширенном редакторе вместо них нужно пользоваться кнопками над текстом (как в Word). Если всё же хотите использовать и в расширенном - нажимайте кнопку Источник в левом верхнем углу.

Коды заключенные в квадратные скобки - не являются универсальными, они называются BB-кодами, так как происходят из форумов. Их можно использовать и в простом и в расширенном редакторе. Если в BB-коде используется ссылка (код FLASH, например), то надо следить, чтобы расширенный редактор не "подчеркнул" ее, а у простого редактора убрать внизу галочку "Автоматическое распознавание ссылок", иначе код может не сработать правильно. Для удобства использования некоторых BB-кодов в простом редакторе можно активизировать панель спец-кодов.

Теги, применяемые на ЛиРу
Тег - это элемент языка разметки гипертекста (например в HTML), применяется в основном для задания того, как будет отображаться текст.
* Дополнительные спецсимволы HTML (редко используемые буквы и знаки)
1. Как выделить текст?

<b>ВАШ ТЕКСТ</b>Полужирный текст
<i> ВАШ ТЕКСТ</i>Выделение текста курсивом
<u>ВАШ ТЕКСТ</u>Подчёркнутый текст
<s>ВАШ ТЕКСТ</s>Зачёркнутый текст
<tt>ВАШ ТЕКСТ</tt>Текст, имитирующий стиль печатной машинки
<cite>ВАШ ТЕКСТ</cite>Выделение цитат курсивом
<p>ВАШ ТЕКСТ</p>Создание нового параграфа
<hr width="50%" />Горизонтальная разделительная линия (половинка) _________________________
<hr />Горизонтальная разделительная линия (полная) _________________________________________________________________________________________
<br />Перенос строки (если двойная - абзац)
<h1>Ваш Заголовок</h1>

Заголовок

(h1 .. h6 - возможные заголовки. Чем больше число, тем меньше заголовок)

2. Как изменить размер текста?

маленький текст <small>ВАШ ТЕКСТ</small>маленький текст
Уменьшить текст<font size="-2">текст</font>текст - 2
Увеличить текст+1:<font size="+1">текст</font>текст + 1
Увеличить текст+2:<font size="+2">текст</font>текст + 2
Увеличить текст+3:<font size="+3">текст</font>текст + 3

3. Как разместить текст (картинку) на странице и делать отступы?

<div align="left">Ваш текст</div>

<div align="right">Ваш текст</div>

<div style="float:right;">Ваш текст</div><br clear="all" />

<div align="justify">Ваш текст</div>

<center> Ваш текст</center>

Текст будет по центру

<img src="name" align="?" />Выравнивание картинки к одной из сторон документа. Вместо "name" - адрес картинки, вместо "?" - значения: left, right, center, bottom, top, middle.
<blockquote>Ваш текст</blockquote>

Текст для цитат - отделен пустой строкой и отступ слева в 8 пробелов

<p style="text-indent: 40px">Ваш текст</p>

Предложение с отступом в абзаце. Как в книжках.

Как сделать, чтобы текст «обтекал» картинку?
Например, картинка слева, текст справа: добавляем в код картинки: align=left hspace=20
Код картинки примет вид:<img src="http:…" align="left" hspace="20" />
Помни: align=left – картинка слева, текст справа
align=right - картинка справа, текст слева
hspace=20 - расстояние между текстом и картинкой 20 пиксел по горизонтали
vspace=20 - расстояние между текстом и картинкой 20 пиксел по вертикали
Код картинки с плавным обтеканием текстом справа и снизу (или сверху):
<img src="http:…" align="left" hspace="20" vspace="15" />

Прекратить обтекание и вернуть текст под картинку можно тэгом<br />, который выполняет перенос на следующую строку. В блогсервисах и редакторах текста его заменяет нажатие Enter.
<br /><br /><br />- три пустые строки.

Вставить две и более картинки горизонтально:
<nobr>Текст (картинки)</nobr>- все, заключенное в этот контейнер, будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

4. Как окрасить текст в разные цвета?

КРАСНЫЙ:<font color="red">текст</font>красный текст
Ало-КРАСНЫЙ:<font color="damask">текст</font>ало-красный текст
ЖЕЛТЫЙ:<font color="yellow">текст</font>желтый текст
ФИОЛЕТОВЫЙ:<font color="purple">текст</font>фиолетовый текст
ЗЕЛЕНЫЙ:<font color="green">текст</font>зеленый текст
Светло-ЗЕЛЕНЫЙ:<font color="lime">текст</font>светло-зеленый текст
КОРИЧНЕВЫЙ:<font color="brown">текст</font>коричневый текст
Ярко-КОРИЧНЕВЫЙ:<font color="maroon">текст</font>ярко-коричневый текст
ГОЛУБОЙ:<font color="blue">текст</font>голубой текст
Светло-ГОЛУБОЙ:<font color="aqua">текст</font>светло-голубой текст
СИНИЙ:<font color="navy">текст</font>синий текст
ФУКСИЯ:<font color="fuchsia">текст</font>фуксия текст
ОРАНЖЕВЫЙ:<font color="orange">текст</font>оранжевый текст

Также: black,white,rose,violet,vinous,gold,silver,bronze,platinum и т.д. (черный, белый, розовый, фиолетовый, бордовый, золотой, серебряный, бронзовый, платиновый).

* Коды цвета для текстов
* Посмотреть сочетаемость цветов
* Таблица "безопасных" цветов
* Все цвета Интернета

Вид шрифта:
Шрифт этого текста "Monotype Corsiva"
<font face="Monotype Corsiva" size="+1">Ваш текст</font>
Все вышеперечисленные атрибуты тега font можно объединять в одном теге:
Шрифт этого текста "Monotype Corsiva"
код этого текста:
<font face="Monotype Corsiva" size="+2" color="fuchsia">Ваш текст</font>

5. Как сделать бегущую строку?

Бегущая влево строка <marquee>ВАШ ТЕКСТ</marquee>

бегущая влево

Бегущая вправо строка<marquee direction="right">ВАШ ТЕКСТ</marquee>

бегущая вправо
Бегущая от края к краю строка<marquee behavior="alternate">ВАШ ТЕКСТ</marquee>бегущая от края к краю

6. Как сделать бегущую картинку?


 

<marquee><img src="адрес картинки"></marquee> - Просто вставьте между кавычками ссылку вашей картинки (http:// и т.д.)

7. Как сделать скользящий (со скроллом) текст?

Скользящий вверх текст
<marquee direction="up" scrollamount="1" scrolldelay="0" height="32">ВАШ ТЕКСТ</marquee>

Скролящийся вверх
текст с полезной
информацией,
картинкой или ещё с чем-нибудь

Скользящий вниз текст
<marquee direction="down" scrollamount="1" scrolldelay="0" height="32">ВАШ ТЕКСТ</marquee>

картинкой или ещё чем-нибудь
информацией,
текст с полезной
Скролящийся вниз

8. Как сделать списки и сноски?

Список c жирная точка спереди <ul><br /> <li>Ваш текст<br /> </li><li>Ваш текст<br /> </li></ul>

• Мужской клуб
   
• Женский клуб

Список сформируется автоматически, если добавить <ol><li> первый пункт Вашего ТЕКСТА<br /> <li> второй пункт Вашего ТЕКСТА<br /> </ol>

1. Первый пункт текста
    
2. Второй пункт текста

Сноска сверху
ТЕКСТ^сноскаТЕКСТ ^сноска
Сноска снизу
ТЕКСТ_сноскаТЕКСТ _сноска

9. Как сохранить текст таким, как вы написали?

"Закрепитель": текст остается таким, каким вы его пишете  <pre>ВАШ ТЕКСТ</pre>

Однажды

        в студеную зимнюю пору

                я из лесу вышел...

10. Как сделать всплывающую подсказку?

Текст со всплывающей подсказкой <acronym title="То, что вы пишете во всплывающей подсказке">ВАШ ТЕКСТ</acronym>
Текст со всплывающей подсказкой - наведите мышкой на это предложение, подсказка всплывет

11. Как дать ссылку на свой дневник или любой адрес?

Если хотите дать ссылку на свой дневник (например, на наше сообщество), то пишете:
<b><a href="ссылка">ВАШ ТЕКСТ например, Только для женщин</a></b>и получится так:Только для женщин

Точно также можно дать ссылку на фото, картинку или видео.
Чтобы картинка была ссылкой на веб-страницу (см. баннер "Только для мужчин" ниже, в п.15):
<a href="Адрес страницы"><img src="Адрес картинки в сети" /></a>

12. Как скрыть часть текста (убрать под кат) ?

Если у вас большой пост или много фоток в посте, лучше убрать часть его под кат, потому что людям это неудобно смотреть. Если написать

Читать далее...

Всё о NTML...

Буквально всё для новичков и не только...

Код краткой шпаргалки для Вашего блога Принципы HTML Как вставлять готовые коды Разделительные линии Способы выделения текста Списки HTML Бегущая строка Шрифты HTML Как изменить размер, цвет и шрифт текста Красивый текст Убрать под кат Цвета HTML Flash-программы по подбору цвета Таблица цвета HTML, буквенное написание Таблица HTML Как быстро скопировать изображение Как защитить изображение от копирования Фон для записи Как написать на картинке без фотошопа Оформление ссылок Кнопки для сайта Интерактивное изображение Как сделать бродилку составление кнопок бродилки в виде таблицы, имитац... Как изменить размер плеера Вставка Flash Окошко для кодов HTML-редактор Шпаргалка по HTML для блоггера

NATALKA

Ещё фаq по общим вопросам.

Самая полная инфо по настройкам дневника, приведённая нашем дорогим другом Rost


1)Как сменить ник

3)Как стать/перестать быть ПЧ?

4)По какому принципу начисляются звёздочки?

5)Не загружается музыка или видео...

6)Как поместить всю понравившуюся музыку в днев при условии, что файлов можно добавить не более, чем на 8 Мб?

7)Вопросы по поводу отношений (сколько можно выражать, как узнать, кто выразил)?

8)Как вставить в пост несколько картинок?

9)Как вставлять в дневник видео с YouTube?

10)Как регулировать получение уведомлений (подписаться/отписаться)?

11)Как скачать музыку с ли.ру?

12)Как скачать видео с ли.ру?

13)Как назначить модеров в сообщество?

14)Как вставить картинку в эпиграф и в другие поля? Как сделать так, чтобы она была посередине?

15)Как открыть/закрыть днев для определённых людей?

16)Как удалить анкету знакомств?

17)Как узнать, кто смотрел дневник?

18)Как удалить пост?

19)Как убрать/поставить схему аудитории читателей?

20)Как удалить дневник?

21)Как добавить сообщение в микроблог? Как убрать микроблог?

22)Как убрать под кат?

23)Почему не работает расширенный редактор?

24)Почему при достаточном количестве сообщений звёздочка не добавляется?

25)Чем отличается открытое сообщество от закрытого?

26)Как отправить предложение дружбы?

27)Как сделать ссылку на дневник юзера в виде ника?

28)Как создать пост только с картинкой?

29)Сколько можно добавить аватаров?

30)Как создавать рубрики?

31)Как поставить рядом с баннером окошко с кодом на него?

32)Какие спец-коды можно использовать?
Использование спецкодов.

33)Как замутить кнопку?

34)Где найти черновик?

35)Удаляется ли запись из черновика после опубликования в дневнике?

36)Как создать тест?

37)Можно ли восстановить удалённый днев? Сколько раз можно восстанавливать днев после очередного удаления? Освобождается ли ник после удаления дневника?

38)Почему дневник приглашённого отмечен красным крестиком и очки за действия приглашённого не начисляются?

39)Что означают фигурка рядом с ником? От чего зависит её цвет?

40)Где указано количество опубликованных постов и комментариев в дневнике?

41)Как определить прошлый ник пользователя?

42)Какие существуют способы добавления сообщений в дневник?

Информация будет обновляться по мере потери актуальности.
Если у вас возникнет вопрос, ответ на который вы здесь не найдёте, обратитесь к настройкам или более опытным пользователям. И не забудьте отправить модераторам просьбу включить этот вопрос в соответствующий пост. Удачного дня.

Спасибо юзерам, ссылки на дневники которых использованы.
Спасибо Leeres_Herz и kshushlin.
Огромное спасибо Rost!

И ещё, огромная просьба: ИСПОЛЬЗУЙТЕ КНОПКУ ПОИСКА ПО СООБЩЕСТВУ, ТАК КАК ВПОЛНЕ ВОЗМОЖНО, ЧТО, ДАЖЕ ЕСЛИ ОТВЕТ НА ЗАДАННЫЙ ВАМИ ВОПРОС В ЭТОМ ПОСТЕ ОТСУТСТВУЕТ, ОН УЖЕ ОБСУЖДАЛСЯ В ДАННОМ СООБЩЕСТВЕ.

СПАСИБО НАТАЛЬЕ ЗА ПОЛЕЗНОСТИ!

1 Окошечко для кодов <input type='text' size='15' value='тут код'> 1 Простая кнопочка 2 Простая рамочка 2 Кнопочки в ряд 3 Ссылка на пользователя 3 Кнопочка с картинкой 4 Кликабельная картинка (банер) 4 Кнопочка на фоне 5 Кликабельный текст (ссылка) 5 Название

 

2 1 Картинка в центре текста 1 Вложеная таблица 2 Картинка между текстом 2 Таблица с рамочкой 3 Картинка обтекаемая текстом 3 Таблица -ячейки растянуты 4 Текст на картинке 4 Таблица-растягивание ячеек-2 5 КАртинка слева от текста 5 Таблица-выравнивание текста

 

Microsoft Office Picture Manager

Про этот очень простенький графический редактор часто забывают, а ведь он входит в стандартный комплект Microsoft Office, т.е. есть практически в каждом компьютере.
С его помощью можно быстро и легко сжать или увеличить картинку, повернуть ее, обрезать, изменить насыщенность цвета, отрегулировать контрастность.
Чтобы найти этот редактор у себя в компьютере, нажмите меню "Пуск", затем - "Программы",затем - "Microsoft Office - Средства Microsoft Office", и в этой папке будет он. Или просто наведите курсор мышки на нужную картинку, нажмите на правую клавишу мышки, там появится "открыть с помощью" - выберите эту программу.
Ну а дальше все очень просто. Выберите меню "Рисунок" - практически все функции находятся именно там. И действуйте! Ничего особенно закавыристого нет.
Например, при нажатии на функцию "Обрезать" на краях картинки появляются такие треугольнички, двигая которые можно обрезать картинку, насколько необходимо.
При нажатии на функцию "Повернуть и отразить" тоже все будет сразу указано - повернуть вправо или влево, и на сколько градусов.
В общем, все очень просто, хоть выбор функций и крайне невелик)

Не хочу быть "чайником"!


ternosvit

Как делать красивый текст для оформления блога.

Существую разные стили текста, для оформления вашего блога. Придуманы не мной.Долго собирала разные необычные варианты. И в этом уроке хочу вам их предложить. Благодаря им ваш дневник будет выглядеть не ординарно,и красиво. Такими текстами можно украшать ЗАГОЛОВКИ и РАМОЧКИ. Написание цвета и коды цвета. Смотрим и выбираем понравившийся... Текст с переливающейся тенью. Ещё варианты... дневник Милолика Покровская

Все для блогов и не только

Розы на прозрачной основе. http://danalibmv.narod.ru/rozes/01.htm Фоны http://danalibmv.narod.ru/fon/01.htm Цветы для украшения http://danalibmv.narod.ru/flower/01.htm Графика http://danalibmv.narod.ru/monitor/01.htm Баннеры заготовки 468х60 http://danalibmv.narod.ru/banner/01.htm Шаблоны с графикой и фонами http://danalibmv.narod.ru/hablons/01.htm Анимашки http://danalibmv.narod.ru/animas/01.htm Web-наборы http://danalibmv.narod.ru/nabor/01.htm Красивые рамки для фото http://danalibmv.narod.ru/ramki/01.htm Поздравительные открытки Новое http://danalibmv.narod.ru/gallery/00.htm Анимированные мини-открытки http://danalibmv.narod.ru/grafika/06.htm Картинки с водяными эффектами Новое http://danalibmv.narod.ru/water/00_0.htm Красивые скрипты для страничек Новое http://danalibmv.narod.ru/logos/skript0.htm Анимированные картины в рамках Новое http://danalibmv.narod.ru/kartina/01.htm Наборы для оформления web-страниц http://danalibmv.narod.ru/nabor/0_b.htm Анимированные картинки с надписями http://danalibmv.narod.ru/grafika/01.htm Html - несколько ответов на ваши вопросы Новое http://danalibmv.narod.ru/raznoe/tegi.htm Анимированные композиции на тему "Живая природа" http://danalibmv.narod.ru/files/sd0.htm Обои на рабочий стол http://danalibmv.narod.ru/Nature/photo0.htm

"Оживляем" фото

Интересный онлайн-редактор для "оживления" фото.Вот две картинки.Одна "До..",другая "После..."

Жмите сюда,чтобы узнать как оживить фото > > >