Блок с прокруткой на странице сайта

Здравствуйте, эта публикация открывает целую рубрику, которая будет посвещана улучшению внешнего вида и функционала вашего сайта путем внесения несущественных корректив в исходный код темы, добавления своего дополнительного функционала. Ну и вообще, всяким полезностям, которые пригодятся в нашем нелегком, но интересном занятии. Публикации будут, как обычно, изложены простыми словами и понятны новичкам.

А начнем мы с блока прокрутки на любой странице сайта.

Блок с прокруткой на странице сайта:

Иногда на своем сайте приходится публиковать какие-то коды, или длинные записи, например, в одну строку. Возникает вопрос, как это реализовать на практике. Так вот, предлагаемый метод: блок с прокруткой на странице сайта сможет сделать человек, который и представления не имеет, что такое языки HTML и CSS.

Код адаптивный, без переноса строк.

Демонстрация блока с прокруткой с текстом:

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

Код блока с прокрутками

<div style="height:200px; width:100%; border:1px solid #eeeeee; overflow:auto; word-wrap:normal; white-space:pre; padding:10px 15px;margin:20px 0px;">
Текст вставляется здесь между уголков
</div>

Этот код нужно просто скопировать или лучше скачать ниже.

Пояснения по коду:

• height:200px — Высота блока, заданная в пикселах, меняйте высоту на нужную;
• width:100% — Ширина на весь контейнер, растянут на всю ширину страницы, при изменении ширины страницы, блок подстраивается под нее;
• border:1px solid #eeeeee — Сплошная обводка блока для визуализации границ, светло-серого цвета;
• overflow:auto — Полосы прокрутки появляются только при необходимости;
• word-wrap:normal — Задаем перенос строк, а точнее, наоборот, строки не переносятся, либо переносятся принудительно. Это свойство, совместно с overflow и white-space и задает нужные параметры отображения блока с прокруткой;
• white-space:pre — Текст показывается с учетом всех пробелов и переносов и если не вмещается по ширине и высоте, то добавляются полосы прокрутки;
• padding:10px 15px — Внутренние отступы. 10px — сверху и снизу, 15px — слева и справа;
• margin:20px 0px — Внешние отступы. 20px — сверху и снизу, 0px — слева и справа;

Найдите справочник CSS в интернете и меняйте стили блока с прокруткой под дизайн своего сайта.

Я подготовил дополнительно текстовый файлик. Скачать файл прокрутки можно здесь:

 
Теперь остается открыть скачаный файл в notepad++, кстати, кто еще не установил его себе на компьютер, то советую установить. Как раз для редактирования небольших кодов подойдет. Ну или можно открыть этот файл любым текстовым редактором, какой есть у вас в наличии и заменить надпись «Текст вставляется здесь» на любую свою запись, или код, требующий неразрывной строки. Эта прокрутка работает как вертикально, так и горизонтально.

Далее копируем и вставляем уже в редакторе своего сайта в статью (имеется ввиду текстовый редактор который используется когда вы публикуете запись или страницу), где угодно. Смотрим как получилось, регулируем размеры блока прокрутки, если надо. Вставлять прокрутку нужно в текстовом, html режиме редактирования. Должно получиться как у меня в демо примере.

Ну как вам? Все довольно легко и просто! Не забывайте делится статьей с одномышленниками в соц. сетях. Задавайте вопросы, делитесь своими мыслями на этот счет. До скорых встреч!

Информация сделать рассылку смс здесь. Стоимость занятии на тренажере правило в москве trenager-pravilo.ru.

Похожие по Тегам статьи

Создание Video Background HTML 5

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Оформление текста в HTML — Выноски Callout

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Слайдер Bootstrap Ken Burns Effect Carousel

Собрал слайдер Bootstrap Ken Burns Effect Carousel и теперь делюсь с читателями своего сайта….