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:

i w jeden rozdzielczości jest okej, natomiast jak otwieram tą stronie w innej rozdzielczości balonik się rozwala


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:


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 

Pokaż to online.

przykład online

U mnie na chromie z rozdzielczością: 1366 x 768 jest ok, ale niestety na firefoxie jest małe przesunięcie... ;/

Na większych rozdzielczościach np na 1920 x 1080 (print screen poniżej) już ten balonik po prawej jest rozłączony od stopki , jak temu zapobiec, żeby w każdej rozdzielczości (i każdej przeglądarce też by było fajnie) był "przywiązany"?

Dzieje się tak, dlatego że ustawiłeś procentową wartość.
Obrazek jest położony na wysokości 27% wysokości ekranu i 64% szerokości ekranu. Druga część obrazka ma inne wartości to też przy zmianie rozdzielczości obrazek leży w zupełnie innym miejscu
Obie części obrazka umieść w divie nadaj mu właściwość position:relative ustaw też wysokość(height) całego balona(balon+stopka).
Wewnątrz diva, balonowi nadaj position:absolute i top:0. Stopce- position:absolute i bottom:0. Jeżeli nie będą leżeć prawidłowo to balonowi dodawaj wartości stałe(nie %) top

[HTML] pobierz, plaintext 
.balon {
     position:relative;
     height: //odczytaj wysokości obrazków gora+dol
     left:64%;
     top:24%;
}
.gora, .dol { 
     position:absolute;
}
.gora {
     top:0;
}
.dol {
     bottom:0;
}
 
 
 
<div class="balon">
     <img class="gora" />
     <img class="dol" />
</div>
[HTML] pobierz, plaintext 

Oczywiście to tylko jeden ze sposobów rozwiązania tego problemu

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...

A czy koniecznie musi być nałożenie innego balonika na istniejący? Nie może być zamiana domyślnego na inny?
W stylach:

[HTML] pobierz, plaintext 
.czerwony {
     background:url() //adres obrazka
     width: //szerokość obrazka
     height: //wysokość obrazka
}
.zielony {
     background:url() //adres obrazka
     width: //szerokość obrazka
     height: //wysokość obrazka
}
//itd
[HTML] pobierz, plaintext 

JQuery:

[HTML] pobierz, plaintext 
var kolor;
 
$("li").hover(
function () {
kolor = $(this).attr('id');
$('.gora').addClass(kolor);
},
function () {
$('.gora').removeClass(kolor);
}
);
[HTML] pobierz, plaintext 

HTML
W miejscu gdzie są wszystkie kwadraciki z kolorem do wyboru, nalezy zrobić coś takiego:
Nazwa ID musi odpowiadać nazwie klasy (#czerwony -> .czerwony)

[HTML] pobierz, plaintext 
<ul>
<li id="czerwony"><img src="czerwony-kwadracik.jpg"><li>
<li id="zielony"><img src="zielony-kwadracik.jpg"></li>
</li>
 
<ul>
[HTML] pobierz, plaintext 

Nazwy elementów przyjąłem z mojego poprzedniego posta. Jeżeli są inne to wystarczy podmienić na własne.
Zaznaczę jeszcze że jest to dość prymitywny sposób, ale szalenie prosty.

Dzięki za pomysł sprawdzę, teraz który lepszy, bo minutę przed Tobą udało mi się zrobić inne rozwiązanie za pomocą jquery ($this() zamieniłam na na nazwę klasy diva czyli na $(' .balon') ). I że teraz ten balonik co się nakrywa nie jest dodawany do <li> tylko do tego <div> w którym jest balonik + stopka.

W ogóle RiE dzięki za całą pomoc!!!