Struggling to position the lightbulbs above the floor plan? Even after setting the floor plan image's position property to 'relative', the lightbulb images refuse to cooperate.
Here is a snippet of the HTML code:
<div>
<img src="floorplanff.jpeg" class="background" width="1200px" height="600px">
<img id="lightbulbbr" src="pic_bulboff.gif" width="45px" height="70px" class="br" >
<img id="lightbulbfy" src="pic_bulboff.gif" width="45" height="70" class="fy" >
<img id="lightbulbmr" src="pic_bulboff.gif" width="45" height="70" class="mr" >
<img id="lightbulbt" src="pic_bulboff.gif" width="30" height="50" class="t" >
<img id="lightbulbfmngr" src="pic_bulboff.gif" width="45" height="70" class="mngr" >
<img id="lightbulbar" src="pic_bulboff.gif" width="35" height="65" class="ar" >
</div>
The relevant CSS styling is as follows:
.background {
size: 80%;
position: relative;
left: 8%;
top: 40%
}
.br {
position: relative;
right: 15%;
top: 85%;
}
.fy {
position: absolute;
right: 79.8%;
top: 34%;
transform: rotate(90deg)
}
.mr {
position: absolute;
right: 57.5%;
top: 67.5%;
}
View the HTML page here.