Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z pozycjonowaniem <span>
Forum PHP.pl > Forum > Po stronie przeglądarki
ins@ne
17.09.2004, 13:17:40
Robie takie tooltipy, ktore po najechaniu np. na link wyswietlaja jakis tekst (pelna sciezke itp.). Tworze w tym celu nowy obiekt SPAN i mam teraz z nim problem jesli chodzi o pozycjonowanie. Powinien byc on zawsze ustawiony wzglednie wzgledem obiektu, ktorego dotyczy czyli np. przesuniety 20px w prawo i w dol od linka, na ktory sie najezdza kursorem. Niestety moje dzisiejsze doswiadczenia z parametrem relative daly mi znac, ze jesli pojawi sie po tym linku jakis <br> to automatycznie mi ten span "ucieka" (tak jakby ten <br> rowniez do niego sie odnosil. Probowalem juz wielu rzeczy - pierwsze co to ustawilem mu wysoki z-index, ale to tez nic nie pomoglo sad.gif (moze dlatego, ze pozostale elementy na stronie nie sa na warstwach i nie maja zadnego z-indeksu ustawionego), potem kombinowalem z pobieraniem offsetTop (tak zeby ustawic position: absolute i wartosc top ustawic jakos offsetTop), ale efekt byl taki jakby ten span nie mial zadnego rodzica sad.gif (a chyba powinna to byc ramka, w ktorej go wywoluje)... Ponizej zamieszczam fragment kodu, moze ktos z Was bedzie wiedzial jak to rozwiazac.
Skrypt (zalaczany w pliku scripts.js):
[HTML] pobierz, plaintext 
  1. function showTip(strArg) {
  2.         newLayer = document.createElement("SPAN");
  3.         var layerText = document.createTextNode(strArg);
  4.         newLayer.appendChild(layerText);
  5.         document.body.appendChild(newLayer);
  6.         newLayer.style.position = "relative";
  7.         newLayer.style.top = 10+'px';
  8.         newLayer.style.left = 10+'px';
  9. 	newLayer.style.zIndex = 5;
  10. }
[HTML] pobierz, plaintext

Strona:
[HTML] pobierz, plaintext 
  1. // index.htm
  2. <html>
  3. <head>
  4. 	<title>Tooltip in frames</title>
  5. </head>
  6. <frameset cols="25%,*%">
  7. <frame scrolling="auto" name="lewa" src="lewa.htm">
  8. <frame scrolling="yes" name="prawa" src="prawa.htm">
  9. </frameset>
  10. </html>
  11.  
  12. // lewa.htm
  13. <html>
  14. <body>
  15. <script src="scripts.js"></script>
  16. <a href="JavaScript: void(null);" onMouseOver="showTip('To jest tip lewy...');" onMouseOut="hideTip();">lewa</a><br><br>
  17. </body>
  18. </html>
  19.  
  20. // prawa.htm
  21. <html>
  22. <frameset rows="*%,25%">
  23. <frame name="gora" src="gora.htm">
  24. <frame name="dol" src="dol.htm">
  25. </html>
  26.  
  27. // gora.htm
  28. <html>
  29. <body>
  30. <script src="scripts.js"></script>
  31. <a href="JavaScript: void(null);" onMouseOver="showTip('To jest tip gorny...');" onMouseOut="hideTip();">gora</a>
  32. a to dalej jakis tekst pod spodem...<br><br><br>
  33. </body>
  34. </html>
  35.  
  36. // dol.htm
  37. <html>
  38. <body>
  39. <script src="scripts.js"></script>
  40. <a href="JavaScript: void(null);" onMouseOver="showTip('To jest tip dolny...');" onMouseOut="hideTip();">dol</a>
  41. </body>
  42. </html>
[HTML] pobierz, plaintext

To sa oczywiscie surowe ramki, w ktorych tylko testowo umieszczalem jakis tekst. Najlepiej problem widac w gora.htm bo tam sa te brake'i za linkiem i przez nie ten tooltip mi "ucieka". Jesli ktos wie jak rozwiazc taki problem z pozycjonowaniem (moze jakos obliczyc wartosc gdyby zastosowac absolute albo jakos "ominac" te <br>) to bede bardzo wdzieczny.
Aha... niestety nie wchodzi w gre ustawienie innych elementow na stronie w warstwach bo ja tylko dorabiam skrypt do juz istniejacej strony i nie moge w niej nic zmieniac sad.gif
sf
18.09.2004, 22:07:34
Hm, wydaje mi się, że do tego DIV jest bardziej odpowiedni, a SPAN był stosowany głównie do definicji wyglądu, a nie pozycji...
ins@ne
19.09.2004, 21:38:34
Tylko, ze <div> ma te wade, ze trzeba ustalic jego dlugosc (width), a nie bardzo jak mam to obliczyc (warstwa powinna sie konczyc zaraz za tekstem). Div mi sie ciagnie niestety do konca linii, a span sie konczyl zaraz za tekstem - dlatego na spana sie przesiadlem (ale ani jeden, ani drugi jakis satysfakcjonujacy nie jest sad.gif ).
bregovic
20.09.2004, 11:55:40
a nie mozesz dla div'a ustalic style="display: inline;" albo cos takiego? bo div rozciaga sie tylko dlatego ze ma natywnie display: block...
ins@ne
20.09.2004, 13:59:35
no wlasnie sek w tym, ze gdy na to samo dzisiaj wpadlem i ustawilem display: inline to sie okazalo, ze warstwa tez mi ucieka. Nie mam pojecia jak obejsc te cholerne <br>, ktore mi burza cala funkcje (a juz tak ladnie dzialala w testach no biggrin.gif)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.