Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Jak zrobić menu w tabelce w Html?
Forum PHP.pl > Forum > Przedszkole
Marco1357
6.03.2023, 14:08:56
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

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




[HTML] pobierz, plaintext 
  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.  
[HTML] pobierz, plaintext




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.
trueblue
7.03.2023, 07:48:45
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:
[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext
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/
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.