Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Rozwijane menu w css i chowanie się rozwiniętego menu pod zawartość strony, z-index nie działa
MOniToR
post
Post #1





Grupa: Zarejestrowani
Postów: 182
Pomógł: 2
Dołączył: 16.11.2003
Skąd: Wrocław / Skokowa

Ostrzeżenie: (10%)
X----

Strona http://www.goprojects20080129.dev.mamboassistance.com/

Znalazłem proste drop down menu css, wszystko ładnie śmiga tylko dla przykładu jak się najedzie na obrazek, który jest jako pierwszy element menu ucina rozwinięte menu, od momentu gdy nachodzi na cześć z zawartością strony. Kombinowałem z z-index ale nie przyniosło to żadnego efektu :/ Często mi się tak zdarzało w innych projektach, zazwyczaj jednak rezygnowałem z rozwijanego menu ale w tym przypadku tak zrobić nie mogę :/ proszę o pomoc...
CSS:
[HTML] pobierz, plaintext 
  1. #menu {
  2. 	background:  url(../images/menu.png) no-repeat top left;
  3. 	width:524px;
  4. 	height:50px;
  5. 	text-align:left;
  6. 	float:right;
  7. 	z-index:400;
  8. }
  9.  
  10. #cssdropdown, #cssdropdown ul {
  11. padding: 0;
  12. margin: 0;
  13. list-style: none;
  14. }
  15.  
  16. #cssdropdown li {
  17. float: left;
  18. position: relative;
  19. }
  20.  
  21. .mainitems{
  22. border: 1px solid black;
  23. background-color: #562f2c;
  24. }
  25.  
  26. .mainitems a{
  27. margin-left: 6px;
  28. margin-right: 8px;
  29. text-decoration: none;
  30.  
  31. }
  32.  
  33. .subuls{
  34. display: none;
  35. width: 10em;
  36. position: absolute;
  37. top: 1.2em;
  38. left: 0;
  39. background-color: #562f2c;
  40. border: 1px solid black;
  41. }
  42.  
  43. .subuls li{
  44. width: 100%;
  45. }
  46.  
  47. .subuls li a{
  48. text-decoration: underline;
  49. }
  50.  
  51. #cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
  52. top: auto;
  53. left: auto;
  54. }
  55.  
  56. #cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
  57. display: block;
  58. }
  59.  
  60. #restofcontent { /*wrap rest of content of the page inside this div*/
  61. clear: left;
  62. }
[HTML] pobierz, plaintext

HTML:
[HTML] pobierz, plaintext 
  1. <div id="menu"><ul id="cssdropdown">
  2.  
  3. <li class="mainitems">
  4. <a href="http://www.cssdrive.com"><img src="templates/mbpc/images/menu_aboutus.png" alt="" height="20" border="0" /></a>
  5. <ul class="subuls">
  6. <li><a href="">Gordon Mac</a></li>
  7. <li><a href="">Juiced Thoughts</a></li>
  8. <li><a href="">The Daily Flight</a></li>
  9. <li><a href="">GrapeFruit</a></li>
  10. </ul>
  11. </li>
  12.  
  13. <li class="mainitems">
  14. <a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
  15. <ul class="subuls" style="width: 15em">
  16. <li><a href="">CSS2 Generated Content</a></li>
  17. <li><a href="">Custom scrollbar colors</a></li>
  18. <li><a href="">Markerless and "no indent" Lists</a></li>
  19. </ul>
  20. </li>
  21. <li class="mainitems">
  22. <a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
  23. <ul class="subuls" style="width: 15em">
  24. <li><a href="">CSS2 Generated Content</a></li>
  25. <li><a href="">Custom scrollbar colors</a></li>
  26. <li><a href="">Markerless and "no indent" Lists</a></li>
  27. </ul>
  28. </li>
  29. <li class="mainitems">
  30. <a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
  31. <ul class="subuls" style="width: 15em">
  32. <li><a href="">CSS2 Generated Content</a></li>
  33. <li><a href="">Custom scrollbar colors</a></li>
  34. <li><a href="">Markerless and "no indent" Lists</a></li>
  35. </ul>
  36. </li>
  37. <li class="mainitems">
  38. <a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
  39. <ul class="subuls" style="width: 15em">
  40. <li><a href="">CSS2 Generated Content</a></li>
  41. <li><a href="">Custom scrollbar colors</a></li>
  42. <li><a href="">Markerless and "no indent" Lists</a></li>
  43. </ul>
  44. </li>
  45. </ul>
  46.  
  47. <div id="restofcontent">
  48. <br />
  49.  
  50. </div></div>
