Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Problem z pozycjonowaniem <span>
ins@ne
post
Post #1





Grupa: Zarejestrowani
Postów: 68
Pomógł: 0
Dołączył: 10.07.2003
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
sf
post
Post #2





Grupa: Zarejestrowani
Postów: 1 597
Pomógł: 30
Dołączył: 19.02.2003
Skąd: Tychy

Ostrzeżenie: (0%)
-----

Hm, wydaje mi się, że do tego DIV jest bardziej odpowiedni, a SPAN był stosowany głównie do definicji wyglądu, a nie pozycji...
Go to the top of the page
+Quote Post
ins@ne
post
Post #3





Grupa: Zarejestrowani
Postów: 68
Pomógł: 0
Dołączył: 10.07.2003
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) ).
Go to the top of the page
+Quote Post
bregovic
post
Post #4





Grupa: Zarejestrowani
Postów: 562
Pomógł: 15
Dołączył: 8.08.2003
Skąd: Denmark/Odense

Ostrzeżenie: (0%)
-----

a nie mozesz dla div'a ustalic style="display: inline;" albo cos takiego? bo div rozciaga sie tylko dlatego ze ma natywnie display: block...
Go to the top of the page
+Quote Post
ins@ne
post
Post #5





Grupa: Zarejestrowani
Postów: 68
Pomógł: 0
Dołączył: 10.07.2003
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) )
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 18:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn