[css][html][jquery]Dopasowanie pozycji img do rozdzielczości Opcje

[sinke]

Witam,
mam taką sytuacje:
posiadam podstronę na której po lewej stronie mam kwadraciki z kolorami. Jak najedzie się na dany kwadracik to balonik co jest obok podświetla się na dany kolor:
(IMG:http://s6.ifotos.pl/mini/balonokjp_xrapwpe.jpg)
i w jeden rozdzielczości jest okej, natomiast jak otwieram tą stronie w innej rozdzielczości balonik się rozwala
(IMG:http://s6.ifotos.pl/mini/balonzlyj_xrapwhs.jpg)

Czy jest jakiś sposób,aby w każdej rozdzielczości balonik był zawsze na tym samym miejscu?

Podświetlanie balonika na dany kolor zrobiłam za pomocą funkcji hover() w jQuery:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
 
 
$("li#st_kw1").hover(
  function () {
    $(this).append($('<img class="balon" src="includes/gfx/zamowienie/stadardowe/st_ba1.png">'));
  }, 
  function () {
    $(this).find("img:last").remove();
  }
);
[JAVASCRIPT] pobierz, plaintext 

fragment z HTML:

[HTML] pobierz, plaintext 
<p>W naszej ofercie posiadamy możliwość nadruku na nastepujących balonach:</p>
<img class="balon" src="includes/gfx/zamowienie/stadardowe/st_ba2.png" alt="" >
<img id="stopa" src="includes/gfx/zamowienie/stopa.jpg" alt=""  />
 
<ul>
 
    <li><span class="kolor_nr">STANDARDOWE</span>
    	<ul class="rodzaje">
        	<li id="st_kw1"><img class="pod" src="includes/gfx/zamowienie/stadardowe/st_kw1.png" /></li>
         </ul>
    </li>
</ul>
[HTML] pobierz, plaintext 

Żeby ten balonik pokazywał się z boku nadałam mu position: absolute, bo inaczej ten balon jest pod kwadraikami i cały układ się sypie:
(IMG:http://s6.ifotos.pl/mini/balonblad_xrapwep.jpg)

kod css:

[CSS] pobierz, plaintext 
.balon, #stopa { float: left; position: absolute;   }
.balon { z-index:-1; top: 30%; left: 64%; }
#stopa { z-index:-2; top: 50%; left: 65%;}
[CSS] pobierz, plaintext