Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.93/15: Рейтинг темы: голосов - 15, средняя оценка - 4.93
0 / 0 / 1
Регистрация: 14.04.2015
Сообщений: 49
1

Горизонтальная полоса на весь экран обходя элементы

30.07.2016, 08:32. Показов 2758. Ответов 7
Метки css и js, верстка html css, слайдер (Все метки)
Author24 — интернет-сервис помощи студентам
Здравствуйте! необходимо сделать горизонтальную полосу(где круглые переключатели) как на картинке. Переключатели реализовал, а как сделать полосу, ума не приложу. Помогите пожалуйста) Страница с тестовым хостингом http://mrc.bukettrav.ru
Горизонтальная полоса на весь экран обходя элементы

Код CSS
CSS
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

/**
 * BxSlider v4.0 - Fully loaded, responsive content slider
 * [url]http://bxslider.com[/url]
 *
 * Written by: Steven Wanderski, 2012
 * [url]http://stevenwanderski.com[/url]
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * [url]http://bxcreative.com[/url]
 */
 
 
/** RESET AND LAYOUT
===================================*/
 
.bx-wrapper {
    position: relative;
    margin: 0 auto 60px;
    padding: 0;
    *zoom: 1;
}
 
.bx-wrapper img {
    max-width: 100%;
    display: block;
}
 
/** THEME
===================================*/
 
.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    /*border: solid #fff 5px;*/
    left: px;
    background: #fff;
}
 
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}
 
/* LOADER */
 
.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(images/bx_loader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}
 
/* PAGER */
 
.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color: #666;
    padding-top: 20px;
}
 
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}
 
.bx-wrapper .bx-pager.bx-default-pager a {
    background: #005EA8;
    text-indent: -9999px;
    border: 1px solid #EEE2E2;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
 
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #fff;
}
 
/* DIRECTION CONTROLS (NEXT / PREV) */
 
.bx-wrapper .bx-prev {
    left: 10px;
    background: url(images/controls.png) no-repeat 0 -32px;
}
 
.bx-wrapper .bx-next {
    right: 10px;
    background: url(images/controls.png) no-repeat -43px -32px;
}
 
.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}
 
.bx-wrapper .bx-next:hover {
    background-position: -43px 0;
}
 
.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
}
 
.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}
 
/* AUTO CONTROLS (START / STOP) */
 
.bx-wrapper .bx-controls-auto {
    text-align: center;
}
 
.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -11px no-repeat;
    margin: 0 3px;
}
 
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0;
}
 
.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -44px no-repeat;
    margin: 0 3px;
}
 
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px;
}
 
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
 
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}
 
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}
 
/* IMAGE CAPTIONS */
 
.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666\9;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
}
 
.bx-wrapper .bx-caption span {
    color: #fff;
    font-family: Arial;
    display: block;
    font-size: .85em;
    padding: 10px;
}
0
Лучшие ответы (1)
Сообщение: #9415516
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 30.07.2016, 08:32
Ответы с готовыми решениями:

Прозрачная горизонтальная полоса во время игр делит экран пополам
Здравствуйте,проблема такова:В общем покупал год назад компьютер, установил на него винду, дрова с...

Прямоугольная полоса на весь экран
Всем привет! Помогите подсказкой, как создать прямоугольную полоску (не кликабельную, прозрачную)...

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

Горизонтальная полоса
Здравствуйте, появилась широкая,прозрачная, светлая полоса на 1/3 монитора Acer AL2216W. В чем...

7
14 / 14 / 7
Регистрация: 17.08.2015
Сообщений: 44
30.07.2016, 09:11 2
Попробуйте так
CSS
1
2
3
4
5
6
7
8

.bx-default-pager {
    border-bottom: 1px solid #fff;
}
.bx-pager-item {
    position: relative;
    top: 7px;
    background-color: #0049ef;
}
0
0 / 0 / 1
Регистрация: 14.04.2015
Сообщений: 49
30.07.2016, 10:12  [ТС] 3
К сожалению эффекта не дает.
0
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,057
30.07.2016, 13:29 4
Petrouch, Добавляете в конец каждого переключателем тег:
HTML5
1

