Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] position fixed - problem
Forum PHP.pl > Forum > Przedszkole
cabana
Witam.
Zrobiłem rozwijane menu w jQuery i CSS.
Rozwijanemu elementowi nadałem position fixed (inny mi nie pokrywa innych elementów pomimo z-index 99999) i rozwinięty element przesuwa mi się na stronie po użyciu scrolla a chcę aby dany element pozostał na swoim miejscu. Proszę o pomoc w rozwiązaniu problemu.
konrados
Pewnie jakaś literówka, ale naprawdę kod by nie zaszkodził, a jeszcze lepiej link do strony gdzie to się dzieje.

Edit: o ile kojarzę przy position fixed top i left są wymagane.
cabana
Mam wszystko na localhoscie bez zew. ip

Kod css:

  1. .menu_gorne-lvl2 {
  2. list-style: none;
  3. margin: 0;
  4. padding: 0;
  5. float: left;
  6. font: bold 13px Arial;
  7. border-left: 1px solid #625e00;
  8. border-right: 1px solid #625e00;
  9. border-bottom: 1px solid #625e00;
  10. border-width: 1px 0;
  11. z-index: 99999;
  12. position: fixed;
  13. display: none;
  14. margin-top: 33px;
  15. height: 35px;
  16. background: black url(images/menu.jpg) center center repeat-x;
  17. }
  18.  
  19. .lvl1, .lvl2{
  20. position: relative;
  21. float: left;
  22. }
  23.  
  24.  
  25. .lvl1 a:hover {
  26. display:block;
  27. }
  28.  
  29. .menu_gorne-lvl1 li a{
  30. float: left;
  31. color: #414141;
  32. padding: 9px 11px;
  33. text-decoration: none;
  34. border-right: 1px solid #a8a8a8;
  35. }
  36.  
  37. .menu_gorne-lvl1 li a:visited{
  38. color: 414141;
  39. }
  40.  
  41. .menu_gorne-lvl1 li a:hover, .lvl1 li .current{
  42. color: #414141;
  43. background: transparent url('images/menu2.jpg') center center repeat-x;
  44. }


kod html:
  1. <ul class="menu_gorne-lvl1">
  2. <li class="lvl1"><a href="">Link1</a></li>
  3. <li class="lvl1"><a href="">Link2</a>
  4. <ul class="menu_gorne-lvl2">
  5. <li class="lvl2"><a href="">Link2.1</a></li>
  6. <li class="lvl2"><a href="">Link2.2</a></li>
  7. <li class="lvl2"><a href="">Link2.3</a></li>
  8. <li class="lvl2"><a href="">Link2.4</a></li>
  9. <li class="lvl2"><a href="">Link2.5</a></li>
  10. </ul>
  11. </li>
  12. <li class="lvl1"><a href="#">Link</a></li>
  13. </ul>


@edit
dorzucam jeszcze kawałek kodu css

  1. .menu_gorne-lvl1 {
  2. list-style: none;
  3. margin: 0;
  4. padding: 0;
  5. float: left;
  6. font: bold 13px Arial;
  7. width: 100%;
  8. overflow: hidden;
  9. margin-bottom: 1em;
  10. border: 1px solid #625e00;
  11. border-width: 1px 0;
  12. background: black url(images/menu.jpg) center center repeat-x;
  13. z-index: 999;
  14. display: block;
  15. }
konrados
Nie wiem o co biega, ale ubrałem Twoje menu w div o tak:

  1. <div class='menu_wrap'>
  2. <ul class="menu_gorne-lvl1">
  3. <li class="lvl1"><a href="">Link1</a></li>
  4. <li class="lvl1"><a href="">Link2</a>
  5. <ul class="menu_gorne-lvl2">
  6. <li class="lvl2"><a href="">Link2.1</a></li>
  7. <li class="lvl2"><a href="">Link2.2</a></li>
  8. <li class="lvl2"><a href="">Link2.3</a></li>
  9. <li class="lvl2"><a href="">Link2.4</a></li>
  10. <li class="lvl2"><a href="">Link2.5</a></li>
  11. </ul>
  12. </li>
  13. <li class="lvl1"><a href="#">Link</a></li>
  14. </ul>
  15. </div>


Nadałem mu:

  1. .menu_wrap{
  2. position:fixed;
  3. left:0px;
  4. top:0px;
  5. width:100%;
  6. }


A Twój styl zmieniłem tak:

  1. .menu_gorne-lvl1 {
  2. list-style: none;
  3. margin: 0;
  4. padding: 0;
  5.  
  6. font: bold 13px Arial;
  7. width: 100%;
  8. overflow: hidden;
  9. margin-bottom: 1em;
  10. border: 1px solid #625e00;
  11. border-width: 1px 0;
  12. background: black url(images/menu.jpg) center center repeat-x;
  13.  
  14. display: block;
  15. }


I chyba jest OK.
Ale jakby co to ja sobie robię przerwę, więc jak to nie zadziała to kto inny będzie musiał pomóc.
cabana
Chodzi o to, że menu (menu_gorne-lvl1) jest ciągle widoczne a po najechaniu na link (Link2) pojawia się menu (menu_gorne-lvl2) a ja chcę aby menu_gorne-lvl2 nie poruszało się podczas przesuwania strony tylko żeby przykleiło się pod menu_gorne-lvl1
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.