CSS - Capas y positions

   
Vista:

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:
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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder