Как сделать полоску в верху сайта

Добавил пользователь Дмитрий К.
Обновлено: 05.10.2024

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

что у меня есть в шаблоне это:

Это можно сделать только в HTML и CSS?

чтобы имитировать вторую горизонтальную полосу прокрутки поверх элемента, поместите "манекен" div над элементом, который имеет горизонтальную прокрутку, достаточно высоко для полосы прокрутки. Затем присоедините обработчики события "scroll" для фиктивного элемента и реального элемента, чтобы синхронизировать другой элемент при перемещении любой полосы прокрутки. Фиктивный элемент будет выглядеть как вторая горизонтальная полоса прокрутки над реальным элементом.

для примера см. этот скрипка

здесь код:

HTML:

CSS:

JS:

попробуйте использовать jquery.doubleScroll плагин

jQuery:

CSS

HTML

прежде всего отличный ответ @StanleyH Если кому-то интересно, как сделать контейнер двойной прокрутки с динамической шириной

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

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

Для создание линии существует несколько методов, которыми вы можете задействовать:

1. Сделайте свойство border-right или border-left таблицы нужной шириной так, чтобы оно могло действовать как вертикальная линия.
2. Сделайте свойство border-right или border-left DIV желаемым типом ширины.
3. Аналогично можете все использовать при помощи стилистике, где в CSS, прописываем все параметры.

Первый метод:

В этом методе все просто, здесь изначально обвертываем на странице в тег div, это все для того чтоб выделить элемент. Где также можете задействовать уже существующий каркас блока, где задаете границу с заданной стороны. Где появляется возможность вписать стиль в заданном вами теге.

Так получится на выходе:

Все это сделали при помощи свойства border-left, где изначально выставили границу блока по левому краю, и после этого можно уже задать параметры, как под линию, так и под ключевую фразу, что будет прикреплена.

Здесь на заметку, так как с таким же успехом свойство border-top и border-bottom можно аналогично задействовать под задание горизонтальной линии.

Второй метод:

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

По стилистике все просто, задаем требуемую высоту, также цвет фона и все остальное по оформлению.

Оба способа по свой сути похоже, только один лучше применять под оформление в материалах, а другой ставим на страницы для информации.

Как сделать горизонтальное меню: разметка и примеры оформления

HTML-разметка и базовые стили для горизонтального меню

HTML разметка для горизонтальной навигации

Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:

See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. li

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li . Дальше стилизуем ссылки по своему желанию.

Способ 2. li

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a и стилизуем их по своему желанию.

Способ 3. li

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a и стилизуем их по своему желанию.

Способ 4. ul

Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a и стилизуем их по своему желанию.

Если вы реализуете вертикальное меню в одну строку, то, как правило, между пунктами добавляются специальные разделители (как показано на иллюстрации слева). Это позволяет визуально отделить несколько ссылок между собой. Обычно для этих целей используется вертикальная полоска, но могут встречаться и любые другие символы. В статье найдете 2 метода верстки, позволяющих легко и быстро сделать разделители в меню на CSS.

В обоих случаях подразумевается, что ваша навигация создана через конструкцию списка, то есть имеет плюс-минус такое вид:

А также добавляйте всех вывод пунктов в один ряд:

Последнюю фишку можно также сделать через (но тут все зависит от вашей верстки). Перейдем непосредственно к нашему заданию.

Вариант1

В первом примере будем использовать добавление границы (border) для элементов. Вставляете в стили следующую конструкцию:

Во второй части кода селектор :last-child позволяет задать стиль последнему пункту, для которого мы рамку справа убираем. Таким образом, разделители получаются только внутри менюшки.

Вариант2

Здесь тоже нужно добавить строку с last-child дабы скрыть ненужный разделитель в меню после последнего пункта.

Также учитывайте, что в ваших сайтах используются другие ID и Class для меню/пунктов, поэтому следует подставлять данный код с поправкой на это. Возможно, придется указать отступы влево/вправо для того чтобы вертикальная полоска располагалась по центру.

От автора: Полоски достаточно просто создавать на CSS в наши дни. CSS градиенты с помощью свойства background-image отлично поддерживают нас. Я подумал, что стоит задокументировать некоторые возможности и поместить их здесь для справки.

Стандартные диагональные полоски

Диагональные полоски легко реализовать благодаря repeating-linear-gradient():

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Разве что самым последним значением параметра color-stop является 100% или (пустое значение, что означает 100%), это значение фиксировано. Помимо этого, градиент как бы начинается заново. Вот как я это вижу (с увеличением):

Диагональные градиентные полоски

Если вы сделаете фоном обычный линейный градиент, а затем сделаете половину полосок полностью прозрачными, используя повторяющийся линейный градиент (repeating-linear-gradient()), это будет выглядеть так, будто на полоски наложен градиент. Благодаря множественному фону (и порядку размещения), вы можете задать эти все свойства одному элементу:

Полоски поверх изображения

Возможно текстура? Любое изображение подойдет. Вы можете показать часть изображения, сделав некоторые полоски полностью прозрачными, а другие полностью закрашенными. Или, любым другим способом. Снова множественный фон, позволяет задать все эти свойства одному элементу.

Любое направление, любой градус

Градиент не обязан проходить под углом 45 градусов. В этом и есть красота повторяющегося линейного градиента. Это не похоже на идеальный прямоугольник, который должен сходиться и повторяться, это просто набор инструкций для отрисовки, который повторяется.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Продольные полоски (браузеры поддерживают немного лучше)

Есть очень старый синтаксис для CSS градиентов, который использовал свойство –webkit-gradient() (обратите внимание на отсутствие “linear” и “radial”). В частности Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0. Старая история. Эти браузеры не поддерживают повторяющиеся градиенты. Но вы можете их сымитировать, особенно продольные полоски, посредством небольшого прямоугольника с помощью свойства background-size, нарисовав полоски внутри, и задав им повторение естественным образом как повторяется background-image.

Читайте также: