Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Menu się rozjeżdza...
Forum PHP.pl > Forum > Przedszkole
ArekJ
Witam. Mam problem z kodem, ale nie wiem czy CSS czy HTML. Rozjeżdza mi się w dół pod FireFoxem. Nie znam dokładnych wersji, ale na FF3 wszystko jest ok.
W HTML mam:
  1. <li class="limenu" style="width: 101px; height: 38px;"><span style="width: 101px; background: url(images/menu_left.jpg); height: 38px;"></span></li><li class="limenu" style="width: 173px; height: 38px;"><span><a href="index.php" class="aglowna"></a></span></li><li class="limenu" style="width: 20px; height: 38px;"><span style="width: 20px; background: url(images/separator1.jpg); height: 38px;"></span></li><li class="limenu" style="width: 73px; height: 38px;"><span><a href="http://forum.xxxxxxxx.pl/" class="aforum"></a></span></li><li class="limenu" style="width: 21px; height: 38px;"><span style="width: 21px; background: url(images/separator2.jpg); height: 38px;"></span></li><li class="limenu" style="width: 119px; height: 38px;"><span><a href="index.php?act=rejestracja" class="arejestracja"></a></span></li><li class="limenu" style="width: 21px; height: 38px;"><span style="width: 21px; background: url(images/separator3.jpg); height: 38px;"></span></li><li class="limenu" style="width: 98px; height: 38px;"><span><a href="index.php?act=kontakt" class="akontakt"></a></span></li><li class="limenu" style="width: 109px; height: 38px;"><span style="width: 109px; background: url(images/menu_right.jpg); height: 38px;"></span></li>

A w CSS
  1. #menuwrapper {
  2. padding : 0;
  3. margin : 0 auto;
  4. border : 0;
  5. width : 735px;
  6. height : 38px;
  7. }
  8. #menu {
  9. padding : 0;
  10. margin : 0 auto;
  11. border : 0;
  12. display : block;
  13. width : 735px;
  14. height : 38px;
  15. list-style : none;
  16. }
  17. ul {
  18. padding : 0;
  19. margin : 0;
  20. border : 0;
  21. list-style : none;
  22. display : inline;
  23. }
  24. ul li {
  25. padding : 0;
  26. margin : 0;
  27. border : 0;
  28. height : 38px;
  29. list-style : none;
  30. display : inline;
  31. }
  32. .limenu {
  33. padding : 0;
  34. margin : 0;
  35. border : 0;
  36. list-style : none;
  37. display : inline;
  38. white-space : nowrap;
  39. }
  40. .limenu span {
  41. padding : 0;
  42. margin : 0;
  43. border : 0;
  44. width : auto;
  45. display : inline-block;
  46. }
  47. .aglowna {
  48. padding : 0;
  49. margin : 0;
  50. border : 0;
  51. height : 38px;
  52. display : block;
  53. width : 173px;
  54. background : url(images/glowna.jpg) no-repeat 0 0;
  55. }
  56. .aglowna:hover {
  57. background-position : 0 -38px;
  58. }
  59. .aforum {
  60. padding : 0;
  61. margin : 0;
  62. border : 0;
  63. height : 38px;
  64. display : block;
  65. width : 73px;
  66. background : url(images/forum.jpg) no-repeat 0 0;
  67. }
  68. .aforum:hover {
  69. background-position : 0 -38px;
  70. }
  71. .arejestracja {
  72. padding : 0;
  73. margin : 0;
  74. border : 0;
  75. height : 38px;
  76. display : block;
  77. width : 119px;
  78. background : url(images/rejestracja.jpg) no-repeat 0 0;
  79. }
  80. .arejestracja:hover {
  81. background-position : 0 -38px;
  82. }
  83. .akontakt {
  84. padding : 0;
  85. margin : 0;
  86. border : 0;
  87. height : 38px;
  88. display : block;
  89. width : 98px;
  90. background : url(images/kontakt.jpg) no-repeat 0 0;
  91. }
  92. .akontakt:hover {
  93. background-position : 0 -38px;
  94. }


Nie mam pojęcia jak to naprawić. Proszę o sugestie...
timon27
Nic dziwnego, że nikit Ci nie odpowiada - mi się po prostu nie chce przez to przechodzić. Jeśli chcesz aby łatwo się to sprawdzało to:
-umieszczaj cały css w style, a nie pół w <style>, drugie pół w style=""
-przełamuj linijki przy nowych tagach
-użyj wcięć
Być może kiedy "upięknisz" kod sam zobaczysz błąd smile.gif

