Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML] Jak zrobić menu w tabelce w Html?
Marco1357
post 6.03.2023, 14:08:56
Post #1





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 17.01.2023

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


Mam tabelkę, gdzie pierwsza komórka zawiera menu "rozwiń". Po najechaniu na menu pokazuje się następne menu ustawione na całą szerokość tabelki i wysokość 200px.
Chciałbym aby poniżej tego rozwiniętego menu pojawił się drugi wiersz tabelki, czyli chciałbym aby zjechał w dół, a nie jak dotychczas pojawia się pod spodem menu.
Załączam kod:
wyszukiwarka.php oraz moj.css

  1.  
  2. <div class="tabelka">
  3.  
  4. <tr>
  5. <th>SZCZEGÓŁY</th>
  6. <th>STACJA/PRZYSTANEK</th>
  7. <th>DATA</th>
  8. <th>ODJ./PRZYJ.</th>
  9. <th>CZAS</th>
  10. <th>PRZESIADKI</th>
  11. <th>ŚRODEK TRANSPORTU</th>
  12. <th></th>
  13. </tr>
  14. <tr>
  15. <td>
  16.  
  17. <ol>
  18. <li><a href="#">rozwiń</a>
  19. <ul>
  20. <li><a href="#">TESTOWANIE menu rozwijalnego </a></li>
  21.  
  22. </ul>
  23. </li>
  24.  
  25.  
  26.  
  27. </ol>
  28.  
  29.  
  30.  
  31. </td>
  32. <td>Maria Anders</td>
  33. <td>Germany</td>
  34. <td>Alfreds Futterkiste</td>
  35. <td>Maria Anders</td>
  36. <td>Germany</td>
  37. <td>Maria Anders</td>
  38. <td class="kup_bilet">
  39.  
  40. <div class="bilet">
  41. <a href="#"><b>KUP BILET</b></a>
  42. </div>
  43.  
  44. </td>
  45. </tr>
  46. <tr>
  47. <td>
  48.  
  49. <ol>
  50. <li><a href="#">rozwiń</a>
  51. <ul>
  52. <li><a href="#">TESTOWANIE menu rozwijalnego </a></li>
  53.  
  54. </ul>
  55. </li>
  56.  
  57.  
  58.  
  59. </ol>
  60.  
  61.  
  62.  
  63.  
  64. </td>
  65. <td>Francisco Chang</td>
  66. <td>Mexico</td>
  67. <td>Alfreds Futterkiste</td>
  68. <td>Maria Anders</td>
  69. <td>Germany</td>
  70. <td>Maria Anders</td>
  71. <td class="kup_bilet">
  72.  
  73. <div class="bilet">
  74. <a href="#"><b>KUP BILET</b></a>
  75. </div>
  76.  
  77. </td>
  78. </tr>
  79.  
  80.  




  1.  
  2. td > ol {
  3.  
  4. list-style-type: none;
  5. padding:0;
  6. margin:0;
  7. font-size:14px;
  8.  
  9. text-align:center;
  10. /* margin-left: 150px; */
  11.  
  12.  
  13.  
  14.  
  15. }
  16.  
  17.  
  18. td > ol > li {
  19.  
  20.  
  21. width:80px;
  22. height:30px;
  23. text-align: center;
  24. margin:0px;
  25. padding-top: 10px;
  26.  
  27.  
  28.  
  29. /* height:2em; -----rozciaganie menu w dol */
  30.  
  31.  
  32.  
  33. }
  34.  
  35.  
  36. td > ol > li:first-child {
  37. margin-left:18px;
  38.  
  39.  
  40. }
  41.  
  42.  
  43. td > ol a {
  44. display:block;
  45. color:black;
  46. text-decoration:none;
  47.  
  48.  
  49. }
  50.  
  51. td > ol > li > a:hover {
  52. color:white;
  53.  
  54.  
  55. }
  56.  
  57. td > ol > li:hover {
  58. background-color:rgb(48, 110, 126);
  59.  
  60.  
  61.  
  62. }
  63.  
  64. td > ol > li > ul{
  65.  
  66. list-style-type: none;
  67. text-align: left;
  68. padding: 0;
  69. display:none;
  70.  
  71.  
  72.  
  73. }
  74.  
  75. td > ol > li > ul > li{
  76. margin-left: -19px;
  77. margin-top: 17px;
  78. padding:2px ;
  79. border-left: 1px solid white;
  80. border-top: 1px solid white;
  81. background-color:darkcyan;
  82. width:992px;
  83. height:200px;
  84.  
  85.  
  86.  
  87.  
  88.  
  89. }
  90.  
  91. td > ol > li > ul > li:hover{
  92.  
  93. background-color:#DDD;
  94. cursor:auto;
  95.  
  96.  
  97.  
  98. }
  99.  
  100.  
  101.  
  102. td > ol > li > ul > li:hover a{
  103.  
  104. color:darkcyan;
  105. cursor: auto;
  106.  
  107.  
  108. }
  109.  
  110. td > ol > li:hover > ul {
  111. display:block;
  112.  
  113.  
  114.  
  115. }
  116.  
  117.  
  118.  




Co napisałem nie tak, że nikt nie chce mi pomóc? Nawet odpowiedź na powyższe pytanie, będzie lepsza niż żadna. Z góry dziękuję za odpowiedź Marco1357.


Co napisałem nie tak, że nikt nie chce mi pomóc? Nawet odpowiedź na powyższe pytanie, będzie lepsza niż żadna. Z góry dziękuję za odpowiedź Marco1357.
Go to the top of the page
+Quote Post
trueblue
post 7.03.2023, 07:48:45
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


Problemem jest:
Kod
td > ol > li{
height: 30px;
}

Ogólnie mógłbyś to zrobić nie korzystając z tabel (tabelą może być lista w liście) i z mniejszą ilością znaczników, np. tu:
  1. <ol>
  2. <li><a href="#">rozwiń</a>
  3. <ul>
  4. <li><a href="#">TESTOWANIE menu rozwijalnego </a></li>
  5. </ul>
  6. </li>
  7. </ol>
można pozbyć się początkowego <ol> <li>.

P.S. Nie każdy ma czas i chęci poświęcać swój czas, tym bardziej, że do prezentacji problematycznego kodu lepiej użyć: https://jsfiddle.net/


--------------------
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 27.04.2024 - 16:50