Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML]Menu z linkami pod nim, po najechaniu
thomson89
post
Post #1





Grupa: Zarejestrowani
Postów: 1 178
Pomógł: 51
Dołączył: 7.01.2009
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----

Witam!

Chciałbym zrobić takie menu, aby po najechaniu na któryś przycisk pod nim, pokazałyby się dwa, trzy link (ale same linki). Zrobiełm menu, ale kompletnie nie wiem jak zrobić aby pod przyciskiem pojawiały się te linki.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<style type="text/css">
  4. 	#menu_podstrona ul, ul li {
  5. 		display: block;
  6. 		list-style: none;
  7. 		margin: 0;
  8. 		padding: 0;
  9. 	}
  10.  
  11. 	#menu_podstrona ul li {
  12. 		float: left;
  13. 	}
  14.  
  15. 	#menu_podstrona ul a:link, ul a:visited {
  16. 		text-decoration: none;
  17. 		display: block;
  18. 		width: 90px;
  19. 		text-align: center;
  20. 		background-color: #ccc;
  21. 		color: #000;
  22. 		border: 2px outset #ccc;
  23. 		padding: 5px;
  24. 	}
  25.  
  26. 	#menu_podstrona ul a:hover {
  27. 		border-style: inset;
  28. 		padding: 7px 3px 3px 7px;
  29. 	}		
  30. 	</style>
  31. </head>
  32. <body>
  33. <div id="menu_podstrona">
  34. <table>
  35. <tr>
  36. 	<td>		
  37. 		<ul>
  38. 		<li><a href="">Pokaż grupy</a><br></li>
  39. 		<li><a href="">Pokaż strefy</a></li>
  40. 		<li><a href="">Pokaż obszary</a></li>
  41. 		<li><a href="">Dodaj</a></li>
  42. 		<li><a href="">Edytuj</a></li>
  43. 		<li><a href="">Usuń</a></li>
  44. 		</ul>
  45. 		</div>
  46. 	</td>
  47. </tr>
  48. </table>
  49. </body>
  50. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
thomson89
post
Post #2





Grupa: Zarejestrowani
Postów: 1 178
Pomógł: 51
Dołączył: 7.01.2009
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----

No, dobrze. Dzięki.

Ale teraz, chciałbym, aby te linki wyświetlały się po środku obszaru pod przyciskiem. W tej chwili, linki zaczynają się wyświetlać od przycisku na który najechałem, do końca. A chcę, żeby środek wszystkich linków był pod danym przyciskiem.