Na pierwszy rzut oka mogę powiedzieć: istnieją podwójne deklaracje, istnieją zbędne deklaracje (np ul li, a nie korzystarz z ul). To chyba tylko część kodu bo nie widze menu oraz menuwrapper
Gryf
swoją drogą możesz to na jakiś serwer dać?
łatwiej mi wtedy ocenić potencjalny błąd jak mam grafikę ;]
ArekJ
http://beta.swiat-magii.pl/
Proszę tutaj jest wersja na serwerze winksmiley.jpg Czekam na jakieś podpowiedzi.
A c wcięciami to będzie mniej więcej tak:

  1. <li class="limenu" style="width: 101px; height: 38px;">
  2. <span style="width: 101px; background: url(images/menu_left.jpg); height: 38px;"></span>
  3. </li>
  4. <li class="limenu" style="width: 173px; height: 38px;">
  5. <span><a href="index.php" class="aglowna"></a></span>
  6. </li>
  7. <li class="limenu" style="width: 20px; height: 38px;">
  8. <span style="width: 20px; background: url(images/separator1.jpg); height: 38px;"></span>
  9. </li>
  10. <li class="limenu" style="width: 73px; height: 38px;">
  11. <span><a href="http://forum.xxxxxxxx.pl/" class="aforum"></a></span>
  12. </li>
  13. <li class="limenu" style="width: 21px; height: 38px;">
  14. <span style="width: 21px; background: url(images/separator2.jpg); height: 38px;"></span>
  15. </li>
  16. <li class="limenu" style="width: 119px; height: 38px;">
  17. <span><a href="index.php?act=rejestracja" class="arejestracja"></a></span>
  18. </li>
  19. <li class="limenu" style="width: 21px; height: 38px;">
  20. <span style="width: 21px; background: url(images/separator3.jpg); height: 38px;"></span>
  21. </li>
  22. <li class="limenu" style="width: 98px; height: 38px;">
  23. <span><a href="index.php?act=kontakt" class="akontakt"></a></span>
  24. </li>
  25. <li class="limenu" style="width: 109px; height: 38px;">
  26. <span style="width: 109px; background: url(images/menu_right.jpg); height: 38px;"></span>
  27. </li>
JoShiMa
Człowieku. Po co Ci ten <span> wewnątrz <li> ? PRzecież wystarczy to <li> albo <a> po ludzku ostylować.

A gdzie tu: http://beta.swiat-magii.pl/ jest to menu bo jakoś nie widzę.
ArekJ
Jest pod logiem... Potem ten span usunę, ale jak to naprawić?
JoShiMa
Ja tam w FF widzę tylko "Strona główna".

Namotałeś tak w stylach, że głowa mała.

Po co wszędzie
  1. padding : 0;
  2. margin : 0;
  3. border : 0;


Raz na początku daj:
  1. *{
  2. padding : 0;
  3. margin : 0;
  4. border : 0;
  5. }

a inne wartości ustawiaj tylko tam gdzie potrzeba.

Masz osobno style dla ul li osobno dla .limenu. Wcale bym się nie zdziwiła jak by się gryzły z tym style dla <span> masz tam bałagan totalny.

Zacznij te style pisać od początku i jakoś porządniej.
Masz tu na początek skrypt z samym menu w linii:
http://blog.bexlab.pl/tutorials/inline.html

I zobacz jak to można zrobić w kilku linijkach (style)
Gryf
po ciężkim dniu w prac 2 minuty i ff dobrze to widzi ale popraw całość ;]
Kod
.limenu {
border:0 none;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
white-space:nowrap;
}
ArekJ
Widziac dobrze, bo z kolega kombinowalem i juz sie w linii ukladdalo, tylko odstepy byly. Dzieki bardzo-mam nadzieje, ze dziala pod FF2, ale nie mam jak tego przetestowac dopiero jutro...

Eh... To znowu ja z tym problemem. Przetestowałem to pod FF 1.5.0.6(chyba ta cyferka) i ku mojemu zdziwnieniu menu się nie rozjeżdza... bo go nie ma biggrin.gif Znikneło. Taką samą sytuację mam na mini operze oraz przeglądarce w konsoli. A z tej ostatniej często korzystam i miło by było gdyby zaczeło działać. Czekam na jakąś pomoc/sugestie dot. rozwiązania tego problemu!

Niestety, ale muszę podbić temat bo nowego nie chce zakładać. Nic nie przynosi efektu. W tym momencie wogóle nie widać menu. Jest pustka. Bardzo proszę, żeby ktoś na to rzucił okiem, bo walidacje przechodzi poprawnie, a menu nie widać :/
Gryf
hmm... tylko kto dziś używa ff'a w tak starej wersji?
kolega powinien się zaprzyjaźnić z firebug'iem ;]
;] przepisz ten css do porządku
bo tak to ciągle będziesz coś poprawiać w 10 miejscach ;]
ArekJ
Niestety, ale nie mam FF2. Błąd ten występuje również na mojej konsoli. A FireBug pod FF3 mi nic nie wywala. Szczerze to zabardzo nie wiem jak mu kazać przeskanować CSS sad.gif
Gryf
jak to nie masz ff'a w takiej wersji google nie boli ściągnij i działaj
ArekJ
Nie wiem jak to zainstalować pod Linuxem i to w dodatku wersji na PPC :/ Ale może ktoś by mógł mi te błędy przepisać?
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.