<hr style="margin-top: -8px;">
Предварительно обернув переключателе, и задав и отступ пример тут.
песочница
CSS
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
32
33
34

body {
  background: #0049ef;
}
 
div {
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
.wr{
   background: #0049ef;
   display:inline-block;
   width:20%;
}
a {
  background: #005EA8;
  text-indent: -9999px;
  border: 1px solid #EEE2E2;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
}
 
hr {
  margin-top: -10px;
  position:relative;
  z-index:-1;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11

<div>
  <div class="wr">
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
  </div>
 
  <hr>
</div>
0
14 / 14 / 7
Регистрация: 17.08.2015
Сообщений: 44
30.07.2016, 13:41 5
Через инструменты разработчика добавляю эти свойства у вас на сайте, и всё прекрасно получается
Миниатюры
Горизонтальная полоса на весь экран обходя элементы  
1
0 / 0 / 1
Регистрация: 14.04.2015
Сообщений: 49
30.07.2016, 19:36  [ТС] 6
Если не трудно можешь выложить в коде который я тебе скинул свои исправления.
0
14 / 14 / 7
Регистрация: 17.08.2015
Сообщений: 44
30.07.2016, 19:40 7
Лучший ответ Сообщение было отмечено Petrouch как решение

Решение

Petrouch, просто добавьте эти 2 селектора в свой CSS код
CSS
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

.bx-wrapper {
    position: relative;
    margin: 0 auto 60px;
    padding: 0;
    *zoom: 1;
}
 
.bx-wrapper img {
    max-width: 100%;
    display: block;
}
.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    /*border: solid #fff 5px;*/
    left: px;
    background: #fff;
}
 
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}
 
/* LOADER */
 
.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(images/bx_loader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}
 
/* PAGER */
 
.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color: #666;
    padding-top: 20px;
}
 
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}
 
.bx-wrapper .bx-pager.bx-default-pager a {
    background: #005EA8;
    text-indent: -9999px;
    border: 1px solid #EEE2E2;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
 
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #fff;
}
 
/* DIRECTION CONTROLS (NEXT / PREV) */
 
.bx-wrapper .bx-prev {
    left: 10px;
    background: url(images/controls.png) no-repeat 0 -32px;
}
 
.bx-wrapper .bx-next {
    right: 10px;
    background: url(images/controls.png) no-repeat -43px -32px;
}
 
.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}
 
.bx-wrapper .bx-next:hover {
    background-position: -43px 0;
}
 
.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
}
 
.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}
 
/* AUTO CONTROLS (START / STOP) */
 
.bx-wrapper .bx-controls-auto {
    text-align: center;
}
 
.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -11px no-repeat;
    margin: 0 3px;
}
 
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0;
}
 
.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -44px no-repeat;
    margin: 0 3px;
}
 
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px;
}
 
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
 
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}
 
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}
 
/* IMAGE CAPTIONS */
 
.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666\9;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
}
 
.bx-wrapper .bx-caption span {
    color: #fff;
    font-family: Arial;
    display: block;
    font-size: .85em;
    padding: 10px;
}
.bx-default-pager {
    border-bottom: 1px solid #fff;
}
.bx-pager-item {
    position: relative;
    top: 7px;
    background-color: #0049ef;
}
1
0 / 0 / 1
Регистрация: 14.04.2015
Сообщений: 49
03.08.2016, 00:12  [ТС] 8
Реально помогли! Спасибо огромное!
0
03.08.2016, 00:12
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 03.08.2016, 00:12
Помогаю со студенческими работами здесь

Горизонтальная полоса
Здравствуйте Имеется ноут, по словам хозяина его уронили. При включение через какое-то время...

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

Горизонтальная полоса прокрутки
Здравствуйте, когда у меня загружается эта страница, появляется горизонтальная полоса прокрутки.:-|...

Горизонтальная полоса и масштабирование
Добрый день, при масштабировании и прокрутке горизонтальной полосы, справа пропадает фон шапки


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru