CSS - Posicion elementos independiente respecto a los demas

 
Vista:
sin imagen de perfil

Posicion elementos independiente respecto a los demas

Publicado por Luis (4 intervenciones) el 02/03/2017 17:16:00
Buenas, actualmente estoy cursando una asignatura en la universidad en la que estamos aprendiendo desarrollo web con HTML, CSS y Javascript.
He tenido que hacer una calculadora mediante botones y código js.
Mediante codigo CSS:
1
2
3
.clase:active{
...
}

He hecho que los botones disminuyan un poco de tamaño al hacer click sobre ellos para que dé la impresión de que estás apretando el botón de una calculadora. La cosa es que la posicion de estos botones depende de los botones que tengan al lado, por lo cual cuando hago click en alguno y disminuye su tamaño, la posicion de los botones de al lado varía haciendo que estos se muevan, lo cual no queda muy bien.
Mi pregunta era si hay alguna forma de hacer que la posicion de los botones se quede fija conforme están, de forma que al disminuir el tamaño de uno de ellos no afecte a la posicion del resto.
Un saludo y muchas gracias de antemano por vuestras respuestas,
Luis.
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
Imágen de perfil de Alejandro
Val: 78
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Posicion elementos independiente respecto a los demas

Publicado por Alejandro (21 intervenciones) el 03/03/2017 00:44:31
Hola Luis prueba darles un position: relative a los botones, te dejo un ejemplo:

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
 <style>
a {
  position: relative;
  display: inline-block;
  background-color: #222;
  color: #FFF;
  padding: 1rem;
  text-decoration: none;
  transition: all .3s;
}
 
a:active {
  transform: scale(.90);
}
</style>
</head>
<body>
  <div>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
</div>
</body>
</html>

Nos cuentas si te sirvio. Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Posicion elementos independiente respecto a los demas

Publicado por Luis (4 intervenciones) el 03/03/2017 12:17:29
EDITO: Perdón, sí que funcionó. La parte de la posición relativa era innecesaria, pero cuando implementé esto:

1
transform: scale(.90);

Conseguí el efecto que yo quería. Antes editaba el tamaño accediendo a sus propiedades height y width, pero usando esa escala los botones quedaron fijos en el sitio.
Muchas gracias por tu ayuda Alejandro.
Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Posicion elementos independiente respecto a los demas

Publicado por Luis (4 intervenciones) el 03/03/2017 01:03:38
Buenas Alejandro.
Probé el código que me proporcionaste pero no funcionó.
Al igual no me expliqué bien, aquí dejo el enlace a la página en concreto:

https://lclopez.neocities.org/Practica3/calculadora.html

Si te fijas, al pulsar en cualquiera de los botones, los que tiene al lado cambian de posición, desplazándose a la izquierda o a la derecha. Me gustaría que no se produjese ese movimiento y se quedarán fijos en el sitio, no sé si será posible.
Un saludo y gracias por la respuesta.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 45
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Posicion elementos independiente respecto a los demas

Publicado por Brayan (16 intervenciones) el 03/03/2017 15:25:14
La forma mas facil de hacer es colocando los botones dentro de un div, es decir que

1
2
3
4
5
6
7
8
9
10
11
12
<div>
    <input type="button" value="1">
</div>
<div>
    <input type="button" value="2">
</div>
<div>
    <input type="button" value="3">
</div>
<div>
    <input type="button" value="4">
</div>

y asi sucesivamente, el tamaño se lo das al div, para que el button no afecte la posicion de los demas botones, ya que el posicionamiento sera en el de los div asi evitaras el efecto de movimiento que causa el evento onclick, o active de css
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar