2

Pedido:

Posicionar los tanques pegados en la máquina, tal como se ve en la imagen.

Especificaciones

Los tanques deben ser imágenes separadas, ya que cada uno tendrá un estado.

Resultado actual:

[![introducir la descripción de la imagen aquí][1]][1]

Resultado esperado:

[![introducir la descripción de la imagen aquí][2]][2]


Este es el código:

.maquina {
     position:absolute;
     right: 210px;
     top: 200px;
    }

.tanque1 {
     position:absolute;
     right: 210px;
     top: 200px;
    }
     
    .tanque2 {
     position:absolute;
     right: 240px;
     top: 217px;
     
     }
     
     .tanque3 {
      position:absolute;
      right: 270px;
      top: 234px;
}
<div class="col xs-4">
        <div class="MAQUINA"><img src="http://imgur.com/jpBVqLS"></div>
        <div class="tanque1"><img src="http://i.imgur.com/M0TM9q7.png.png"></div>
        <div class="tanque2"><img src="http://i.imgur.com/M0TM9q7.png.png"></div>
        <div class="tanque3"><img src="http://i.imgur.com/M0TM9q7.png.png"></div>
</div>

8
  • Tienes las imágenes de la máquina y el tanque publicadas en internet?, de esa manera podría crearte un ejemplo de lo que quieres.
    – Jemonge
    Commented el 11 may. 2017 a las 22:25
  • @Jemonge imgur.com/M0TM9q7 TANQUE imgur.com/gIgQ7LY MAQUINA
    – nawelittle
    Commented el 11 may. 2017 a las 22:38
  • @nawelittle, bienvenido al sitio, por favor mira este enlace para saber cómo ajustar el tamaño de tus imágenes: https://meta.stackexchange.com/a/264393/271772. Te recomiendo además mejorar tu pregunta, no estoy seguro si con este código se pueda replicar lo que quieres. Lee: crear un ejemplo mínimo, completo y verificable. Saludos. Commented el 11 may. 2017 a las 22:48
  • Hola @MauricioAriasOlave, la pregunta es simple y por lo que estuve investigando , al resultado se llega de esta manera o similar. Saludos!
    – nawelittle
    Commented el 12 may. 2017 a las 11:15
  • ¿Necesitas que se use un <canvas> y javascript o sólo CSS/HTML y esa etiqueta la has agregado arbitrariamente? Commented el 21 may. 2017 a las 18:32

2 respuestas 2

1

El primer problema que veo es que en el CSS tienes .maquina, pero luego en el código se hace class="MAQUINA", por lo que los estilos no se aplicarán a ese div en particular. CSS diferencia las mayúsculas y minúsculas en nombres de clase e ID (si funcionaría en quirck mode, pero no sé si ése es el caso).

Modificando la clase de "MAQUINA" a "maquina" y ajustando la posición de top y right se puede obtener el siguiente resultado que es parecido a lo que buscas:

.maquina {
  position: absolute;
  right: 150px;
  top: 138px;
}

.tanque1 {
  position: absolute;
  right: 210px;
  top: 200px;
}

.tanque2 {
  position: absolute;
  right: 240px;
  top: 217px;
}

.tanque3 {
  position: absolute;
  right: 270px;
  top: 234px;
}
<div class="col xs-4">
  <div class="maquina"><img src="http://i.imgur.com/jpBVqLS.png"></div>
  <div class="tanque1"><img src="http://i.imgur.com/M0TM9q7.png.png"></div>
  <div class="tanque2"><img src="http://i.imgur.com/M0TM9q7.png.png"></div>
  <div class="tanque3"><img src="http://i.imgur.com/M0TM9q7.png.png"></div>
</div>

Pero que deja en evidencia otros problemas que hay:

Voy a cambiar el código un poco más para ponerte un ejemplo que funcionará igual independientemente del número de tanques que tenga la máquina, y que limpia un poco el código HTML para que no se vea excesivo. La idea es sólo usar div con las imágenes de fondo y darles diferente posicionamiento dependiendo de cuántos haya (con nth-child).

En este ejemplo puedes ver cómo funciona para máquinas de 1 a 5 tanques:

.contenedor-maquina {
  position: relative;
  min-height:300px;
}

.contenedor-maquina>div {
  position: absolute;
  background-size: cover;
}

.maquina {
  background-image: url(http://i.imgur.com/jpBVqLS.png);
  width: 150px;
  height: 186px;
  right: 115px;
  top: 105px;
}

.tanque {
  background-image: url(http://i.imgur.com/M0TM9q7.png.png);
  width: 91px;
  height: 104px;
}

.tanque:nth-child(2) { right: 210px; top: 200px; }
.tanque:nth-child(3) { right: 240px; top: 217px; }
.tanque:nth-child(4) { right: 270px; top: 234px; }
.tanque:nth-child(5) { right: 300px; top: 251px; }
.tanque:nth-child(6) { right: 330px; top: 268px; }
<div class="col xs-4 contenedor-maquina">
  <div class="maquina"></div>
  <div class="tanque"></div>
  <div class="tanque"></div>
  <div class="tanque"></div>
</div>

<div class="col xs-4 contenedor-maquina">
  <div class="maquina"></div>
  <div class="tanque"></div>
</div>

<div class="col xs-4 contenedor-maquina">
  <div class="maquina"></div>
  <div class="tanque"></div>
  <div class="tanque"></div>
  <div class="tanque"></div>
  <div class="tanque"></div>
  <div class="tanque"></div>
</div>

1

Hice varias modificaciones, lo que hice fue lo siguiente:

  1. Cambié left por right, cosa que no es necesaria, es cuestión de gustos.
  2. Reemplacé las clases tanque1, tanque2, y demás, por tanque.
  3. Metí cada div adentro del otro.
  4. Cambié a la clase tanque, por una posición relativa en vez de absoluta, a excepción de maquina, que es absolute. Esto hace que cada tanque se mueva siempre igual respecto a la etiqueta padre (la que la contiene).

Luego de todo esto, empecé a ajustar los valores en píxeles hasta que quede bien.

Además puse una clase nueva, llamada acomodar. Es invisible, no contiene nada, pero sirve para arrastrar desde maquina los tres tanques dependiendo de la cantidad de pixeles dados.

Nota: Cambié la imagen de la máquina porque tenía mucho relleno.

.maquina {
    position:absolute;
    left: 200px;
    top: 10px;
}
.acomodar{
    position:relative;
    left: 20px;
    top: -25px;
}
.tanque{
    position:relative;
    left: -50px;
    top: -80px;
}
<div class="col xs-4">
 <div class="maquina"><img src="https://i.sstatic.net/GWk5v.png">
  <div class="acomodar">
   <div class="tanque"><img src="http://i.imgur.com/M0TM9q7.png.png" />
    <div class="tanque"><img src="http://i.imgur.com/M0TM9q7.png.png" />
     <div class="tanque"><img src="http://i.imgur.com/M0TM9q7.png.png" />
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

2
  • ¿Por que meter los tanques unos dentro de otros? No tiene sentido cambiar la estructura html para eso
    – Alvaro Montoro
    Commented el 21 may. 2017 a las 20:55
  • @AlvaroMontoro Es la única manera que se me ocurre por ahora.
    – user13558
    Commented el 21 may. 2017 a las 20:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.