Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]menu zbędne obrazki w rogach
Forum PHP.pl > Forum > Przedszkole
Lejto
Wykorzystałem animowane menu stąd: http://webhosting.pl/2.animowane.menu.za.p...jQuery..animate wszystko ok tylko mam zbędne obrazki w górnych lewych i prawych rogach.

Kod mam ten sam co na stronie. Nawet wiozłem ten sam obrazek co jest pokazany na stronie w przykładzie (środkowy) bo ten powoduje problem. Nie wiem co robić.
Rogi są normalne po wywaleniu środka albo po usunięciu z ul#jumping-nav li, ul#jumping-nav li a postion ale wtedy wszystko w 1 miejscu jest.
  1. ul#jumping-nav
  2. {
  3. position: relative;
  4. float: left; /* przemianowanie listy na szeregowa */
  5. overflow: hidden;
  6. padding: 0 10px;
  7. list-style: none;
  8. height: 4em; /* szerokosc przycisku */
  9. }
  10.  
  11. ul#jumping-nav li, ul#jumping-nav li a
  12. {
  13. position: relative;
  14. float: left; /* przemianowanie listy na szeregowa */
  15. }
  16.  
  17. ul#jumping-nav li
  18. {
  19. background: none;
  20. margin: 0;
  21. padding: 0;
  22. padding-left: 1px; /* 1-pikselowe rozdzielenie dwoch przyciskow od siebie */
  23. top: 15px; /* odleglosc od gornej krawedzi danej listy */
  24. }
  25.  
  26. ul#jumping-nav li a
  27. {
  28. display: block;
  29. background: url('../images/menu_04.gif') 0 0 repeat-x; /* adres do grafiki srodka przycisku powtarzany na osi X */
  30. padding: 0.9em 1.1em;
  31. text-decoration: none;
  32. color: #006a6d;
  33. height: 57px;
  34. font-weight: bold;
  35.  
  36. }
  37.  
  38. ul#jumping-nav li a span.left {
  39. display: block;
  40. /* pozycja absolutna */
  41. position: absolute;
  42. background: url('../images/menu_01.gif') 0 0 no-repeat; /* adres do grafiki lewej krawedzi przycisku */
  43. height: 57px;
  44. width: 12px;
  45. /* ustawienie grafiki lewej krawedzi w pozycji lewego, gornego rogu elementu listy */
  46. left: 0;
  47. top: 0;
  48. z-index: 10; /* ustawienie grafiki granicznej nad powielana, srodkowa */
  49. }
  50.  
  51. ul#jumping-nav li a span.right {
  52. display: block;
  53. /* pozycja absolutna */
  54. position: absolute;
  55. background: url('../images/menu_05.gif') 0 0 no-repeat; /* adres do grafiki prawej krawedzi przycisku */
  56. height: 57px;
  57. width: 12px;
  58. /* ustawienie grafiki prawej krawedzi w pozycji prawego, gornego rogu elementu listy */
  59. right: 0;
  60. top: 0;
  61. z-index: 10; /* ustawienie grafiki granicznej nad powielana, srodkowa */
  62. }
  63.  
  64. /* zmiany dokonywane przy najechaniu mysza na przycisk (grafika srodkowa + grafiki krawedzi) */
  65. ul#jumping-nav li a:hover, ul#jumping-nav li a:hover span
  66. {
  67. background-position: 0 -57px; /* przesuniecie pozycji tla o 57px w dol */
  68. color: #3f5f5a;
  69. }
  70.  
  71. /* zmiany dokonywane przy kliknieciu mysza na przycisk lub po zaznaczeniu jej tabulatorem (grafika srodkowa + grafiki krawedzi) */
  72. ul#jumping-nav li a:active, ul#jumping-nav li a:active span, ul#jumping-nav li a:focus, ul#jumping-nav li a:focus span
  73. {
  74. background-position: 0 -114px; /* przesuniecie pozycji tla o 114px w dol */
  75. color: #333;
  76. }
  77.  
  78. ul#jumping-nav li#with-image a
  79. {
  80. display: block;
  81. padding: 0.9em 1.1em;
  82. background: url('grafika_specjalna.png') 0 0 no-repeat; /* brak powtarzania w jakiejkolwiek osi */
  83. color: #333;
  84. text-decoration: none;
  85. height: 57px;
  86. width: 117px; /* okreslona na stale szerokosc przycisku */
  87. }
  88.  
  89. /* zmiany dokonywane po najechaniu mysza na przycisk specjalny */
  90. ul#jumping-nav li#with-image a:hover
  91. {
  92. background-position: 0 -57px;
  93. }
  94.  
  95. /* zmiany dokonywane przy kliknieciu mysza na przycisku specjalnym lub po zaznaczeniu jej tabulatorem */
  96. ul#jumping-nav li#with-image a:active, ul#jumping-nav li#with-image a:focus
  97. {
  98. background-position: 0 -114px;
  99. }


Pozdrawiam

nie macie żadnego pomysłu jak temu zaradzić ;/?
sadistic_son
Jeszcze kod html mógłbyś zamieścić
Lejto
  1. <ul class="menu" style="margin-left:100px;" id="jumping-nav">
  2.  
  3. <li><a href="index.php" title="#"><span class="left"></span>Strona główna<span class="right"></span></a></li>
  4.  
  5. <li><a href="kontakt/" title="#"><span class="left"></span>Kontakt<span class="right"></span></a></li>
  6. <li><a href="dokumenty/" title="#"><span class="left"></span>Dokumenty<span class="right"></span></a></li>
  7. <li><a href="mail/" title="#"><span class="left"></span>Napisz wiadomość<span class="right"></span></a></li>
  8. <li><a href="galeria/" title="#"><span class="left"></span>Galeria<span class="right"></span></a></li>
  9. </ul>


i nic nie da się z tym zrobić?
seth-kk
przekombinowales - patent ze spanami wyglada mniejwiecej tak
Lejto
mam divy jak w http://webhosting.pl/2.animowane.menu.za.p...jQuery..animate a tam wszystko dziala...
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.