Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu - problem
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Eldiane
27.03.2011, 11:46:32
Witam, od razu przejdę do sprawy i pokarze swój kod

Tabela.html:
[HTML] pobierz, plaintext 
  1. 		<table border=0 width=100% height=40% bgcolor="#ff5113">
  2. 			<tr>
  3. 				<td>
  4. 					<center><font size="3"><a href="profil.php">Profil</a></font></center>
  5. 				</td>
  6. 			</tr>
  7. 			<tr>
  8. 				<td>
  9. 					<center><font size="3"><a href="profil.php">Produkty</a></font></center>
  10. 				</td>
  11. 			</tr>
  12. 			<tr>
  13. 				<td>
  14. 					<center><font size="3"><a href="profil.php">szukaj</a></font></center>
  15. 				</td>
  16. 			</tr>
  17. 			<tr>
  18. 				<td>
  19. 					<center><font size="3"><a href="profil.php">informacje</a></font></center>
  20. 				</td>
  21. 			</tr>
  22. 			<tr>
  23. 				<td>
  24. 					<center><font size="3"><a href="profil.php">kontakt</a></font></center>
  25. 				</td>
  26. 			</tr>
  27. 			<tr>
  28. 				<td>
  29. 					<center><font size="3"><a href="profil.php">wyloguj</a></font></center>
  30. 				</td>
  31. 			</tr>
  32. 		</table>
[HTML] pobierz, plaintext


Dla przejrzystości wstawię zdjęcie wyglądu tabelki:


Problem jest tego typu że chciałbym żeby stało się to moim menu, czyli jak najadę kursorem na pierwszą pozycje to cała tabela idzie w dół i pojawia się podmenu, myślę że wiadomo o co chodzi smile.gif

Czy da się zrobić takie menu w oparciu o tabele czy trzeba zmienić wszystko na <ul><li> itp?
Jak się za to zabrać od strony CSS'a? podpatrzyłem na stronach z kursami ze są wstawki z js i nie wiem jak się za to zabrać, fajnie by było jakbym mógł liczyć na jakąś poradę smile.gif
krzywy36
28.03.2011, 09:08:00 
[HTML] pobierz, plaintext 
  1.  
  2. <html>
  3. <head>
  4. <title>xyz</title>
  5. <style>
  6. ul
  7. {
  8.     list-style: none;
  9.     margin: 0;
  10.     padding: 0;
  11. }
  12. li
  13. {
  14.     background-color: #ccc;
  15.     width: 200px;
  16.     display: block;
  17.     height: 20px;
  18.     overflow: hidden;
  19. }
  20. li:hover
  21. {
  22.     height: auto;
  23. }
  24. .podmenu li:hover
  25. {
  26.     background-color: red;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <ul>
  32.     <li>1
  33. 	<ul class="podmenu">
  34. 	    <li>1.1</li>
  35. 	    <li>1.2</li>
  36. 	    <li>1.3</li>
  37. 	    <li>1.4</li>
  38. 	</ul>
  39.  
  40.     </li>
  41.     <li>1	<ul class="podmenu">
  42. 	    <li>2.1</li>
  43. 	    <li>2.2</li>
  44. 	    <li>2.3</li>
  45. 	    <li>2.4</li>
  46. 	</ul></li>
  47.     <li>1	<ul class="podmenu">
  48. 	    <li>3.1</li>
  49. 	    <li>3.2</li>
  50. 	    <li>3.3</li>
  51. 	    <li>3.4</li>
  52. 	</ul></li>
  53.     <li>1	<ul class="podmenu">
  54. 	    <li>4.1</li>
  55. 	    <li>4.2</li>
  56. 	    <li>4.3</li>
  57. 	    <li>4.4</li>
  58. 	</ul></li>
  59. </ul>
  60. </body>
  61. </html>
[HTML] pobierz, plaintext

tak na szybko. nie mam pojęcia czy da się to zrobić na tabelkach ale nie to jest ich przeznaczeniem.

Edit: @down: nudy w szkole ^^
Eldiane
28.03.2011, 18:00:22
O dziękuje, nie spodziewałem się że ktoś to zrobi za mnie smile.gif kod prosty do ogarnięcia, myślę że sobie poradzę tongue.gif
Z góry dzięki za radę z tabelkami tak samo smile.gif

Pozdrawiam Eldiane smile.gif
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.