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

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

Posty w temacie


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

 



RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 10:25