Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu przesuwa zawartosc div'a
Forum PHP.pl > Forum > Po stronie przeglądarki
hubson87
4.03.2011, 11:02:27
Witam, tworze taka prosta stronke jednak mam maly problem z menu rozwijanym. Dokladnie chodzi o to, że jeżeli najadę myszką na jedno z moich menu, to zawartość div id="tresc"
przesuwa sie w prawo. Jak zrobic zeby to menu nie mialo wplywu na zawartosc tego diva?


index.php
[HTML] pobierz, plaintext 
  1. </head>
  2. <body>	
  3. <div id="pasek"></div> 
  4.  <div id="calosc">
  5.  <div id="gora">
  6.  <div id="baner">
  7.  <div id="logo">
  8. <div id="logox"></div>
  9. </div>
  10. </div>
  11. <div id="panel"></div> 
  12. <div id="pasek2"> 		
  13. <div id="menu"><a  style="text-decoration:none; black; color:red; outline:none; HOVER{color:black} " href="index.php" > <p>Strona Główna</p></a>
  14. </div>
  15. <div id="menu"> <p>Przegląd</p>
  16. <ul>
  17. <li><a href="#">Strona Główna</a></li>
  18. <li><a href="#">Download</a></li>
  19. <li><a href="#">Kontakt</a></li>
  20. <li><a href="#">Forum</a></li>
  21. </ul>
  22. </div>
  23. <div id="menu"> <p style="position:relative; bottom: 8px";>Dokumenty wewnętrzne</p>
  24. <ul>
  25. <li><a href="#">Strona Główna</a></li>
  26. <li><a href="#">Download</a></li>
  27. <li><a href="#">Kontakt</a></li>
  28. <li><a href="#">Forum</a></li>
  29. </ul>
  30. </div>
  31. <div id="menu"> <p style="position:relative; bottom: 8px";>Dokumenty zewnętrzne</p>
  32. <ul>
  33. <li><a href="#">Strona Główna</a></li>
  34. <li><a href="#">Download</a></li>
  35. <li><a href="#">Kontakt</a></li>
  36. <li><a href="#">Forum</a></li>
  37. </ul>
  38. </div>
  39. <div id="menu"> <p>Edycja</p>
  40. <ul>
  41. <li><a href="?page=klient_dodaj">Dodaj klienta</a></li>
  42. <li><a href="#">Download</a></li>
  43. <li><a href="#">Kontakt</a></li>
  44. <li><a href="#">Forum</a></li>
  45. </ul>
  46. </div>
  47. </div>
  48. <div id="panel"></div> 
  49.  
  50.  <div id="tresc">
  51.    <?php
  52.  
  53.       $page = (isset($_GET['page']) ? $_GET['page'] : "");
  54.  
  55.       $name = "$page.php";
  56.  
  57.       if(file_exists(basename($name)))
  58. 	  {include($name);}
  59. 	  else
  60. 	  { echo'Wybierz operacje'; }
  61.       ?>
  62. 	  </div>
  63. </div>
  64.  <div id="stopka"></div>
  65. </div>
  66. </body>
  67. </html>
[HTML] pobierz, plaintext



