Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 21.11.2015, 10:47   #1
nikolokaputik80
Пользователь
 
Регистрация: 30.09.2015
Сообщений: 74
По умолчанию Блок ссылок с полосой прокрутки

Привет!
Может кто подскажет как сделать вот такую верстку на CSS
как она должна выглядеть визуально я преложил скрин!

это блок ссылок к примеру из 50 штук
на сайте выводится только 13 к примеру на рисукнке
чтобы увидеть остальные нужно прокрутить полосу прокрутки!
собственно в этом у меня и вопрос к гуру верстки - как на цсс это сделать
важно что бы эти стили отображались во всех браузерах одинаково
может кто поможет, или даст линк на пример в интернете
вот мой код хтмл с блоком ссылок
Спасибо!


Код HTML:
 <div class="scroll-block">
      <ul>
        <li><a class="tip" href="link">Ссылка -1</a></li>
        <li><a class="tip" href="link">Ссылка -2</a></li>
        <li><a class="tip" href="link">Ссылка -3</a></li>
        <li><a class="tip" href="link">Ссылка -4</a></li>
        <li><a class="tip" href="link">Ссылка -5</a></li>
        <li><a class="tip" href="link">Ссылка -6</a></li>
        <li><a class="tip" href="link" title="19174">Ссылка -7</a></li>
        <li><a class="tip" href="link" title="8525">Ссылка -8</a></li>
        <li><a class="tip" href="link" title="2552">Ссылка -9</a></li>
        <li><a class="tip" href="link" title="21537">Ссылка -10</a></li>
        <li><a class="tip" href="link" title="46259">Ссылка -11</a></li>
        <li><a class="tip" href="link" title="2768">Ссылка -12</a></li>
        <li><a class="tip" href="link" title="3013">Ссылка -13</a></li>
      </ul>
    </div>

Скриншот блока ссылок
nikolokaputik80 вне форума Ответить с цитированием
Старый 21.11.2015, 13:23   #2
Вадим Мошев

Старожил
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Сообщений: 8,568
По умолчанию

На CSS не получится оформить полосу прокрутки таким образом (работать будет только в IE). Такое оформление достигается с помощью JQuery плагина Baron.js.

А вот организация полосы прокрутки делает за счёт придания блоку (контейнеру) с содержимым свойства overflow со значением hidden.

Такое сделано, например, на сайте http://pk-steelcom.ru/ (главная страница, блок "О компании").
Вадим Мошев вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как убрать скачок страницы с полосой прокрутки? shavedcat HTML и CSS 13 07.03.2014 01:18
header и footer(всегда прилеплен снизу) фиксированной высоты, резиновый контент в центре с полосой прокрутки Munk HTML и CSS 0 17.07.2011 16:10
Полосы прокрутки Hausedark Общие вопросы Delphi 2 12.07.2010 09:58
Как заставить ролик на мышке двигать полосой прокрутки clanz Microsoft Office Access 4 28.02.2010 16:41
первый блок должен заливать весь фон, а второй блок блок выводить сплошную горизонтальную балку SanBorisych HTML и CSS 2 12.01.2010 17:42