Order:
Position the glued tanks on the machine, as seen in the image.
specs
The tanks must be separate images, as each will have a status.
Current result:
[![enter image description here][1]][1]
Expected result:
[![enter image description here][2]][2]
This is the code:
.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>
I made several modifications, what I did was the following:
left
toright
, which is not necessary, it's a matter of taste.tanque1
,tanque2
, and so on, withtanque
.div
inside the other.tanque
, for a relative position instead of absolute , except formaquina
, which isabsolute
. This makes each tank always move the same with respect to the parent tag (the one that contains it).After all of this, I started adjusting the pixel values until I got it right.
I also added a new class called
acomodar
. It is invisible, it does not contain anything, but it is used to drag frommaquina
the three tanks depending on the number of pixels given.Note: I changed the machine image because it had a lot of padding.
The first problem I see is that in the CSS you have
.maquina
, but then in the code it is doneclass="MAQUINA"
, so the styles will not be applied to thatdiv
particular one. CSS is case sensitive in class names and IDs (if it would work in quirck mode , but I don't know if that's the case).Modifying the class from "MACHINE" to "machine" and adjusting the position of top and right you can get the following result which is similar to what you are looking for:
But that reveals other problems that exist:
I'm going to change the code a bit more to give you an example that will work the same no matter how many tanks the machine has, and cleans up the HTML code a bit so it doesn't look overkill. The idea is to only use
div
with the background images and give them different positioning depending on how many there are (withnth-child
).In this example you can see how it works for machines with 1 to 5 tanks: