Capas y positions
Publicado por Javi (1 intervención) el 02/08/2012 11:15:51
Buenos dias tengo este html: http://www.revistavoluntas.com/pruebas/capax.html
que tiene este codigo:
Pues necesito que la cara y la parte del traje esten juntas dentro del marco. He puesto position absolute a la cara y traje y desaparecen.
Ya no se que mas mirar, aparentemente parece una chorrada pero no se por donde seguir. Gracias
que tiene este codigo:
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
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script typee="text/javascript">
function titlebar(val)
{ var speed = 500; var pos = val;var msg1 = "VOLUNTAS_";
var msg2 = "VOLUNTAS ";
if(pos == 0){
masg = msg1; pos = 1; }else if(pos == 1){
masg = msg2; pos = 0; }document.title = masg;
timer = window.setTimeout("titlebar("+pos+")",speed);
}titlebar(0);
</script><title>VOLUNTAS </title>
<style type="text/css">
body{margin:0; background-color:no;}
#marco{
z-index: 40;
margin: 0;margin-right:0;
height:480px;border: 10px solid rgb(0, 0, 0);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color:transparent;
}#capafija{
height:438px;background: url(BOC3.jpg) no-repeat center center;
z-index: 20;
}#movimiento{
height:438px;top:-135px;
background: url(web4.png) no-repeat center center;
z-index: 30;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transform:translate(0,0px); /* Safari and Chrome */
-webkit-transition-timing-function: ease-in;
transform: translate(0px,0px);
-ms-transform: translate(0px,0px); /* IE 9 */
-o-transform: translate(0px,0px); /* Opera */
-moz-transform: translate(0px,0px); /* Firefox */
}#movimiento:hover{
-webkit-transition-duration: 1s;
-webkit-transform:translate(0,169px); /* Safari and Chrome */
-webkit-transition-timing-function: ease-in;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-in;
transform: translate(0px,169px);
-ms-transform: translate(0px,169px); /* IE 9 */
-o-transform: translate(0px,169px); /* Opera */
-moz-transform: translate(0px,169px); /* Firefox */
}</style>
</head>
<body>
<div id="marco"></div>
<div id="capafija"></div>
<div id="movimiento"></div>
</body>
</html>
Pues necesito que la cara y la parte del traje esten juntas dentro del marco. He puesto position absolute a la cara y traje y desaparecen.
Ya no se que mas mirar, aparentemente parece una chorrada pero no se por donde seguir. Gracias
Valora esta pregunta
0