Сделал блок с выпадающей информацией. Все бы хорошо, но почему-то с первого по предпоследний блок footer прижимается к контенту(левая картинка), а если открываю последний блок, то все нормально(права картинка).
| 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
| <div id="wrapper">
<div class="blocks">
<div class="pra">
<div class="blockLink"><a href="#tab1">» Инфракрасный термальный сканер</a></div>
<a class="tabs" id="tab1"></a>
<div class="tab">
<h3>Инфракрасный термальный сканер</h3>
<p>Дин использует его, чтобы находить горячие или холодные зоны в помещении. Духи и призраки могут изменять температуру там, где они обитают, что позволяет их обнаружить благодаря сканеру.</p>
</div>
</div>
<div class="pra">
<div class="blockLink"><a href="#tab2">» ЭМИ – электромагнитный измеритель</a></div>
<a class="tabs" id="tab2"></a>
<div class="tab">
<h3>ЭМИ – электромагнитный измеритель</h3>
<p>Используется, чтобы следить за изменениями магнитного поля. Считается, что это одно из основных постоянных приспособлений у охотников, так как ЭМИ регистрирует самые малейшие изменения магнитного поля. У Дина есть такой самодельный.</p>
</div>
</div>
<div class="pra">
<div class="blockLink"><a href="#tab3">» Цифровая камера декодер</a></div>
<a class="tabs" id="tab3"></a>
<div class="tab">
<h3>Цифровая камера декодер</h3>
<p>Иногда через неё можно увидеть то, что не видно невооружённым глазом. Дин использует такую, чтобы увидеть следы спектральной активности.</p>
</div>
</div>
</div>
</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
| *{
margin:0;
padding:0;
}
body{
background:url(img/Fence.png);
}
p{
margin:10px 0;
}
#wrapper{
height:100%;
}
.pra{
border:1px #000 solid;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
width:950px;
margin:10px auto;
}
.blockLink{
padding:5px;
}
.tabs {
opacity: 0;
visibility: hidden;
}
.tab{
visibility: hidden;
z-index: 10;
margin-top:-30px;
padding:10px;
position:absolute;
height:300px;
overflow:auto;
}
.tabs:target+.tab {
opacity: 1;
visibility: visible;
margin-top:0px;
position:relative;
}
.blockLink a{
padding:5px;
text-decoration:none;
color:#000;
font-weight:bold;
}
.bold{
font-weight:bold;
}
.pra img{
float:left;
border:none;
margin:0 10px 10px 0;
}
#null{
height:60px;
}
#footer{
clear:both;
height:50px;
margin:-50px 0 0;
} |
|
Код вроде верно выложил. Буду преизнателен за помощь
(
