Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
 
 
Рейтинг 4.55/22: Рейтинг темы: голосов - 22, средняя оценка - 4.55
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52

Слайдер съезжает в разных браузерах

18.11.2015, 19:43. Показов 5169. Ответов 72
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
стоял флеш, делал в Macromedia Dreamweaver 8. работал прекрасно , но в телефонах и планшетах не видимый, поставил слайдер вот исходник http://ruseller.com/lessons.php?rub=2&id=1475, в хроме работает нормально, в IE слайдер сдвинут в право и не работает, думаю что в других браузерах тоже проблемы, вот мой сайт со слайдером. минипакдв.рф на фото как сайт выглядит в хроме и IE.
Сразу прошу прощения я лузер поэтому на языке супер программистов, сленге, прошу не объяснять лучше пальцем покажите, шутка. Других браузеров у меня нет если проверите на других и покажите как работает буду очень благодарен. Заранее спасибо
HTML5
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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css"/>
<script type="text/javascript" src="fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
$("a.first").fancybox(); 
$("a.two").fancybox(); 
$("a.video").fancybox({"frameWidth":560,"frameHeight":340}); 
$("a.content").fancybox({"frameWidth":600,"frameHeight":300}); 
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<meta name="keywords" content=" порционные продукты купить"/>
<meta name="description" content="Производство продуктов питания для фаст фуда .Борт питание (аэропорт , ж\д). Порционные продукты, мелкая фасовка. Хорека."/>
<title>Порционные продукты, мелкая фасовка, хорека.</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<!--
body {
    margin-left: 0px;
}
.style12 {  font-size: 14px;
    font-weight: bold;
    font-style: italic;
}
.style16 {font-size: 14px; font-weight: bold; }
.style5 {   font-family: "Comic Sans MS";
    font-size: 28px;
}
.style9 {   font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    color: #FF0000;
    font-weight: bold;
}
.style31 {
    color: #FF0000;
    font-size: 30px;
}
.style41 {
    font-size: 12px;
    color: #003333;
}
.style40 {
    color: #003333;
    font-weight: bold;
}
.style42 {color: #003333; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
-->
</style></head>
<body>
<center>
  <div id="main">
    <div style="background:url(images/corner-topmid.gif); background-repeat:repeat-x; height:24px; width: 808px;"></div>
    <div id="container">
      <div id="header"><img src="images/graphic-left.GIF" alt="порционные продукты, мелкая фасовка, хорека, хабаровск" width="234" height="264" /><img src="images/graphic-right.GIF" alt="порционные продукты, мелкая фасовка, хорека, хабаровск" width="439" height="264" /></div>
      <div></div>
    </div>
    <p><img src="images/corner-midtop.gif" alt="1" width="786" height="28" /></p>
    <div id="container1">
<ul class="vert_menu">
    <li><a href="porsion.html"><span>СОУСЫ</span></a></li>
    <li><a href="spezii.html"><span>СПЕЦИИ</span></a></li>
    <li><a href="horeka.html"><span>ХОРЕКА</span></a></li>
    <li><a href="partneri.html"><span>ПАРТНЕРЫ</span></a></li>
    <li><a href="prise.html"><span>ПРАЙС</span></a></li>
    <li><a href="kontakt.html"><span>КОНТАКТЫ</span></a></li>
    <li><a href="spros.html"><span>СКОРО</span></a></li>
  </ul>
</div>
    <div class="slides">
      <ul>
        <li><a href="porsion.html"><img src="images/pic1.jpg" alt="порционные продукты, мелкая фасовка, хорека, хабаровск" border="0" /></a>
            <div>Порционные продуты</div>
        </li>
        <li><a href="horeka.html"><img src="images/pic2.jpg" alt="порционные продукты, мелкая фасовка, хорека, хабаровск" border="0" /></a>
            <div>Снабжение ресторанов</div>
        </li>
        <li><a href="porsion.html"><img src="images/pic3.jpg" alt="порционные продукты, мелкая фасовка, хорека, хабаровск" border="0" /></a>
            <div>Новый продукт</div>
        </li>
        <li><a href="spezii.html"><img src="images/pic4.jpg" alt="порционные продукты, мелкая фасовка, хорека, хабаровск" border="0" /></a>
            <div>Порционные специи</div>
        </li>
      </ul>
    </div>
 
 
[CSS]body{background-color:#e1e9ca;background-image:url(../images/bg.gif);background-repeat:repeat-x; background-attachment: fixed;background-position: bottom;}
#main{
    margin-top:24px;
    overflow:hidden;
    background:url(../images/bg-mid.gif);
    background-repeat:repeat-y;
    margin-bottom:50px;
    width: 808px;
}
#container{
    width:750px;
    overflow:hidden;
    height: 264px;
}
#container1{
    float:left;    
    width:230px;
    overflow:hidden;
    height: 330px;
}
#container3{
    width:220px;
    overflow:hidden;
    height: 750px;
    float: left;
}
#container4{
    width:560px;
    overflow:hidden;
    height: 500px;
}
 