[HTML] pobierz, plaintext


Ten post edytował MOniToR 7.02.2008, 12:33:00
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
MOniToR
post
Post #2





Grupa: Zarejestrowani
Postów: 182
Pomógł: 2
Dołączył: 16.11.2003
Skąd: Wrocław / Skokowa

Ostrzeżenie: (10%)
X----

Zrobiłem tak i dalej nic:/

MI się wydaje, że to może przez to, że div z zawartością jest wyżej, przez co jest interpretowany jako ważniejszy i dlatego tak sie dzieje...

http://www.goprojects20080129.dev.mamboass...pc/css/menu.css
http://www.goprojects20080129.dev.mamboass...emplate_css.css
http://www.goprojects20080129.dev.mamboass...late_ie_css.css

Teraz to wygląda tak:

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="minHeight"></div>
  3. <div id="outer"> 
  4. <div id="outer2"> 
  5. <div id="outer3"> 
  6.   <div id="centrecontent"> 
  7.     <!--centre content goes here -->
  8. 	 <div id="main">
  9. 	 <div id="main_start"></div>
  10. 	 <div id="main_content"><div class="txt"><?php mospathway() ?>
  11. <?php mosMainBody(); ?>
  12. <?php mosLoadModules('bottom');?></div></div>
  13. 	 <div id="main_end"></div>
  14.   </div>
  15. </div>
  16.   <div id="right"> 
  17.     <div id="right_start"></div> 
  18.     <div id="right_main"><div class="txt"><?php mosLoadModules('right');?></div></div>
  19. 	 <div id="right_end"></div> 
  20.   </div>
  21.   <div id="clearfooter"></div>
  22.   <!-- ie needs this -->
  23.   <div id="header"> 
  24.     <div id="top"><div id="topmenu"><?php mosLoadModules('top');?></div></div>
  25. 	 <div id="menu_leftside"></div>
  26. 	 <div id="menu">
  27.  
  28. TUTAJ MENU
  29.  
  30. </div>
  31. <div id="restofcontent">
  32. <br />
  33. </div>
  34.  
  35. </div><?php mosLoadModules('user3');?> </div>
  36.   </div>
  37.  
  38. <div id="shadow_main_bottom"></div>
  39. <div id="footer_shadow_top"></div>
  40.   <div id="footer">
  41.   <div id="bottom">
  42.   <div id="bottom_start"></div>	
  43.   <div id="bottom_main"><div id="user1_a"><?php mosLoadModules('user1');?> </div>
  44. 	</div>
  45. 	<div id="bottom_end"></div>	
  46. 	</div>	
  47.     <div id="bottom2">
  48.   <div id="bottom_start"></div>	
  49.   <div id="bottom_main"><div id="user1_a"><?php mosLoadModules('user2');?> </div>
  50. 	</div>
  51. 	<div id="bottom_end"></div>	
  52. 	</div>		
  53.   <?php mosLoadModules('footer');?>
  54. 	 </div>
  55. </div>
  56. <!-- end outer div -->
  57. </body>
[HTML] pobierz, plaintext

Lub live - www.goprojects20080129.dev.mamboassistance.com

Możesz poradzić coś jeszcze? (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post

Posty w temacie
- MOniToR   Rozwijane menu w css i chowanie się rozwiniętego menu pod zawartość strony   7.02.2008, 12:31:53
- - nevt   oddziel w kodzie i spozycjonuj menu i resztę,...   7.02.2008, 13:01:15
- - MOniToR   możesz mi powiedzieć o masz na myśli mówiąc oddzie...   7.02.2008, 13:09:04
- - nevt   a nie widzisz co napisałem? w twoim kodzie div#res...   7.02.2008, 13:24:04
- - MOniToR   tylko, że template jest tak zrobiony, że content(z...   7.02.2008, 13:30:21
- - nevt   to zmień template - w czym kłopot ? przesuwasz ...   7.02.2008, 14:01:00
- - MOniToR   Zrobiłem tak i dalej nic:/ MI się wydaje, że to ...   7.02.2008, 14:58:31
- - nevt   kod który ci nie działa - to nie ten sam kod ...   7.02.2008, 15:11:59
- - MOniToR   Strona to jest Joomla. Skrypt wziąłem stad http://...   7.02.2008, 15:19:18

« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 2.10.2025 - 22:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn