Foros del Web » Creando para Internet » CSS »

Extraño suceso con CSS3

 Estas en el tema de Extraño suceso con CSS3 en el foro de CSS en Foros del Web. Le tengo puesto a los divs "venda" y "lloguer" una transición en CSS3 con un hover, lo extraño es que cuando se está efectuando la ...
  #1 (permalink)  
Antiguo 08/12/2012, 13:50
 
Fecha de Ingreso: marzo-2012
Mensajes: 77
Antigüedad: 12 años, 7 meses
Puntos: 0
Extraño suceso con CSS3
Le tengo puesto a los divs "venda" y "lloguer" una transición en CSS3 con un hover, lo extraño es que cuando se está efectuando la transición, la imagen que tengo detrás del botón se mueve de manera extraña.

http://inmobiliaria.xtrweb.com/plantilla

Está es la hoja de estilos:

Código CSS: 
Ver original
  1. body{
  2. margin:0;
  3. background-image:url(1.jpg);
  4. background-size:100% 100%;
  5. }
  6. @font-face{
  7.  
  8. font-family:ostrich-black;
  9. src: url(fuentes/ostrich-black.ttf) format('truetype');
  10.  
  11. }
  12. #cabecera{
  13.  
  14. height:300px;
  15.  
  16. }
  17. #cabecera img{
  18. display:block;
  19. margin:0 auto;
  20. height:200px;
  21. width:558px;
  22. margin-bottom:50px;
  23. margin-top:30px;
  24. -webkit-animation-name: logo    ;
  25. -webkit-animation-timing-function: linear;
  26. -webkit-animation-duration: 3s;
  27. -moz-animation-name: logo   ;
  28. -moz-animation-timing-function: linear;
  29. -moz-animation-duration: 3s;
  30.  
  31. }
  32. @-webkit-keyframes logo {
  33.   from {  opacity:0;  }
  34.   to   { opacity:1; }
  35. }
  36. @-moz-keyframes logo {
  37.   from {  opacity:0;  }
  38.   to   { opacity:1; }
  39. }
  40.  
  41. #contenido{
  42. width:100%;
  43. -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  44. box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  45. -moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  46. height:800px;
  47. background-image:url(490.jpg);
  48. z-index:999;
  49. position:absolute;
  50.  
  51. }
  52. #botones {
  53. width:420px;
  54. margin:0 auto;
  55. height:40px;
  56. z-index:-1;
  57.  
  58. }
  59. #venda{
  60. width:200px;
  61. height:50px;
  62. background-color:#FFA200;
  63. -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  64. box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  65. -moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  66. -webkit-border-radius:15px 15px 0 0;
  67. border-radius:15px 15px 0 0;
  68. margin:0 auto;
  69. float:left;
  70. text-align:center;
  71. line-height: 50px;
  72.     -webkit-transition-property: all;
  73.     -webkit-transition-duration: 1s;
  74.     -webkit-transition-timing-function: ease;
  75.     -webkit-transition-delay: 0.1s;
  76.     -moz-transition-property: all;
  77.     -moz-transition-duration: 1s;
  78.     -moz-transition-timing-function: ease;
  79.     -moz-transition-delay: 0.1s;
  80.     color:white;
  81. font-family:ostrich-black;
  82. font-size:30px;
  83. background-image:url(patron.jpg);
  84. }
  85. #venda:hover{
  86. margin-top:-10px;
  87. }
  88. #lloguer:hover{
  89. margin-top:-10px;
  90. }
  91.  
  92. #lloguer{
  93. width:200px;
  94. height:50px;
  95. background-color:#FFA200;
  96. -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  97. box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  98. -moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  99. -webkit-border-radius:15px 15px 0 0;
  100. border-radius:15px 15px 0 0;
  101. margin:0 auto;
  102. float:left;
  103. margin-left:20px;
  104. text-align:center;
  105. line-height: 50px;
  106.     -webkit-transition-property: all;
  107.     -webkit-transition-duration: 1s;
  108.     -webkit-transition-timing-function: ease;
  109.     -webkit-transition-delay: 0.1s;
  110.         -moz-transition-property: all;
  111.     -moz-transition-duration: 1s;
  112.     -moz-transition-timing-function: ease;
  113.     -moz-transition-delay: 0.1s;
  114.         color:white;
  115. font-family:ostrich-black;
  116. font-size:30px;
  117. background-image:url(patron.jpg);
  118. }