ul {
    list-style: none;
        margin: 0;
        padding: 0;
}
 
 
.vert_menu {
    font-weight: bold;
    font-family: Verdana, Helvetica, sans-serif;
    text-decoration: none;
    font-size: 99%;
    width: 212px;   
}
 
.vert_menu li {
    height: 45px;
}
 
.vert_menu li a:link, .vert_menu li a:visited {
        text-decoration: none;  
        color: #FFFFFF;
        display: block;
        background:  url(../images/vert_menu.png) 0 0 no-repeat;
        padding: 10px 0 10px 10px;
}
 
.vert_menu li a:hover, .vert_menu li #current {
    color: #FFF;
    background: url(../images/vert_menu.png) 0 -44px no-repeat;
    padding: 10px 0 10px 15px;
}
.slides {
    width: 570px;
    height: 332px;
}
 
/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
 
.slides ul li {
    opacity:0;
    top:390px;
 
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
 
    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    left: 442px;
    position: absolute;
    width: 558px;
    height: 321px;
}
 
/* Задержки css3 */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
 
/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
 
.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:20px;
    left:6px;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:194px;
    width:200px;
 
    /* Анимация css3 */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
 
    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
[/CSS]
Миниатюры
Слайдер съезжает в разных браузерах   Слайдер съезжает в разных браузерах  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
18.11.2015, 19:43
Ответы с готовыми решениями:

Вставляю слайдер - футер съезжает
А такой еще вопрос: Почему когда я в блок вставляю вот этот слайдер http://demo.webdeveloperplus.com/featured-content-slider/ то у...

Съезжает картинка в мобильных браузерах
Здравствуйте господа кудесники, проблема в том, что код по непонятным мне причинам отказывается адекватно работать в мобильных...

В мобильных браузерах съезжает пункт меню
Здравствуйте! Верхнее меню сайта http://alibabamebel.ru нормально отображается на пк, но в некоторых мобильных браузерах, yandex например,...

72
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
20.11.2015, 17:25  [ТС]
Студворк — интернет-сервис помощи студентам
я просто не могу поставить заголовки внизу
0
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
20.11.2015, 17:28  [ТС]
"скачать" поставил не могу раздвинуть, и еще нельзя как то по красивей вместо слова кнопку привязать
Миниатюры
Слайдер съезжает в разных браузерах  
0
 Аватар для mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
20.11.2015, 17:56
В файле colorbox.css найдите #cboxTitle и поставьте ему display: none;
Найдите #cboxContent и уберите у него белый фон
Найдите #cboxLoadedContent и уберите у него margin-bottom

Добавлено через 5 минут
По поводу скачивания документов: http://jsfiddle.net/b1cg2vnv/59/
Посмотрите как я сделал, сделайте так же у себя, оберните изображения в ссылки и добавьте спаны с текстом скачать после изображений
0
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
20.11.2015, 18:03  [ТС]
я уже убрал полоску, "скачать" поставил не могу раздвинуть, и еще нельзя как то по красивей вместо слова кнопку привязать
0
 Аватар для mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
20.11.2015, 18:10
Я вам советую сделать так, как я привел пример, т.е кнопка скачать будет под каждым документом, это удобно.
Вот вам кнопки, не слишком правильно сделано, однако пользователь потянется нажать именно кнопку http://jsfiddle.net/b1cg2vnv/66/
0
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
20.11.2015, 18:20  [ТС]
скачать стало нормально но скачивать перестала
0
 Аватар для mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
20.11.2015, 18:24
<a href="https://www.cyberforum.ru/html/..." download> download - не затерли?
0
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
20.11.2015, 18:29  [ТС]
так сейчас же вот это <a href="href"><img src="images/свидетельство1.jpg" height="350" width="240"><span>Скачать</span></a>
0
 Аватар для mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
20.11.2015, 18:30
Это я написал для примера, в этот пример в ссылку вам и нужно дописать вот так:
HTML5
1
<a href="href" download><img src="images/свидетельство1.jpg" height="350" width="240"><span>Скачать</span></a>
1
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
20.11.2015, 18:47  [ТС]
дописал download>, видимо я чето не догоняю все равно перестал качать

