Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Problem z menu nawigacyjnym
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
swiezak
Witam.
Nie mogę sobie poradzić z poprawnym zakodowaniem w CSS menu nawigacyjnego umiejscowionego po lewej stronie (http://tech-project.eu). Przykładowo po wybraniu 'Oferta dla klientów' w Chrome są dziwne odstępy nad i pod podkategoriami (części toczone, części frezowane itd.). W IE 7 jest jeszcze większa tragedia. Nie jestem autorem tego 'wynalazku', więc bardzo proszę o wyrozumiałość i pomoc.

Kod CSS:

  1. .menubackground{
  2. background: url(../img/intro/menubackgroundintro.png) left top no-repeat;
  3. padding-left: 30px;
  4. padding-top: 5px;
  5. margin-left:15px;
  6. margin-top:10px;
  7. width: 188px;
  8. height: auto;
  9. }
  10.  
  11. #leftcolumn{
  12. float: left;
  13. margin-left: -1100px; /*Set margin to that of -(MainContainerWidth)*/
  14. width: 290px;
  15. overflow: hidden;
  16. }
  17.  
  18. .innertube_menu { /* own setting */
  19. margin: 10px;
  20. margin-top: 0;
  21. width: 225px;
  22. overflow: hidden;
  23. }
  24.  
  25. div.module_menu ul{
  26. padding-left: 0px;
  27. text-align: left;
  28. list-style: none;
  29. }
  30.  
  31. .module_menu a{
  32. color: white;
  33. text-decoration:none;
  34. }
  35.  
  36. ul.menu .active {
  37. background: url(../img/menu_on.png) no-repeat;
  38. width:230px;
  39. height: auto; /* own setting */
  40.  
  41. }
  42.  
  43. li#current{
  44. background: url(../img/menu_on.png) repeat-y;
  45. width:230px;
  46. height: auto;
  47. }
  48.  
  49. li#current span { /* own setting */
  50. display: block;
  51. margin-top: -20px !important;
  52. margin-top: 0px;
  53. width: 200px;
  54. height: auto;
  55. line-height: 26px;
  56. padding: 0 0 0 25px;
  57. position: relative;
  58. clear: both;
  59. cursor: pointer;
  60. }
  61.  
  62. li#current ul li span { /* own setting */
  63. display: block;
  64. width: 180px;
  65. height: auto;
  66. padding: 0 0 0 25px;
  67. position: relative;
  68. clear: left;
  69. cursor: pointer;
  70. }
  71.  
  72. #current ul .active {
  73. background: url(../img/menu_on.png) repeat-y;
  74. width:230px;
  75. height: auto;
  76. }
  77.  
  78. ul.menu li ul li{
  79. background: url(../img/menu_on.png) repeat-y;
  80. width: 215px;
  81. padding-left: 15px;
  82. text-transform: none;
  83. font-family:Arial;
  84. font-size:12px;
  85. line-height: 26px;
  86. }
  87.  
  88. ul.menu li{
  89. background: url(../img/menu_off.png) repeat-y;
  90. width:230px;
  91. height: auto;
  92. text-transform:uppercase;
  93. font-family:Arial;
  94. font-size:12px;
  95. line-height: 26px;
  96. }
  97.  
  98. ul.menu li:hover{
  99. background: url(../img/menu_on.png) repeat-y;
  100. width:230px;
  101. font-family:Arial;
  102. font-size:12px;
  103. }
  104.  
  105. div.module_menu ul li a:link, div.module_menu ul li a:hover {
  106. text-decoration: none;
  107. line-height: 26px;
  108. height:26px;
  109. }
  110.  
  111. ul.menu li a{
  112. font-weight: bold;
  113. text-decoration: none;
  114. line-height: 26px;
  115. height:26px;
  116. padding-left: 25px;
  117. }
  118.  
  119. ul.menu li a:hover{
  120. font-weight: bold;
  121. }
  122.  
  123. ul.menu li ul li a{
  124. font-weight: lighter;
  125. }
  126.  
  127. ul.menu li ul li a:hover{
  128. font-weight: lighter;
  129. text-decoration: underline;
  130. }


Kod HTML:
  1. <div id="leftcolumn">
  2.  
  3. <div class="menubackground">
  4.  
  5. <div class="innertube_menu">
  6.  
  7. <div class="module_menu">
  8.  
  9. <div>
  10.  
  11. <div>
  12.  
  13. <div>
  14.  
  15. <ul class="menu">
  16. <li class="item1"><a href="http://localhost/tech-project_www/"><span>Strona główna</span></a></li>
  17. <li id="current" class="parent active item123"><a href="/tech-project_www/pl/o-firmie.html"><span>O Firmie</span></a>
  18. <ul>
  19. <li class="item124"><a href="/tech-project_www/pl/o-firmie/aktualnoci.html"><span>Aktualności</span></a></li>
  20. <li class="item125"><a href="/tech-project_www/pl/o-firmie/kariera.html"><span>Kariera</span></a></li>
  21. </ul>
  22. </li>
  23. <li class="parent item98"><a href="/tech-project_www/pl/oferta-dla-klientow.html"><span>Oferta dla klientów</span></a></li>
  24. <li class="item105"><a href="/tech-project_www/pl/oferta-dla-podwykonawcow.html"><span>Oferta dla podwykonawców</span></a></li>
  25. <li class="item106"><a href="/tech-project_www/pl/maszyny.html"><span>Maszyny</span></a></li>
  26. <li class="item107"><a href="/tech-project_www/pl/jako.html"><span>Jakość</span></a></li>
  27. <li class="parent item108"><a href="/tech-project_www/pl/nasi-partnerzy.html"><span>Nasi partnerzy</span></a></li>
  28. <li class="item91"><a href="/tech-project_www/pl/kontakt.html"><span>Kontakt</span></a></li>
  29. </ul>
  30. </div>
  31.  
  32. </div>
  33.  
  34. </div>
  35.  
  36. </div>
  37.  
  38.  
  39. </div>
  40.  
  41. </div>
  42.  
  43. </div>
Damonsson
W operze też jest tragedia...więc tylko ff jest chyba ponadprzeciętnie tolerancyjny.

Błąd powoduje:

  1. techproject.css:174
  2. li#current span {
  3. clear: both;
  4. cursor: pointer;
  5. display: block;
  6. height: auto;
  7. line-height: 26px;
  8. margin-top: -20px !important;
  9. padding-bottom: 0px;
  10. padding-left: 25px;
  11. padding-right: 0px;
  12. padding-top: 0px;
  13. position: relative;
  14. width: 200px;
  15. }


line-height: 26px;
margin-top: -20px !important;
swiezak
Po usunięciu tych 2 atrybutów w dalszym ciągu jest problem z odstępami.
Damonsson
w 10 różnych miejscach masz line-height: 26px. Które się nadpisuje.

Napisz to porządnie, bo to się do niczego nie nadaje póki co.
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.