oraz style: 
[HTML] pobierz, plaintext 
  1. html, body{
  2. margin: 0;
  3. padding: 0;
  4. border: none;
  5. background-color: #ababab;
  6. background-repeat: repeat-x;
  7. background-attachment: fixed;}
  8.  
  9. #pasek{
  10. background-color: #ababab;
  11. height: 1px;
  12. width: 100%;
  13. margin-bottom: 2px;
  14.  
  15. }
  16.  
  17. #calosc {
  18. margin: 0 auto;
  19. height: 100%; 
  20. width: 60%;
  21. -moz-box-shadow: 5px 5px 15px #000;
  22. -moz-border-radius: 2px;
  23. }
  24. #pasek2{
  25. background-color: white;
  26. height: 50px;
  27. width: 100%;
  28. margin-bottom: 50px;
  29. margin: 0 auto;
  30.  
  31. }
  32. #pasek3{
  33. background-color: red;
  34. height: 20px;
  35. width: 100%;
  36.  
  37.  
  38. }
  39. #baner{
  40.  
  41. height: 100px ;
  42. width: 100%;
  43. }
  44. #logo{
  45.  
  46. background-image: url("grafika/logo2.jpg");
  47. background-position: left;
  48. background-attachment: scroll;
  49. background-repeat: no-repeat;
  50. background-color: white;
  51. border: 1px 196df8;
  52. height: 100px ;
  53. width: 100%;
  54. float:left;
  55. } 
  56. #logox{
  57.  
  58. background-image: url("grafika/logox.jpg");
  59. background-position: right;
  60. background-attachment: scroll;
  61. background-repeat: no-repeat;
  62. background-color: white;
  63. border: 1px 196df8;
  64. height: 100px ;
  65. width: 35%;
  66. float: right;
  67. }
  68.  
  69. #menu{ 
  70.  
  71. outline:none;
  72. position:relative; z-index:6;
  73. left: 10px;	
  74. background: -moz-linear-gradient(6% 75% 90deg,#8F8F8F, #EBF2F2, #C7C7C7 100%);
  75. font-family: verdana;
  76. color: black;
  77. float: left;
  78. -moz-box-shadow: 0 1px 4px #222;
  79. -moz-border-radius: 2px;
  80. text-shadow: 1px 1px 1px #f1f1f1;
  81. clear: none;
  82. width: 16%; 
  83. height: 50px; 
  84. overflow: hidden;
  85. margin-right:1px ;
  86. }
  87.  
  88. #menu:hover { 
  89.  
  90.  
  91.  
  92. text-shadow: 1px 1px 1px #afafaf;
  93. outline:none;
  94. background: url("grafika/kreska.jpg") repeat-x 0px 50px , -moz-linear-gradient(6% 75% 90deg,#1A45AB, #1948E3, #C7C7C7 100%); 
  95. color: white;
  96. width: 18%; 
  97. height: auto; }
  98.  
  99.  
  100. ul { 
  101. margin-top: 2px;
  102. margin: 5px; 
  103. padding: 0px; } 
  104.  
  105. li { 
  106.  
  107. list-style-type: circle; 
  108. width: 100%;} 
  109.  
  110. li a { 
  111. outline:none;
  112. text-decoration: none; 
  113. display: block; 
  114. width: 100%; 
  115. padding: 5px; 
  116. color: white; } 
  117.  
  118. li a:hover { 
  119. outline:none;
  120. text-decoration:none ; 
  121. color: #3B3B3B; 
  122. width: 100%; 
  123. padding: 5px; 
  124. background-color: #BABABA } 
  125.  
  126. p { 
  127. text-align:center ;
  128.  }
  129.  
  130. #tresc{
  131. clear;
  132. background-color: red;
  133. height: 420px ;
  134. width: 100%;
  135.  
  136. }
  137. #stopka{
  138. background: url("grafika/stopka.png")center no-repeat, -moz-linear-gradient(6% 75% 90deg,#8F8F8F, #EBF2F2, #C7C7C7 100%);
  139. -moz-box-shadow: 5px 5px 15px #000;
  140. -moz-border-radius: 2px;
  141. height: 50px;
  142. width: 100%;
  143. clear: both;
  144. margin-top: 5px;
  145. margin-bottom: 20px;
  146. }
  147.  
  148. #panel{
  149.  height: 15px;
  150.  width: 98%;
  151.  display: block;
  152.  -moz-border-radius: 5px;
  153.  -moz-box-shadow: 0 1px 4px #222;
  154.  background: -moz-linear-gradient(6% 75% 90deg,#1A45AB, #1948E3, #C7C7C7 100%);
  155.  margin-top:10px;
  156.  margin-bottom:10px;
  157.  margin-left: 5px;
  158.  }
  159.  #gora{
  160.  
  161. background-color: white;
  162. height: 100%;
  163. width: 100%;
  164.  
  165. }
[HTML] pobierz, plaintext
wszerad
4.03.2011, 16:08:13
Musisz popracować nad pozycjonowaniem, podstawowe pozycjonowanie umieszcza elementy koło siebie tak, że nie mogą na siebie nachodzić. Robisz więc taki trik, że element, który zawiera rozwijane menu u ciebie "<div id="pasek2">" ma posiadać w stylu atrybut "position: relative;" a każdy div, który jest menu("<div id="menu">") ma mieć atrybut: "position: absolute;" I tak na przyszłość atrybut "id" nie może się powtarzać, używaj więc zamiast tego "name" lub "class" i odpowiednio zmień znaczniki w CSS. Bierze się to stąd, że tak zaleca specyfikacja a ewentualny kod JS będzie łapać jedynie jeden element o takim id.
hubson87
4.03.2011, 17:33:34
No juz nie przesuwa. Byl problem z tym ze wszystkie menu pojawialy sie w jednym miejscu ale poprzesuwalem kazdy osobno o szerokosc diva menu.
Tak przy okazji czy jest jakas mozliwosc zeby floatowac te elementy czy trzeba je tak przesuwac 
[HTML] pobierz, plaintext 
  1. <div name="menu2" class="menu" style="position:absolute; left:156px; z-index:40"> <p>Przegląd</p>
  2. <ul>
  3. <li><a href="#">Strona Główna</a></li>
  4. <li><a href="#">Download</a></li>
  5. <li><a href="#">Kontakt</a></li>
  6. <li><a href="#">Forum</a></li>
  7. </ul>
  8. </div>
  9. <div name="menu3" class="menu" style="position:absolute; left:307px; z-index:30"> <p style="position:relative; bottom: 8px";>Dokumenty wewnętrzne</p>
  10. <ul>
  11. <li><a href="#">Strona Główna</a></li>
  12. <li><a href="#">Download</a></li>
  13. <li><a href="#">Kontakt</a></li>
  14. <li><a href="#">Forum</a></li>
  15. </ul>
  16. </div>
[HTML] pobierz, plaintext


W kazdym razie wielkie dzieki za pomoc
wszerad
4.03.2011, 19:02:53
Jasne, że jest ale to się wiąże z wstawianiem dodatkowych divów:D Wsadź każde menu w osobnego diva, o atrybucie "position: relative" i "float: left" z tym, że szerokość każdego musisz ustalić...
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.