Recently, I put together a collection of rain radar images that can quickly show whether rain is on the way or not.
As you resize the URL window, the two pictures positioned side by side will also shrink. For an illustration, check it out here ...
Each picture displays a red marker pinpointing the precise location of a small village near Hamburg, Germany.
However, when I adjust the size of the URL window, the markers move to different positions, no longer indicating the correct spot near Hamburg.
I'm struggling to figure out how to keep the markers in place even as the URL window shrinks. Any tips on solving this would be greatly appreciated.
Below is the CSS/HTML script for reference:
<style type="text/css">
.table1 {
width: 100%;
margin-left: auto;
margin-right: auto;
border-width: 6px;
border-style: double;
font-family: verdana;
font-style: normal;
font-weight: bold;
font-size: 120%;
text-align: center;
}
.td1 {
border-width: 6px;
border-style: double;
padding: 5px;
}
.img {
height: auto;
width: 100%;
}
#outer-left {
position:relative;
z-index:0;
}
#outer-right {
position:relative;
z-index:0;
}
.inner-left {
position:absolute;
z-index:1;
bottom: 192px;
right: 115px;
}
.inner-right {
position:absolute;
z-index:1;
bottom: 250px;
right: 161px;
}
</style>
<table class="table1">
<tr>
<td class="td1">Niederschlagsradar West-Europa</td>
<td class="td1">Niederschlagsradar Deutschland</td>
</tr>
<tr>
<td id="outer-left" class="td1">
<img src="http://api.buienradar.nl/image/1.0/RadarMapEU?" height="auto" width="100%" >
<div class="inner-left"><img src="http://mirpir.eu/mark2.gif" alt="Rellingen" /></div>
</td>
<td id="outer-right" class="td1">
<img src="http://www.niederschlagsradar.de/image.ashx?type=loop1stunde&jaar=®io=homepage&tijdid=201112050910&time=" style="float: left; filter: alpha(opacity=90); -moz-opacity: .9; opacity: .9; border-width: 0px; height="auto" width="100% " />
<div class="inner-right"><img src="http://mirpir.eu/mark2.gif" alt="Rellingen" /></div>
</td>
</tr>
</table>
<br><br>