Y éste el html:

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4.     <LINK rel="stylesheet" href="estilo.css">
  5. </HEAD>
  6. <BODY>
  7.     <DIV id="cabecera">
  8.         <IMG src="logo.png"/>
  9.     </DIV>
  10.     <DIV id="botones">
  11.             <DIV id="venda">
  12.                 VENDA
  13.             </DIV>
  14.             <DIV id="lloguer">
  15.                 LLOGUER
  16.             </DIV>
  17.     </DIV>
  18.         <DIV id="contenido">
  19.         </DIV>
  20.     
  21. </BODY>
  22. </HTML>

Espero que me podáis ayudar, gracias y un saludo.
  #2 (permalink)  
Antiguo 08/12/2012, 15:19
Avatar de homlyne  
Fecha de Ingreso: noviembre-2012
Ubicación: Madrid
Mensajes: 59
Antigüedad: 12 años
Puntos: 10
Respuesta: Extraño suceso con CSS3
Hola manuxdjent,

Al parecer ese movimiento en la capa "botones" solo sucede cuando el hover están activados al mismo tiempo, si te fijas para que no suceda eso, hay que esperar a que la transición termine.

Bueno, parece que el problema viene por el tamaño de las capas, ya que "botones" tiene height:40px y las otras tiene 50px.

He probado aumentando el height en 60px y no pasa lo mismo, tendrías que ir jugando con el tamaño y posiciones.

Saludos.
__________________
_________________________

Homlyne - Soporte Online
  #3 (permalink)  
Antiguo 08/12/2012, 15:22
Avatar de homlyne  
Fecha de Ingreso: noviembre-2012
Ubicación: Madrid
Mensajes: 59
Antigüedad: 12 años
Puntos: 10
Respuesta: Extraño suceso con CSS3
Hola manuxdjent,

Al parecer ese movimiento en la capa "botones" solo sucede cuando el hover están activados al mismo tiempo, si te fijas para que no suceda eso, hay que esperar a que la transición termine.

Bueno, parece que el problema viene por el tamaño de las capas, ya que "botones" tiene height:40px y las otras tiene 50px.

He probado aumentando el height de "botones" a 60px y en la que se ve una mejoría, podrías ir jugando con el tamaño y las posiciones de otra manera.

Saludos.

Actualizo: he visto que poniendo:

Código CSS: 
Ver original
  1. position: absolute;

En las dos capa "venda" y "lloguer" el problema se resuelve pero tendrías que cambiar la propiedad left.
__________________
_________________________

Homlyne - Soporte Online
Última edición por homlyne; 08/12/2012 a las 15:36 Razón: Perdón, no había visto que ya he posteado lo mismo.
  #4 (permalink)  
Antiguo 08/12/2012, 16:27
 
Fecha de Ingreso: marzo-2012
Mensajes: 77
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Extraño suceso con CSS3
He cambiado lo que me has dicho de position:absolute y darle un left, me gustaría saber si los he centrado bien los botones.
Muchas gracias por tu ayuda. Un saludo

http://inmobiliaria.xtrweb.com/plantilla/
  #5 (permalink)  
Antiguo 09/12/2012, 04:43
Avatar de homlyne  
Fecha de Ingreso: noviembre-2012
Ubicación: Madrid
Mensajes: 59
Antigüedad: 12 años
Puntos: 10
Respuesta: Extraño suceso con CSS3
yo lo veo centrado.
__________________
_________________________

Homlyne - Soporte Online

Etiquetas: contenido, css3, divs, extraño, hover, html, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:09.