Учимся делать рамочки 6



А сейчас поучимся делать рамку с прокруткой,это довольно сложно,поэтому начнем с самой простой рамки в этом случае.
Вот с такой:

 

ВАШ ТЕКСТ

За основу взяла самую постую рамочку с картинкой:
 

ВАШ ТЕКСТ

А это рамочка прокрутки которую мы будем вставлять в нашу рамочку:
 

сейчас мы разберем ее на части и посмотрим,что за что отвечает:
1.Здесь задаем расположение нашей рамки по центру:

2.Это есть начало нашей прокрутки(то есть задвается сама таблица и дальне пойдут теги ее оформления):

3.это задает режим прокрутки(дословный перевод мне не понятен):

4.здесь мы задаем цвет треугольничков прокрутки:

вот эти треугольнички:

5.здесь задается цвет бортика и его размер(по порядку):

6.здесь задаем размеры нашей прокрутки
(первый размер это ширина,ее лучше задавать в %,
и она сама растянется по нашей основной рамочке;второй размер это ее высота,ее задаем так как нам удобно):

7.эта команда задает цвет нашего фона(можно задавать числовым кодом,как для текста):

8.следующая команда применяется,если мы хотим ставить фоном картинку.
В этом случае предыдущая команда просто полностью удаляется,а вместо обведенного URL ,ставим адрес картинки без ковычек(что такое адрес картинки было описано в прошлых уроках(принцип смены фона таблицы).):

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

В принципе все,если что не понятно пещите,дополню урок.


Я пользуюсь вот этой подсказкой,здесь много разных тег,которыми можно дополнить нашу рамочку прокрутки:

Можно менять цвет прокрутки:
scrollbar-face-color - это цвет передней стороны панели прокрутки
scrollbar-track-color - это цвет полосы, по которой "ходит" панель прокрутки.
scrollbar-arrow-color - это цвет треугольника на верхнем и нижнем квадратах.
scrollbar-shadow-color - это цвет нижней и правой граней панели прокрутки.
scrollbar-darkshadow-color - это цвет тени от панели прокрутки.
scrollbar-highlight-color - это цвет верхней и левой граней панели прокрутки
scrollbar-3dlight-color - это цвет отсвета.
#FFFFFF - это коды цвета, которые можно менять.
*******
Внешний отвечает за фон, рамку и размер:
свойство border определяет вид границы - стиль, цвет и ширину;
- свойство background-color определяет цвет фона, который вы видите, пока подгружается фоновая картинка background-image (или в случае, если у вас отключена подкачка картинок);
- свойства width и height определяют соответственно ширину и высоту слоя, измеряются в пикселях. Можно также и в процентах (от размера окна).
*******
Внутренний div отвечает за стиль шрифта и прокрутку.
Даже если текста много, можно запихнуть его в маленькое окошко:
- свойство border определяет вид границы - стиль, цвет и ширину;
- свойство background-image определяет очередную фоновую картинку;
- свойство overflow регулирует реакцию браузера, если реальные размеры блока не соответствуют заданным и может возникнуть его переполнение.