Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 17.01.2018
Сообщений: 5
1

При уменьшении размеров дисплея, элементы перекрывают друг-друга

29.01.2018, 19:55. Просмотров 397. Ответов 0
Метки нет (Все метки)

Имеется слайдер (https://codepen.io/re1mond/pen/zRYPrY) на чистом CSS, который нормально выглядит на больших мониторах, но при уменьшении размеров дисплея, элементы начинают выезжать и перекрывать друг друга, на small дисплеях вообще какая то каша. Кто может помочь отзовитесь!

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
<!--- BOOTSTRAP CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="slider.css">
</head>
<body>
<div class="container">
    <div class="row">
    <div class="col-md-12 ">
    <div class="feedback">
        <div class="article">
        Отзывы клиентов
        </div>
        <div class="feed-back">
        <input type="radio" name="comment" id="c1" checked>
        <input type="radio" name="comment" id="c2">
        <input type="radio" name="comment" id="c3">
        <input type="radio" name="comment" id="c4">
        <div class="slide_txt" id="one">
                Заменили заднюю панель телефона (корпус). Оперативно! Качествено!<br> 
                    <h4> -Ярослав, iPhone 6s </h4>
        <label for="c4" class="pre"><span class="glyphicon glyphicon-chevron-left"></span></label>
        <label for="c2" class="nxt"><span class="glyphicon glyphicon-chevron-right"></span></label>
        </div>
        <div class="slide_txt" id="two">
Заказала плёнку, для дисплея. Всё понравилось, советую.<br> Большое спасибо!
                    <h4> -Виктория, iPhone 7 </h4>      <label for="c1" class="pre"><span><span class="glyphicon glyphicon-chevron-left"></span></label>
        <label for="c3" class="nxt"><span class="glyphicon glyphicon-chevron-right"></span></label>
        </div>
        <div class="slide_txt" id="trea">
 Оперативно! Качествено! Аккуратно!<br> Большое спасибо!
                    <h4> -Николай, iPhone X </h4>        <label for="c2" class="pre"><span><span class="glyphicon glyphicon-chevron-left"></span></label>
        <label for="c4" class="nxt"><span class="glyphicon glyphicon-chevron-right"></span></label>
        </div>
        <div class="slide_txt" id="four">
Всё круто, работаю с вами не первый раз, всё устраивает. <br> Спасибо!
                    <h4> -Максим, iPhone 5s </h4>     <label for="c3" class="pre"><span><span class="glyphicon glyphicon-chevron-left"></span></label>
        <label for="c1" class="nxt"><span class="glyphicon glyphicon-chevron-right"></span></label>
        </div>
    <div class="navv">
        <label class="dots" id="dot1" for="c1" ></label>
        <label class="dots" id="dot2" for="c2" ></label>
        <label class="dots" id="dot3" for="c3" ></label>
        <label class="dots" id="dot4" for="c4" ></label>
    </div>
    </div>
    </div>
    </div>
    </div>
</body>
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
.feedback .article {
    color: black;
    margin-top: 50px;
    text-align: center;
}
    .feed-back {
        margin: 0 auto;
        margin-top: 0px;
        position: relative;
        width: 70%;
        height: 0;
        padding-bottom:10%;
        background: #fefefe;
        color: black;
        text-align: center;
 
 
    }
    .slide_txt {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        font-size: 20px;
        padding: 0;
 
    }
    .slide_txt h4 {
 
    color: #a0a0a0;
    font-size: 18px;
}
    
        .slide_txt  img {
            width: inherit;
            height: inherit;
        }
    }
    #c1, #c2, #c3, #c4, {
        display: none;
    }
    .navv {
        width: 100%;
        height:  11px;
        bottom: -10px;
        position: absolute;
        text-align: center;
        z-index: 99;
 
    }
    .dots {
        top: -5px;
        width: 18px;
        height: 18px;
        margin: 0 4px;
        position: absolute;
        display: inline-block;
        background: #fefefe;
        border: 1px solid #6880b8;
         }
    .slide_txt {
        z-index: -1;
    }
    #c1:checked ~ #one,
    #c2:checked ~ #two,
    #c3:checked ~ #trea,
    #c4:checked ~ #four { 
    z-index: 9; 
    animation: scroll 1s ease-out;
}
 
    #c1:checked ~ .navv #dot1,
    #c2:checked ~ .navv #dot2,
    #c3:checked ~ .navv #dot3,
    #c4:checked ~ .navv #dot4 {
        background: #6880b8;
    }
.dots {
            top: -5px;
            width: 18px;
            height: 18px;
            margin: 20px 3px;
            position: relative;
            border-radius: 100%;
            display: inline-block;
            background-color: fefefe;
            transition: .4s;
            cursor: pointer;
            margin-top: 15px;
        }
.dots:hover {
    background: #6880b8;
}
input {
    display: none;
}
.slide_txt .pre {
    margin-right:  120px;
}
.slide_txt span {
    color: #6880b8;
    font-weight: 50px;
    cursor: pointer;
}
Javascript
1
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
29.01.2018, 19:55
Ответы с готовыми решениями:

Элементы с установленным z-index не перекрывают друг-друга
Div с классом round-div должен располагаться над картинкой с классом under_div, но вместо этого он...

В окне контента, товары выводятся динамически и перекрывают друг друга при использовании float:left
На изображениях показано, как товары выводятся динамически, перекрывая друг друга, а на втором...

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

Строки наезжают друг на друга при уменьшении окна браузера
При сокращении ширина браузера текст наезжает друг на друга. Я знаю про адаптивную вёрстку, но 800+...

__________________
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
29.01.2018, 19:55

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

При уменьшении окна Div залезают друг на друга, автоматическое расширение высоты блока
Здравствуйте, делая сайт столкнулся с такой проблемой. Сделана страница с новостью какой-то, но...

Элементы перекрывают друг друга
есть DockPanel в ней 3 элемента Image StackPanel Image. При уменьшении окна StacPanel перекрывается...

Фигуры перекрывают друг друга при рисовании
Пишу что-то наподобие paint на winapi, столкнулся с проблемой перекрывания фигур друг друга при...

События перекрывают друг друга
Есть некий компонент TreeView. Он подписан на событие AfterCheck. В реализации события происходит...


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

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.