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. Es la primera vez que escribo aquí si hay algo mal decídmelo y lo corrijo. Gracias de antemano :)
Aquí el código 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; }
Aquí el 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; }
Respuestas
Explicado de forma muy sencilla, el posicionamiento fixed de CSS hace que un elemento posicionado no se mueva al hacer scroll en la página.
En tu caso, al hacer scroll el elemento sí que permanece fijo, por lo que esa parte si que se está cumpliendo. El problema es que cuando redimensionas la ventana del navegador (o cuando pruebas la página en dispositivos con tamaños de pantalla muy diferente) el botón cambia de posición.
El motivo es que has definido los márgenes del botón de manera relativa:
#boton { /* ... */ position: fixed; margin-left: 20%; margin-bottom: 0px; margin-top: 5%; margin-right: 0px; }
En concreto, el problema está en margin-left: 20%; y margin-top: 5%;. Para hacer que el botón no se mueva, cambia estos valores por unidades de medida absolutas:
#boton { /* ... */ position: fixed; margin-left: 200px; margin-bottom: 0px; margin-top: 70px; margin-right: 0px; }
Otro consejo relacionado con lo anterior sería que no definieras la altura y anchura de los botones con unidades relativas: height: 5%; y width: 10%;. Si la ventana del navegador se reduce, el botón se hará más pequeño, lo que puede hacer que no se lea su contenido.
@javiereguiluz
Así es, al final ha sido cambiar los porcentajes (%) por la medida en px y ya funciona. Gracias por contestar!
@MarioAlvGar