Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 20. Перемещение полосы прокрутки
Не нравится(-) 14 Нравится(+)
18-07-2008, 01:02 - GZ Design (Уроки CSS)
Урок CSS 20. Перемещение полосы прокрутки

Здравствуйте уважаемые посетители! Сегодня, мы с вами поговорим о способе переместить вертикальную полосу прокрутки на левый край блока, что может быть оправданным и достаточно эффектным дизайнерским решением.
Сразу скажу, что не все браузеры поддерживают эксперименты с полосами прокрутки. Mozilla Firefox - не поддерживает никаких изменений полос. Многие дизайнеры и верстальщики рассчитывали, что эта крайне неприятная особенность будет устранена в 3-й версии, но этого не произошло...
Итак, начнём наш урок...
Для принципа оформления полосы прокрутки, мы взяли цветовую гамму из урока №10. Теперь переместим полосу.
По традиции, создаём 2 файла: index.html и style.css"scriptcode"><html>
<head>
<link rel="stylesheet" href="style.css"scriptcode"><div id="all">
<div dir="ltr">
Российская школа CSS. Урок CSS №20.
</div>
</div>
</body>
</html>

Вот и всё. Дальше, нам предстоят работы только с CSS. Запишем туда общие стили для полос прокрутки:
/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://css-school.ru
Урок CSS №20 Перемещение полосы прокрутки
style.css"scriptcode">#all {
    direction:rtl;
    width:300px;
    height:100px;
    overflow:auto;
    padding:10px;
    border:1px solid #ffc000;
    background:#2c6eb1;
    color:#fff;
}

Итак, если всё сделано правильно и Вы не используете браузер Mozilla Firefox, то должно получиться примерно так:
Урок CSS 20. Перемещение полосы прокрутки

Вот и всё. Желаю Вам удачно поэкспериментировать!
Спасибо за внимание!



Совместимость: Internet Explorer 6 - 7; Opera 8.хх - 9.xx.
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 0.86 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 21148 раз(а) и написали 7 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июль 2019    »
ПнВтСрЧтПтСбВс
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!