Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]tooltip - problem, pozycja tooltipa
Mlodycompany
post 29.04.2010, 17:38:24
Post #1





Grupa: Zarejestrowani
Postów: 910
Pomógł: 44
Dołączył: 20.02.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

Witam. Mam problem z tzn. tooltipem. Otóż gdy atrybut css position jest równy relative całej chmurki(#events) to chmurka kończy się razem z divem czyli jest ucięta, a gdy ustawie position na fixed wtedy chmurka jest daleko od najechanego elementu. Nie mam pomysłu jak to rozwiązać.

Kody
[HTML] pobierz, plaintext 
  1. <style>
  2. * {
  3. 	/* old-style reset here :) */
  4. 	border: 0px;
  5. 	padding: 0px;
  6. }
  7. td.date_has_event {
  8. 	background-position: 162px 0px;
  9. 	color: white;
  10. }
  11. td.date_has_event:hover {
  12. 	background-position: 162px -81px;
  13. }
  14. td.padding {
  15. 	background: url(../img/calpad.jpg);
  16. }
  17. td.today {
  18. 	background-position: 81px 0px;
  19. 	color: white;
  20. }
  21. td.today:hover {
  22. 	background-position: 81px -81px;
  23. }
  24. .events {
  25. 	position: relative; <--- chodzi o tą linie
  26. 	z-index: 9999;
  27. }
  28. .events ul {
  29. 	text-align: left;
  30. 	position: absolute;
  31. 	display: none;
  32. 	z-index: 1000;
  33. 	padding: 15px;
  34. 	background: #E7ECF2;
  35. 	color: white;
  36. 	border: 1px solid white;
  37. 	font-size: 12px;
  38. 	width: 100px;
  39. 	-moz-border-radius: 3px;
  40. 	-khtml-border-radius: 3px;
  41. 	-webkit-border-radius: 3px;
  42. 	-border-radius: 3px;
  43. 	list-style: none;
  44. 	color: #444444;
  45. 	-webkit-box-shadow: 0px 8px 8px #333;
  46. }
  47. .events li {
  48. 	padding-bottom: 5px;
  49. }
  50. .events li span {
  51. 	display: block;
  52. 	font-size: 12px;
  53. 	text-align: justify;
  54. 	color: #555;
  55. }
  56. .events li span.title {
  57. 	font-weight: bold;
  58. 	color: #222;
  59. }
  60. </style>
  61. <td class="date_has_event"><a href="archiwum/2010/04/15/">15</a><div class="events">
  62. 							<ul>
  63. 								<li>
  64. 									Artykułów: 2
  65. 								</li>
  66. 							</ul>
  67. 						</div></td><td class="date_has_event"><a href="archiwum/2010/04/16/">16</a><div class="events">
  68. 							<ul>
  69. 								<li>
  70. 									Artykułów: 1
  71. 								</li>
  72. 							</ul>
  73. 						</div></td>
[HTML] pobierz, plaintext

Może macie jakiś pomyśł jak to rozwiązać?

Ten post edytował Mlodycompany 29.04.2010, 17:39:20
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
by_ikar
post 29.04.2010, 18:47:51
Post #2





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

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

Więc tak, już raz to tłumaczyłem jednej osobie. Tak więc, position relative ustawia dany blok jako rodzica, w pozycjonowaniu absolutnym. Jeżeli nie ustawisz np <li> pozycji relatywnej, w tedy pozycjonując coś absolutnie będziesz pozycjonował to względem rodzica który ma nadaną pozycję relatywną, domyślnie <body> ma pozycję relatywną. Jeżeli już masz jakiś blok któremu nadałeś pozycję relatywną, to wewnątrz tego bloku możesz coś pozycjonować absolutnie względem tego bloku (w tym wypadku chcesz aby tak było). Masz nadaną pozycję absolutną, ale nie podałeś żadnej wartości top lub/i left. Dodaj wartości do selektora .events ul przykładowo top: 20px; left: 20px; Jeżeli dodatkowo chcesz (raczej na pewno) żeby "chmurka" pojawiała się po najechaniu na link/przycisk musisz użyć pseudoselektora :hover. Całość już jakiś czas temu wykonywałem najpierw dla znajomego, a potem dla jakiegoś kolesia również na forum ponieważ również tego nie rozumiał. Tutaj masz kod: 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. 	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  6. 	<meta name="author" content="by_ikar">
  7. 	<style>
  8. div.tooltip {
  9. 	display: none;
  10. 	position: absolute;
  11. 	top: 24px; left: 0;
  12. 	z-index: 40;
  13. 	text-align: center;
  14. 	width:200px;
  15. }
  16. div.tooltip span.top{
  17. 	position: absolute;
  18. 	top: 1px;
  19. 	left: 40px;
  20. 	width: 11px;
  21. 	height: 10px;
  22. 	background: url(http://img217.imageshack.us/img217/6918/tooltiptop.png) no-repeat;
  23. 	/*background-color: #000;*/
  24. }
  25.  
  26. div.tooltip span.message{
  27. 	margin:2px;
  28. 	margin-top: 10px;
  29. 	padding: 5px;
  30. 	background-color: #F7F7F7;
  31. 	border: 1px solid #B7B7B7;
  32. 	display: block;
  33. }
  34.  
  35.  
  36. a.tt:hover + div.tooltip{
  37. 	display: block;
  38. }
  39. li { position: relative; }
  40. 	</style>
  41. 	<title>Bez tytułu 1</title>
  42. </head>
  43.  
  44. <body>
  45.  
  46. <ul>
  47. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które majš okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  48. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które majš okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  49. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które majš okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  50.  
  51. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które majš okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  52. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które majš okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  53. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które majš okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  54.  
  55. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które majš okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  56. </ul>
  57.  
  58.  
  59.  
  60. </body>
  61. </html>
[HTML] pobierz, plaintext


Ten post edytował by_ikar 29.04.2010, 18:50:25
Go to the top of the page
+Quote Post
Mlodycompany
post 29.04.2010, 19:04:05
Post #3





Grupa: Zarejestrowani
Postów: 910
Pomógł: 44
Dołączył: 20.02.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

Dzięki. Naprowadziło mnie to troche i pozmieniałem co nie co i zaczeło działać. Zobaczymy na jak długo biggrin.gif
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 10:22
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn