bij verkleinen beeld verschuift een DIV
Hans De Ridder
22/06/2017 14:09:39Ik heb 2 div over elkaar geplaatst.
1 gewone layout.
1 transparant (om layout af te schermen).
Het werkt allemaal prima.
Als ik echter het beeld verklein, dan verschuift de transparante DIV in horizontale richting.
Ik heb al van alles geprobeerd, absolute, relative.
Zelfs de transparante div te plaatsen in de div van de layout.
Maar krijg het niet voor elkaar.
Iemand die me op weg kan helpen?
Toevoeging op 22/06/2017 15:02:31:
Volgende werkt omdat de transpar in het midden staat van beeld.
Ik heb het nu als volgt opgelost:
1 gewone layout.
1 transparant (om layout af te schermen).
Het werkt allemaal prima.
Als ik echter het beeld verklein, dan verschuift de transparante DIV in horizontale richting.
Ik heb al van alles geprobeerd, absolute, relative.
Zelfs de transparante div te plaatsen in de div van de layout.
Maar krijg het niet voor elkaar.
Iemand die me op weg kan helpen?
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
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
#transpar {
position: absolute;
background-color: #fffff;
border-radius: 5px;
margin-top: 0px;
margin-left: 285px;
width: 780px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
overflow-x: hidden;
overflow-y: hidden;
display: none;
z-index: 10;
}
#galleryWrapper {
background-color: #213E4A;
border-radius: 5px;
margin: 20px auto;
padding: 20px;
width: 740px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
<div id="transpar"><img src="blank.jpg"></div>
<div id="galleryWrapper">
.
.
.
</div>
position: absolute;
background-color: #fffff;
border-radius: 5px;
margin-top: 0px;
margin-left: 285px;
width: 780px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
overflow-x: hidden;
overflow-y: hidden;
display: none;
z-index: 10;
}
#galleryWrapper {
background-color: #213E4A;
border-radius: 5px;
margin: 20px auto;
padding: 20px;
width: 740px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
<div id="transpar"><img src="blank.jpg"></div>
<div id="galleryWrapper">
.
.
.
</div>
Toevoeging op 22/06/2017 15:02:31:
Volgende werkt omdat de transpar in het midden staat van beeld.
Ik heb het nu als volgt opgelost:
Gewijzigd op 22/06/2017 14:38:36 door Hans De Ridder
Er zijn nog geen reacties op dit bericht.