Mój kod:
[HTML] pobierz, plaintext 
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
  3. <style type="text/css">
  4.  
  5. #menudemo08 a {float: left;}
  6.  
  7. #menudemo08 dl {width: 700px;}
  8.  
  9. * {
  10.  
  11. margin: 0;
  12.  
  13. padding: 0;
  14.  
  15. }
  16.  
  17. #menudemo08 {
  18.  
  19. position: relative;
  20. list-style: none;
  21. border: solid #fff;
  22. border-top-width:0;
  23. border-bottom-width:20px;
  24. border-left-width:0;
  25. height: 37px;
  26. background: #fff;
  27.  
  28. }
  29.  
  30. #menudemo08 li,
  31.  
  32. #menudemo08 dd {
  33.  
  34. float: left;
  35.  
  36. }
  37. /* wyglad ogolny */
  38. #menudemo08 li {
  39.  
  40. border: solid #fff;
  41.  
  42. border-width: 1px 0;
  43.  
  44. }
  45. /* wyglad ogolny ul */
  46. #menudemo08 ul {
  47.  
  48. list-style: none;
  49.  
  50. border: 1px solid #fff;
  51.  
  52. }
  53. /* wyglad linkow (ogolny) */
  54. #menudemo08 a {
  55.  
  56. color: #000;
  57. font-size: 16px;
  58. text-decoration: none;
  59. display: block;
  60. border: 2px outset #ccc;
  61. line-height: 22px;
  62. width: 90px;
  63. padding: 5px;
  64. text-align: center;
  65.  
  66. }
  67. /* dl wyswietlanie */
  68. #menudemo08 li dl {
  69.  
  70. display: none;
  71.  
  72. }
  73. /* wyglad obszaru z linkami */
  74. #menudemo08 li:hover dl {
  75.  
  76. display: block;
  77. position: absolute;
  78. top: 38px;
  79. background: #fff;
  80. border: 1px solid #fff;
  81.  
  82. }
  83. /* wyglad linku */
  84. #menudemo08 li dd a {
  85.  
  86. font-size: 14px;
  87. font-weight: normal;
  88. padding: 0 6px;
  89. border: 1px solid #fff;
  90. line-height: 22px;
  91. height: 22px;
  92. background: #fff;
  93. width: auto;
  94.  
  95. }
  96.  
  97. /* kolor przycisku */
  98. #item a {
  99.  
  100. background-color: #ccc;
  101.  
  102. }
  103. /* kolor po najechaniu */
  104. #menudemo08 a:hover {
  105.  
  106. border-style: inset;
  107.  
  108. }
  109. /* kolor linku */
  110. #menudemo08 li dd a:hover {
  111.  
  112. text-decoration: underline;
  113. border: 1px solid #fff;
  114.  
  115. }
  116.  
  117. </style>
  118. </head>
  119.  
  120. <body>
  121.  
  122. <ul id="menudemo08">
  123.  
  124. <li id="item"><a href="">Pokaż grupy</a><br></li>
  125. <li id="item"><a href="">Pokaż strefy</a></li>
  126. <li id="item"><a href="">Pokaż obszary</a></li>
  127.  
  128. <li id="item"><a href="">Dodaj</a>
  129.  
  130. <dl>
  131.  
  132. <dd><a href="maxi05.php">Przypis</a></dd>
  133. <dd><a href="maxi05.php">Grupę</a></dd>
  134. <dd><a href="maxi04.php">Strefę</a></dd>
  135. <dd><a href="maxi03.php">Obszar</a></dd>
  136.  
  137. </dl>
  138.  
  139. </li>
  140.  
  141. <li id="item"><a href="mini.php">Edytuj</a>
  142.  
  143. <dl>
  144.  
  145. <dd><a href="maxi05.php">Przypisy</a></dd>
  146. <dd><a href="maxi05.php">Grupy</a></dd>
  147. <dd><a href="maxi04.php">Strefy</a></dd>
  148. <dd><a href="maxi03.php">Obszary</a></dd>
  149.  
  150. </dl>
  151.  
  152. </li>
  153.  
  154. <li id="item"><a href="micro.php">Usuń</a>
  155.  
  156. <dl>
  157.  
  158. <dd><a href="maxi05.php">Przypis</a></dd>
  159. <dd><a href="maxi05.php">Grupę</a></dd>
  160. <dd><a href="maxi04.php">Strefę</a></dd>
  161. <dd><a href="maxi03.php">Obszar</a></dd>
  162.  
  163. </dl>
  164.  
  165. </li>
  166.  
  167. </ul>
  168.  
  169. </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- thomson89   [CSS][HTML]Menu z linkami pod nim, po najechaniu   19.11.2009, 12:01:52
- - Daiquiri   Mała podpowiedź, zastanów się może nad usunięciem ...   19.11.2009, 12:28:46
- - thomson89   No, dobrze. Dzięki. Ale teraz, chciałbym, aby te ...   19.11.2009, 18:48:26
- - Blame   Nic nie przychodzi mi do głowy ale możesz po prost...   19.11.2009, 18:53:46
- - thomson89   Ale dla każdego buttona, będzie trzeba inne margin...   19.11.2009, 19:16:34
- - Daiquiri   Przecież po to masz CSS, żeby zmieniać wygląd maso...   19.11.2009, 20:15:53
- - thomson89   Nie wiem czemu, ale -100...   19.11.2009, 20:26:23

« Następny starszy · Przedszkole · 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: 4.10.2025 - 07:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn