10 / 10 / 4
Регистрация: 18.10.2012
Сообщений: 224
1

Не могу исправить наложение дивов друг на друга

02.10.2015, 11:54. Показов 1589. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Доброго времени суток. Делаю табы вообщем. В блоке есть 4 блока с шириной, высотой (на фоне мониторчик). Но они не встают в ряд, они накладываются друг на друга. Флоат не помогает, ничего что пробовал не помогает. В чем косяк мой и как сделать их в ряд? Заранее очень благодарен. 4 картинки располагаются в <div class="content-4">

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
 <div class="container">
        
            <section class="tabs">
                <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
                <label for="tab-1" class="tab-label-1">Сайты</label>
        
                <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
                <label for="tab-2" class="tab-label-2">Макеты</label>
        
                <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
                <label for="tab-3" class="tab-label-3">Рипы</label>
            
                <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
                <label for="tab-4" class="tab-label-4">Графика</label>
            
                <div class="clear-shadow"></div>
            
                <div class="content">
                    <div class="content-1"> 
                        <div class="job-pic wow fadeIn"></div><div class="job-pic wow fadeIn"></div>
                    </div>
                    
                    <div class="content-2"> 
                    </div>
                    <div class="content-3">
                    
                    </div>
                    <div class="content-4">
<div class="job-pic wow fadeIn"></div>
<div class="job-pic wow fadeIn"></div>
<div class="job-pic wow fadeIn"></div>
<div class="job-pic wow fadeIn"></div> 
                    </div>
                </div>
            </section>
        </div>
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
.job-pic {
    display: inline-block;
    margin: 15px; 
    background-image: url(img/iMac-Mockup.jpg);
    width: 150px;
    height: 164px;
    background-size: 100%;
    float: left;
 
}
 
.tabs {
    position: relative;
    margin: 40px auto;
    width: 790px;
}
 
.tabs input {
    position: absolute;
    z-index: 1000;
    width: 120px;
    height: 40px;
    left: 0px;
    top: 0px;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: pointer;
}
.tabs input#tab-2{
    left: 120px;
}
.tabs input#tab-3{
    left: 240px;
}
.tabs input#tab-4{
    left: 360px;
}
 
.tabs label {
    background: #27272b;
    background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
    background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
    background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
    background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
    background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
    font-size: 15px;
    line-height: 40px;
    height: 40px;
    position: relative;
    padding: 0 20px;
    float: left;
    display: block;
    width: 80px;
    color: #385c5b;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
 
.tabs label:after {
    content: '';
    background: #fff;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
}
 
.tabs input:hover + label {
    background: #5ba4a4;
}
 
.tabs label:first-of-type {
    z-index: 4;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
 
.tab-label-2 {
    z-index: 3;
}
 
.tab-label-3 {
    z-index: 2;
}
 
.tab-label-4 {
    z-index: 1;
}
 
.tabs input:checked + label {
    background: #fff;
    z-index: 6;
    
    -webkit-animation: page 0.2s linear;
    -moz-animation: page 0.2s linear;
    -ms-animation: page 0.2s linear;
    -o-animation: page 0.2s linear;
    animation: page 0.2s linear;
}
 
.clear-shadow {
    clear: both;
}
 
.content {
    background: #fff;
    position: relative;
    width: 100%;
    height: 220px;
    z-index: 5;
    overflow: hidden;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}
 
.content div {
    position: absolute;
    top: 0;
    padding: 10px 40px;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    transition: all linear 0.3s;
}
 
 
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
    -moz-transition: all ease-out 0.2s 0.1s;
    -o-transition: all ease-out 0.2s 0.1s;
    -ms-transition: all ease-out 0.2s 0.1s;
    transition: all ease-out 0.2s 0.1s;
}
 
.content div h2,
.content div h3{
    color: #398080;
}
.content div p {
    font-size: 14px;
    line-height: 22px;
    font-style: italic;
    text-align: left;
    margin: 0;
    color: #777;
    padding-left: 15px;
    font-family: Cambria, Georgia, serif;
    border-left: 8px solid rgba(63,148,148, 0.1);
}
Миниатюры
Не могу исправить наложение дивов друг на друга  
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
02.10.2015, 11:54
Ответы с готовыми решениями:

Наложение друг на друга
Добрый день форумчане у меня происходит вот такое с чем это может быть связано?

Наложение Collider2D друг на друга
Ситуация: 2 объекта находятся один на другом (наложены друг на друга). У обоих есть коллайдер...

Наложение изображения друг на друга
Допустим есть Image1. Хочу реализовать следующее: - загружаю еще картинку которую я могу...

Наложение 2 изображений друг на друга
Мучался, мучался, сам не додумался, нужна помощь:) Есть 2 изображения, ну и обычный див блок,...

4
29 / 29 / 22
Регистрация: 27.12.2013
Сообщений: 368
02.10.2015, 12:17 2
CSS
1
position: absolute;
Вот от чего все беды твои

Добавлено через 56 секунд
Посмотри свои стили внимательно, 100% где-то для этих блоков прописано позитирование - абсолютное.
1
10 / 10 / 4
Регистрация: 18.10.2012
Сообщений: 224
02.10.2015, 13:02  [ТС] 3
Farrewa, убрал абсолют, не работает. Получается в первой вкладке "Сайты" оба компьютера появляются, а в четвертой вкладке они уезжают вниз страницы куда - то и их не видно. Рабочее состояние таба херится(((
0
29 / 29 / 22
Регистрация: 27.12.2013
Сообщений: 368
02.10.2015, 14:20 4
Я смогу помочь только если у меня перед глазами будет сам html и все стили

Добавлено через 21 секунду
Там уже глядеть надо, просто так они уплыть не могут...

Добавлено через 1 минуту
"job-pic" "wow" "fadeIn"

покажи стили этих классов
1
10 / 10 / 4
Регистрация: 18.10.2012
Сообщений: 224
02.10.2015, 16:37  [ТС] 5
Farrewa, job - pic в самом начале в стилях, а те 2 класса отвечают только за появление на странице при прокрутке. Да я уже нашел альтернативное решение. Снес это все и поставил другие табы. Спасибо за помощь
0
02.10.2015, 16:37
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
02.10.2015, 16:37
Помогаю со студенческими работами здесь

Наложение Image друг на друга
немогу осуществить! использую формат пнг f хранилище для изображения на Image2 надо чтобы на f...

Наложение pictureBox друг на друга
Добрый день, есть несколько picturebox(больше 3), их можно пермещать по форме, но картинки...

Наложение элементов друг на друга!
на странице одна форма лежит поверх другой, и кнопка формы той что снизу отображается на той что...

Наложение изображений друг на друга
Здравствуйте. Задача такова. В приложение загружается произвольное изображение из галереи...

Наложение графики друг на друга
Всем привет) Подскажите плиз студенту:) В общем задача: Есть белый круг в picturebox нарисован...

Наложение изображений друг на друга
Не получается наложить изображение 4.gpeg на logo.png. Второе изображение то что 4.gpeg просто...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru