Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] botón se desplaza sobre capa

Estas en el tema de botón se desplaza sobre capa en el foro de CSS en Foros del Web. Buenas compis, tengo una duda que no consigo resolver... La cosa es que tengo una capa en la cual hay botones, al aumentar la ventana ...
  #1 (permalink)  
Antiguo 15/03/2015, 09:09
 
Fecha de Ingreso: marzo-2015
Mensajes: 3
Antigüedad: 9 años
Puntos: 1
botón se desplaza sobre capa

Buenas compis, tengo una duda que no consigo resolver...
La cosa es que tengo una capa en la cual hay botones, al aumentar la ventana (ctrl +) digamos que el botón se desplaza...
Pensaba que con (position: fixed;) se solucionaría pero no , y he probado ya varias formas y no tengo ni idea... A ver si vosotros podéis saber el porqué los botones se desplazan...
Gracias de antemano

Codigo de la capa

contenido{
margin-top:0%;
margin-bottom:0%;
margin-left:0%;
margin-right:0%;
width: 100%;
height: 500px;
background:#E96500;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
position:relative;
}

Código del botón

.boton{
background-color: #2dc234;
background-image: -webkit-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: -moz-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: -o-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
-ms-border-radius:8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
color: #FFFFFF;
font-family: 'Pacifico', Arial, sans-serif;
font-size: 20px;
line-height: 1;
padding: 15px 25px;
margin-left:20%;
margin-bottom:0px;
margin-top:5%;
margin-right:0px;
width:10%;
height:5%;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(25, 123, 29, .7);
position:fixed;
}
  #2 (permalink)  
Antiguo 15/03/2015, 11:26
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 3 meses
Puntos: 208
Respuesta: botón se desplaza sobre capa

Es probable que el motivo sea tener los margenes en porcentajes.. al aumentar el zoom es como si achicaras la ventana, el 20% y el 5% dejan de ser el mismo numero de pixeles que cuando no tenia zoom.
  #3 (permalink)  
Antiguo 15/03/2015, 11:54
 
Fecha de Ingreso: marzo-2015
Mensajes: 3
Antigüedad: 9 años
Puntos: 1
Respuesta: botón se desplaza sobre capa

Cita:
Iniciado por fede5426 Ver Mensaje
Es probable que el motivo sea tener los margenes en porcentajes.. al aumentar el zoom es como si achicaras la ventana, el 20% y el 5% dejan de ser el mismo numero de pixeles que cuando no tenia zoom.
Pues ese era el fallo, tenía entendido que era mejor hacer las páginas con "%" en vez de "px", o tal vez es que se necesita mas conocimiento sobre los posicionamientos...
Gracias por contestar!
  #4 (permalink)  
Antiguo 15/03/2015, 12:45
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 3 meses
Puntos: 208
Respuesta: botón se desplaza sobre capa

De nada

Es mejor usar porcentajes para definir el tamaño de determinados elementos, siempre y cuando necesites hacer responsive design.

Para explicarlo de manera fácil, haces que tus elementos sean "elásticos" y se ajusten al tamaño de la ventana.

Usarlo en los margenes no es una buena idea, en absolutamente TODAS las pantallas se va a ver diferente.

Marca el tema como solucionado si ya se arregló.

Saludos
  #5 (permalink)  
Antiguo 15/03/2015, 14:08
 
Fecha de Ingreso: marzo-2015
Mensajes: 3
Antigüedad: 9 años
Puntos: 1
Respuesta: botón se desplaza sobre capa

Cita:
Iniciado por fede5426 Ver Mensaje
De nada

Es mejor usar porcentajes para definir el tamaño de determinados elementos, siempre y cuando necesites hacer responsive design.

Para explicarlo de manera fácil, haces que tus elementos sean "elásticos" y se ajusten al tamaño de la ventana.

Usarlo en los margenes no es una buena idea, en absolutamente TODAS las pantallas se va a ver diferente.

Marca el tema como solucionado si ya se arregló.

Saludos
Gracias por la explicación.

Etiquetas: background, color, desplaza, width
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




La zona horaria es GMT -6. Ahora son las 03:46.