[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 

[sinke]

Po Twoich radach udało mi się ustawić balon i stopkę i teraz jest wszystko okej.

Tylko teraz jest inny problem, bo na ten balon co udało się ustawić, powinien się nakładać innego koloru balon w zależności od tego na jaki kolor najedzie się myszką na kwadraciki po prawej strony.
I tutaj jest użyty taki kod w jquery, że po najchaniu na kwadracik po nim powstaje img, który bym chciała przenieś na ten balonik na balonik po prawej stronie i tylko udaje mi się to zrobić po przez nadanie position absolute, a i tak nie da się do końca równo tego zrobić - taka sama sytuacja jak wyżej.

Struktura wygląda tak:

[HTML] pobierz, plaintext 
<ul>
    <li><img src="kwadracik"></li>
<ul>
 
// po najechaniu myszką na kwadracik jquery dodaje element w tym wypadku obrazek z balonikiem (który chce, żeby się nachodził z tym który jest po prawej stronie)
<ul>
    <li><img src="kwadracik,jpg">
          <img src="balonik.jpg">
    </li>
 
<ul>
 
[HTML] pobierz, plaintext 

próbowałam wcisnąć ten div, ale to też nie pomaga... (IMG:style_emoticons/default/sad.gif)