[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 

[Damonsson]

Pokaż to online.

[sinke]

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 (IMG:style_emoticons/default/sad.gif) , jak temu zapobiec, żeby w każdej rozdzielczości (i każdej przeglądarce też by było fajnie) był "przywiązany"? (IMG:style_emoticons/default/smile.gif)

(IMG:http://aleksandralysko.pl/przyklad/balon_zly.jpg)

[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

[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)

[RiE]

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.

Ten post edytował RiE 12.10.2012, 11:01:50

[sinke]

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