Laat elemente fixed staan op een achtergrond afbeelding
Elke keer als ik inzoom gaan de elementen naar rechts verschuiven:
css:
Code (php)
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
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
#FWTableContainer635598069 {
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-repeat: no-repeat;
background-position: top center;
background-color: #211E23;
background-image: url('../img/Layer.jpg');
height: 469px;
background-size: 1990px 469px;
.rgba(@bluebox-text-option, 0.5); */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateZ(0);
.visibility();*/
}
.middle_row
{
margin: 0 auto;
width: 400px;
}
.left_row
{
float: left;
width: 200px;
margin-top: -160px;
margin-left: 96px;
}
.right_row
{
float: right;
width: 200px;
margin-right: 115px;
margin-top: -165px;
}
#download_btn
{
margin-top: -15px;
}
#FWTableContainer635598069 #table {
width: 1990px;
position:fixed;
height: 469px;
margin: 0 auto;
}
#main_button
{
margin: 0 auto;
width: 508px;
height: 235px;
}
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-repeat: no-repeat;
background-position: top center;
background-color: #211E23;
background-image: url('../img/Layer.jpg');
height: 469px;
background-size: 1990px 469px;
.rgba(@bluebox-text-option, 0.5); */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateZ(0);
.visibility();*/
}
.middle_row
{
margin: 0 auto;
width: 400px;
}
.left_row
{
float: left;
width: 200px;
margin-top: -160px;
margin-left: 96px;
}
.right_row
{
float: right;
width: 200px;
margin-right: 115px;
margin-top: -165px;
}
#download_btn
{
margin-top: -15px;
}
#FWTableContainer635598069 #table {
width: 1990px;
position:fixed;
height: 469px;
margin: 0 auto;
}
#main_button
{
margin: 0 auto;
width: 508px;
height: 235px;
}
html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="FWTableContainer635598069">
<div id="table">
<div class="middle_row">
<div id="main_button"><a href="javascript:;" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuShowMenu('MMMenuContainer1014185857_0', 'MMMenu1014185857_0',0,235,'header2ro1_r1_c4');"><img name="header2ro1_r1_c4" src="views/assets/img/header2ro1_r1_c4.jpg" width="508" height="235" alt=""></a></div>
</div>
<div class="left_row">
<div id="download_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r2_c2','','views/assets/img/download.png',1);"><img name="header2ro1_r2_c2" src="views/assets/img/header2ro1_r2_c2.jpg" width="198" height="60" alt=""></a></div>
<div id="install_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r4_c2','','header2ro1_r3_c1.gif','header2ro1_r4_c2','','views/assets/img/install.png',1);"><img name="header2ro1_r4_c2" src="views/assets/img/header2ro1_r4_c2.jpg" width="198" height="47" alt=""></a></div>
<div id="uploadnow_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r6_c2','','views/assets/img/uploadnow.png',1);"><img name="header2ro1_r6_c2" src="views/assets/img/header2ro1_r6_c2.jpg" width="198" height="54" alt=""></a></div>
</div>
<div class="right_row">
<div id="takeatour_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r2_c6','','views/assets/img/takeatour.png',1);"><img name="header2ro1_r2_c6" src="views/assets/img/header2ro1_r2_c6.jpg" width="191" height="60" alt=""></a></div>
<div id="sendmess_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r4_c6','','views/assets/img/sendmess.png',1);"><img name="header2ro1_r4_c6" src="views/assets/img/header2ro1_r4_c6.jpg" width="191" height="47" alt=""></a></div>
<div id="instantaccess_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r6_c6','','views/assets/img/instantaccess.png',1);"><img name="header2ro1_r6_c6" src="views/assets/img/header2ro1_r6_c6.jpg" width="191" height="54" alt=""></a></div>
</div>
<div id="table">
<div class="middle_row">
<div id="main_button"><a href="javascript:;" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuShowMenu('MMMenuContainer1014185857_0', 'MMMenu1014185857_0',0,235,'header2ro1_r1_c4');"><img name="header2ro1_r1_c4" src="views/assets/img/header2ro1_r1_c4.jpg" width="508" height="235" alt=""></a></div>
</div>
<div class="left_row">
<div id="download_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r2_c2','','views/assets/img/download.png',1);"><img name="header2ro1_r2_c2" src="views/assets/img/header2ro1_r2_c2.jpg" width="198" height="60" alt=""></a></div>
<div id="install_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r4_c2','','header2ro1_r3_c1.gif','header2ro1_r4_c2','','views/assets/img/install.png',1);"><img name="header2ro1_r4_c2" src="views/assets/img/header2ro1_r4_c2.jpg" width="198" height="47" alt=""></a></div>
<div id="uploadnow_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r6_c2','','views/assets/img/uploadnow.png',1);"><img name="header2ro1_r6_c2" src="views/assets/img/header2ro1_r6_c2.jpg" width="198" height="54" alt=""></a></div>
</div>
<div class="right_row">
<div id="takeatour_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r2_c6','','views/assets/img/takeatour.png',1);"><img name="header2ro1_r2_c6" src="views/assets/img/header2ro1_r2_c6.jpg" width="191" height="60" alt=""></a></div>
<div id="sendmess_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r4_c6','','views/assets/img/sendmess.png',1);"><img name="header2ro1_r4_c6" src="views/assets/img/header2ro1_r4_c6.jpg" width="191" height="47" alt=""></a></div>
<div id="instantaccess_btn"><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('header2ro1_r6_c6','','views/assets/img/instantaccess.png',1);"><img name="header2ro1_r6_c6" src="views/assets/img/header2ro1_r6_c6.jpg" width="191" height="54" alt=""></a></div>
</div>
Er zijn nog geen reacties op dit bericht.