Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML]Menu z linkami pod nim, po najechaniu
thomson89
post 19.11.2009, 12:01:52
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


--------------------
Sklep 70%
Go to the top of the page
+Quote Post
Daiquiri
post 19.11.2009, 12:28:46
Post #2





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
Mała podpowiedź, zastanów się może nad usunięciem tabelki. W tabelkach przedstawia się dane tabelaryczne, nie "kroi" strony.

Ten post edytował Daiquiri 19.11.2009, 12:29:06
Go to the top of the page
+Quote Post
thomson89
post 19.11.2009, 18:48:26
Post #3





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


--------------------
Sklep 70%
Go to the top of the page
+Quote Post
Blame
post 19.11.2009, 18:53:46
Post #4





Grupa: Zarejestrowani
Postów: 678
Pomógł: 124
Dołączył: 26.09.2009

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

Nic nie przychodzi mi do głowy ale możesz po prostu pokombinować z marginami.


--------------------
Napisane z palca! <- to tak dla lansu ;)
FancyStudio.pl - Tworzenie Stron WWW w Oparciu o XHTML, CSS, JS, PHP i MySQL.
Mój blog :: Portfolio Fotograficzne Igora Biedrawy
Go to the top of the page
+Quote Post
thomson89
post 19.11.2009, 19:16:34
Post #5





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

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

blinksmiley.gif Ale dla każdego buttona, będzie trzeba inne marginy dać. Co jeżeli zmienię te linki? Dodam jakiś? Znowu marginy?

Dla zobrazowania


--------------------
Sklep 70%
Go to the top of the page
+Quote Post
Daiquiri
post 19.11.2009, 20:15:53
Post #6





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
Przecież po to masz CSS, żeby zmieniać wygląd masowo smile.gif. Daj margin-left: -50%; dla elementu #menudemo08 li dd a. Powinno być OK.

@down Nie rozumiem

Ten post edytował Daiquiri 19.11.2009, 20:29:50
Go to the top of the page
+Quote Post
thomson89
post 19.11.2009, 20:26:23
Post #7





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

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

Nie wiem czemu, ale -100...


--------------------
Sklep 70%
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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