Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Menu wchodzące pod treść
Forum PHP.pl > Forum > Przedszkole
shd
Witam,
Szukam już kolejny raz gdzie tkwi błąd i nie potrafię sobie z nim poradzić więc może Wy mi pomożecie.

Otóż problem dotyczy menu, które rozwijając się chowa się pod galerię zdjęć. Zobaczyć to można na stronie http://www.tomaszkrzak.pl/new/fotografia/galeria/ - ostatnia pozycja: KONTAKT.

Kod menu:
  1. <div id="navi">
  2. <!-- menu -->
  3. <ul id="menu">
  4. <li><a href="<?php echo $path; ?>fotografia/galeria">Fotografia</a>
  5. <ul>
  6. <li><a href="<?php echo $path; ?>fotografia/galeria" title="">Galeria</a></li>
  7. <li><a href="<?php echo $path; ?>fotografia/albumy" title="">Albumy</a></li>
  8. <li><a href="<?php echo $path; ?>fotografia/okolicznosciowa" title="">Okolicznościowa</a></li>
  9. <li><a href="<?php echo $path; ?>fotografia/produktowa" title="">Produktowa</a></li>
  10. </ul>
  11. </li>
  12. <li><a href="#" title="">Grafika</a>
  13. <ul>
  14. <li><a href="<?php echo $path; ?>grafika/spaceart" title="">Spaceart</a></li>
  15. <li><a href="<?php echo $path; ?>grafika/landscape" title="">Landscape</a></li>
  16. <li><a href="<?php echo $path; ?>grafika/3d" title="">3D</a></li>
  17. </ul>
  18. </li>
  19. <li><a href="#" title="">Kontakt</a>
  20. <ul class="last">
  21. <li class="last"><a href="mailto:kontakt@tomaszkrzak.pl?subject=Kontakt ze strony www" title=""><img src="<?php echo $path; ?>img/profile_email.png">kontakt@tomaszkrzak.pl</a></li>
  22. <li class="last"><a href="gg:961354" title=""><img src="<?php echo $path; ?>img/profile_gg.png">961354</a></li>
  23. <li class="last"><a href="http://www.facebook.com/tomasz.krzak" title=""><img src="<?php echo $path; ?>img/profile_facebook.png">tomasz.krzak</a></li>
  24. <li><a href="http://shados.plfoto.com/" title=""><img src="<?php echo $path; ?>img/profile_view.png"><span style="font-family: anton;">Zobacz profil na:</span> plfoto</a></li>
  25. <li><a href="http://shados.digart.pl/" title=""><img src="<?php echo $path; ?>img/profile_view.png"><span style="font-family: anton;">Zobacz profil na:</span> digart</a></li>
  26. </ul>
  27. </li>
  28. </ul>
  29. </div>


Style menu:
  1. #navi {margin:0px auto 0; font-family: LatoRegular; float: left; border: 0px solid; position: relative;}
  2.  
  3. #menu {display: block; padding: 0 0px 0 !important; margin: 54px auto 0; font-size: 18px; background: transparent; }
  4. #menu li {list-style-type: none; margin: 0 auto; float: left; }
  5. #menu li:hover {background: url('../img/bg-transp75.png');}
  6. #menu li a {display: block; color: #fff; text-decoration: none; padding: 7px 15px 7px; font-family: Anton; letter-spacing: -0px; text-transform: uppercase; text-shadow: 1px 1px 1px #000;}
  7. #menu li a:hover {background: ; color: #fff; text-shadow: none;}
  8. #menu li a.current {background: url('../img/bg-transp75.png'); color: #fff; }
  9. #menu li li {width: 100%;}
  10. #menu li li a {width: 100%; font-size: 11px;font-family: Latobold, arial, sans-serif; display: block;}
  11. #menu li li a:hover {background: #fff; color: black; text-shadow: none;}
  12. #menu li ul {overflow: hidden; display: none; background: url('../img/bg-transp75.png');}
  13. #menu li:hover ul {position: absolute; padding: 0; display: block; width: auto;}
  14. #menu li:hover ul.last {right: 0; width: auto; padding: 0; text-transform: none;}
  15. #menu li:hover ul.last li a{text-transform: none;width: auto; display:block; vertical-align: middle;}
  16. #menu li:hover ul.last img {vertical-align: middle; margin-right: 9px;}


Cały div#navi ujęty jest jeszcze w div#header:
  1. #header {width: 100%; height: 150px; border: 0px solid; margin: 0 auto;}


Poradźcie i napiszcie co jest nie tak, że to menu wskakuje pod treść...
lukesh
Wszystko jest w jak najlepszym porządku - kolejne elementy przykrywają poprzednie elementy i tak właśnie powinno być. Jeśli chcesz, żeby było inaczej, musisz w CSS dodać z-index:

  1. #menu {z-index:2; display: block; padding: 0 0px 0 !important; margin: 54px auto 0; font-size: 18px; background: transparent; }


Możesz próbować z większymi liczbami, jeśli nie zadziała, a np. obrazkom dać mniejszy parametr.
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.