Добавлено через 3 минуты
ура победил <a href="images/приказ.JPG" download><img src="images/свидетельство1.jpg" height="350" width="240"><span>Скачать</span></a>

Добавлено через 26 секунд
так

Добавлено через 7 минут
а можно сделать чтобы только кнопка работала на скачивание, вдруг кто то просто посмотреть хочет
0
 Аватар для mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
20.11.2015, 18:55
да, для этого следует переделать структуру вот так http://jsfiddle.net/b1cg2vnv/87/
1
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
20.11.2015, 18:57  [ТС]
и еще у меня еще три документа я скопировал певрые вставил вниз а они вертикално
0
 Аватар для mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
20.11.2015, 19:02
Если вы скопировали мою структуру и стили, то ничего не должно падать, как минимум 2-3 документа должны стоять в строку ...
1
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
20.11.2015, 19:15  [ТС]
вот
Миниатюры
Слайдер съезжает в разных браузерах  
0
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
20.11.2015, 19:42  [ТС]
все получилось прекрасно, большое спасибо скажите если устав несколько листов можно одним нажатием скачать несколько листов

Добавлено через 6 минут
пора спать 3 часа ночи до завтра
0
 Аватар для mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
20.11.2015, 20:39
Вы можете поместить все документы в архив и сделать отдельную ссылку на этот архив с надписью Скачать все. Еще скорее всего можно написать скрипт для этого, чтоб не делать архив, но в этом я пока что врядле помогу ...
0
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
21.11.2015, 07:21  [ТС]
все сделал, все работает, осталось две проблемы, ошибки валидотора, кто нибудь поможет, и самое главное, все что мы делали было из за того что в телефоне и планшете не отображался флеш а предыдущий слайдер криво отображался, так вот сейчас в телефоне фон сайта сьезжает
Миниатюры
Слайдер съезжает в разных браузерах   Слайдер съезжает в разных браузерах  
0
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
21.11.2015, 07:25  [ТС]
не должно быть светлой полоски
Миниатюры
Слайдер съезжает в разных браузерах  
0
0 / 0 / 0
Регистрация: 18.11.2015
Сообщений: 52
21.11.2015, 07:27  [ТС]
и вот тут не понятки с фоном
Миниатюры
Слайдер съезжает в разных браузерах  
0
 Аватар для mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
21.11.2015, 14:14
Ну первое, на самом деле чутка огорчу, потому что сама верстка, графика вашего сайта оставляет желать лучшего, простите за небольшую критику, но без этого никакого движения никогда не происходит, особенно в лучшую стуорону.. Для того чтоб все смотрелось более менее адекватно, следует серьезно заняться реконструкцией html, css и тому подобное. Это все улучшит как вид, так и оптимизацию загрузки.

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

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

Вот пожалуйста вам простой пример как ваш фон и контейнер будет выглядеть средствами чисто css и html http://jsfiddle.net/b1cg2vnv/129/
Он не совсем идеальный, но для наглядности подойдет.

А для мобильных телефонов, лучше всего сайт адаптировать. Это совсем другая история.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
21.11.2015, 14:14

При переключении слайдеров в slick слайдер съезжает блок
Установила два слайда с помощью slick слайдера, которые переключаются между собой при нажатии на ссылку выше. При переключении с одно...

Программа для проверки шаблона в разных браузерах при разных разрешениях
Всем доброго времени суток. Я занимаю версткой сайтов и сейчас хочу узнать есть ли программы для проверки сверстанного шаблона в разных...

Элементы находятся в разных местах в разных браузерах
В Хроме всё отображается как нужно, в Мозилле - надпись &quot;Вертянка&quot; уходит далеко от синей штуки. Как можно подправить, чтоб во всех...

В разных браузерах на разных позициях
Привет! Кто знает почему сайт по одному и тому же запросу находится на разных позициях в разных браузерах? напр., 9 и 13. Как поисковый...

Некорректно отображается слайдер в IE , в остальных браузерах все хорошо
сайт : amodovo.ru написан на битриксе


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

Или воспользуйтесь поиском по форуму:
60
Ответ Создать тему
Новые блоги и статьи
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого
zorxor 21.09.2026
Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .
Мобильное приложение ColorStep
pavlinmavlin 17.09.2026
Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .
Запрет дублирования строк в табличной части
Maks 13.09.2026
Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр.
Jin X 06.09.2026
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .
Программа опроса у.з. расходомера SLS-720F
Argus19 02.09.2026
Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0.
Maks 31.08.2026
При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .
Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм
anaschu 30.08.2026
Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы.
russiannick 30.08.2026
Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru