[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 

[RiE]

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 (IMG:style_emoticons/default/smile.gif)

Ten post edytował RiE 12.10.2012, 09:26:06