Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][PHP]Coś schrzaniłem w CSS
tomkot1992
post 3.10.2019, 19:45:58
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 30.06.2019

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


Cześć Panowie i Panie,

czy może ktoś mi z was pomóc znaleźć gdzie coś schrzaniłem prawdopodobnie w CSS...
Zabrałem się dzisiaj za zmianę "szaty graficznej" tabeli, no i niestety coś źle zrobiłem, że teraz dłuższy tekst w tabeli nie "łamie się" tylko jest w jednej ciągłej liny...
nie wiem za bardzo gdzie zrobiłem błąd.. testowałem już chyba wszystkie możliwości, może ktoś z większym doświadczeniem się z tym spotkał i wytyknie mi gdzie popełniłem błąd.
Dołączam zdjęcie jak to wygląda, przed modyfikacjami tabela dostosowywała się do szerokości przeglądarki, tekst się automatycznie załamywał tak aby cała tabela się mieściła w oknie.
Kombinuje już od kilku dobrych godzin i nie widzę nigdzie przyczyny...

Link do obrazka:
https://zapodaj.net/3692ea8d67d5b.png.html




Poniżej css i php.

  1. @font-face {
  2. font-family: Poppins-Regular;
  3. src: url("fonts/poppins/Poppins-Regular.ttf");
  4. }
  5.  
  6. @font-face {
  7. font-family: Poppins-Bold;
  8. src: url("fonts/poppins/Poppins-Bold.ttf");
  9. }
  10. body
  11. {
  12. background-image: url("img/background.png");
  13. font-size: 10px;
  14. }
  15.  
  16. #container1
  17. {
  18. background-color: white;
  19. width: auto;
  20. padding: 50px;
  21. margin-left: 5px;
  22. margin-right: 5px;
  23. margin-top: 50px;
  24. -webkit-box-shadow: 5px 5px 20px 5px rgba(173,157,173,1);
  25. -moz-box-shadow: 5px 5px 20px 5px rgba(173,157,173,1);
  26. box-shadow: 5px 5px 20px 5px rgba(173,157,173,1);
  27. }
  28.  
  29. h3
  30. {
  31. width: auto;
  32. background-color: #efefef;
  33. font-family: Poppins-Regular;
  34. color: #808080;
  35. border: 2px solid #ddd;
  36. border-radius: 5px;
  37. font-size: 18px;
  38. padding: 10px;
  39. box-sizing: border-box;
  40. margin-top: 10px;
  41. }
  42.  
  43. textarea
  44. {
  45. width: 600px;
  46. background-color: #efefef;
  47. color: #666;
  48. border: 2px solid #ddd;
  49. border-radius: 5px;
  50. font-size: 20px;
  51. padding: 10px;
  52. box-sizing: border-box;
  53. margin-top: 10px;
  54. }
  55.  
  56.  
  57. td
  58. {
  59. width: 10px;
  60. height: auto;
  61. background-color: white;
  62. border: 1px #ddd;
  63. border-radius: 0px;
  64. font-size: 16px;
  65. padding: 5px;
  66. margin-top: 10px;
  67. font-family: Poppins-Regular;
  68. color: #808080;
  69. line-height: 1.2;
  70. text-transform: uppercase;
  71. font-weight: unset !important;
  72. margin-bottom: 10px;
  73. text-align: center;
  74. text-overflow: scroll;
  75.  
  76. }
  77.  
  78. td:hover
  79. {
  80. background-color: #f5f5f5;
  81. -webkit-transition-duration: 0.9s;
  82. transition-duration: 0.9s;
  83. }
  84.  
  85. table
  86. {
  87.  
  88. width: 100%;
  89. height: 100%;
  90. background-color: white;
  91. color: #666;
  92. border: 5px solid #ddd;
  93. border-radius: 5px;
  94. font-size: 14px;
  95. padding: 10px;
  96. margin-top: 10px;
  97. text-overflow: scroll;
  98.  
  99. }
  100.  
  101. button
  102. {
  103.  
  104. width: 300px;
  105. background-color: #DC143C;
  106. font-size: 20px;
  107. color: white;
  108. padding: 15px 10px;
  109. margin-top: 10px;
  110. border: none;
  111. border-radius: 5px;
  112. cursor: pointer;
  113. letter-spacing: 2px;
  114. margin-top: 30px;
  115. }
  116.  
  117. .topnav {
  118. background-color: #333;
  119. overflow: hidden;
  120. font-family: Poppins-Regular;
  121. }
  122.  
  123. .topnav a {
  124. float: left;
  125. color: #f2f2f2;
  126. text-align: center;
  127. padding: 14px 16px;
  128. text-decoration: none;
  129. font-size: 20px;
  130. -webkit-transition-duration: 0.9s;
  131. transition-duration: 0.5s;
  132. }
  133.  
  134. .topnav a:hover {
  135. background-color: #ddd;
  136. color: black;
  137. }
  138.  
  139. .topnav a.active {
  140. background-color: #6c7ae0;
  141. color: white;
  142. }
  143.  
  144. td.inna_td
  145. {
  146. width: auto;
  147. height: 30px;
  148. background-color: #efefef;
  149. color: #666;
  150. border: 3px solid #b1b1b1;
  151. border-radius: 5px;
  152. font-size: 14px;
  153. padding: 10px;
  154. margin-top: 10px;
  155. text-overflow: scroll;
  156.  
  157. }
  158.  
  159. .przyp-btn-success
  160. {
  161. width: 100px;
  162. background-color: #1E90FF;
  163. font-family: Poppins-Regular;
  164. font-size: 10px;
  165. color: white;
  166. padding: 7px 7px;
  167. margin-top: 0px;
  168. border: none;
  169. border-radius: 3px;
  170. cursor: pointer;
  171. letter-spacing: 2px;
  172. margin-top: auto;
  173. -webkit-transition-duration: 0.9s;
  174. transition-duration: 0.9s;
  175. }
  176.  
  177. .przyp-btn-success:hover
  178. {
  179. background-color: #DC143C;
  180. box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  181. }
  182.  
  183. .edit-btn-success
  184. {
  185. width: 100px;
  186. background-color: #1E90FF;
  187. font-family: Poppins-Regular;
  188. font-size: 10px;
  189. color: white;
  190. padding: 7px 7px;
  191. margin-top: 0px;
  192. border: none;
  193. border-radius: 3px;
  194. cursor: pointer;
  195. letter-spacing: 2px;
  196. margin-top: auto;
  197. -webkit-transition-duration: 0.9s;
  198. transition-duration: 0.9s;
  199. }
  200.  
  201. .edit-btn-success:hover
  202. {
  203. background-color: #DC143C;
  204. box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  205. }
  206.  
  207.  
  208. .status-btn-success
  209. {
  210. width: 100px;
  211. background-color: #1E90FF;
  212. font-family: Poppins-Regular;
  213. font-size: 10px;
  214. color: white;
  215. padding: 7px 7px;
  216. margin-top: 0px;
  217. border: none;
  218. border-radius: 3px;
  219. cursor: pointer;
  220. letter-spacing: 2px;
  221. margin-top: auto;
  222. -webkit-transition-duration: 0.9s;
  223. transition-duration: 0.9s;
  224. }
  225.  
  226. .status-btn-success:hover
  227. {
  228. background-color: #DC143C;
  229. box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  230. }
  231.  
  232. th
  233. {
  234. color: #ffffff;
  235. background: #6c7ae0;
  236. display: table-cell;
  237. font-family: Poppins-Regular;
  238. font-size: 16px;
  239. line-height: 1.2;
  240. font-weight: unset !important;
  241. padding-top: 19px;
  242. padding-bottom: 19px;
  243. border-radius: 5px;
  244. text-overflow: scroll;
  245.  
  246. }
  247.  
  248. th:hover
  249. {
  250. background-color: #4b5499;
  251. -webkit-transition-duration: 0.9s;
  252. transition-duration: 0.9s;
  253. }
  254.  
  255.  
  256. label
  257. {
  258. background: #6c7ae0;
  259. }
  260.  



No i kodzik programu, trochę okrojony ale zachowałem najważniejsze części

  1. <!DOCTYPE HTML>
  2. <html lang="pl">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatibile" content="IE=edge,chrome=1" />
  6. <link rel="stylesheet" href="style.css">
  7. </head>
  8.  
  9. <body>
  10. <div id="container1">
  11. <div class="topnav">
  12. <a class="active" href="hd.php">Otwarte zgłoszenia</a>
  13. <a href="hd_rozwiazane.php">Rozwiązane zgłoszenia</a>
  14. </div>
  15. <table>
  16. <tr>
  17. <th>ID</th>
  18. <th>Imię</th>
  19. <th>Nazwisko</th>
  20. <th>Oddział</th>
  21. <th>Numer wew</th>
  22. <th>Numer pok</th>
  23. <th>Adres e-mail</th>
  24. <th>Treść zgłoszenia</th>
  25. <th>Data zgłoszenia</th>
  26. <th>Przypisana osoba</th>
  27. <th>Opis rozwiązania</th>
  28. <th>Status</th>
  29. <th>Działanie</th>
  30. </tr>
  31.  
  32. ......
  33.  
  34. <tr>
  35.  
  36. <td><?php echo $row['id']; ?></td>
  37. <td><?php echo $row['imie']; ?></td>
  38. <td><?php echo $row['nazwisko']; ?></td>
  39. <td><?php echo $row['wydzial']; ?></td>
  40. <td><?php echo $row['numer_wew']; ?></td>
  41. <td><?php echo $row['numer_pok']; ?></td>
  42. <td><?php echo $row['e_mail']; ?></td>
  43. <td><?php echo $row['opis']; ?></td>
  44. <td><?php echo $row['data_dodania']; ?></td>
  45. <td><?php echo $row['przyp_osoba']; ?>
  46. <form action="edit_person.php" method="post">
  47. <input type="hidden" name="edit_id" value="<?php echo $row['id']; ?>">
  48. <button type="submit" name="przyp_btn" class="przyp-btn-success"> Przypisz</button>
  49. </form>
  50. </td>
  51. <td><?php echo $row['opis_czynnosci']; ?>
  52. <form action="edit.php" method="post">
  53. <input type="hidden" name="edit_id" value="<?php echo $row['id']; ?>">
  54. <button type="submit" name="edit_btn" class="edit-btn-success"> Edytuj</button>
  55. </form>
  56. </td>
  57. <td><?php echo $row['status']; ?></td>
  58. <td>
  59. <form action="edit_status.php" method="post">
  60. <input type="hidden" name="edit_id" value="<?php echo $row['id']; ?>">
  61. <button type="submit" name="status_btn" class="status-btn-success"> Rozwiązane</button>
  62. </form>
  63. </td>
  64. </tr>
  65. </table>
  66.  
  67.  
  68. </div>
  69. </body>
  70. </html>
  71.  


Go to the top of the page
+Quote Post
emillo91
post 6.10.2019, 20:13:06
Post #2





Grupa: Zarejestrowani
Postów: 118
Pomógł: 12
Dołączył: 29.03.2012

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


Co do przełamania tekstu to chyba źle używasz instrukcji text-overflow przez co tekst się nie formatuje:
https://css-tricks.com/almanac/properties/t/text-overflow/

Jeżeli chciałbyś wyświetlić całą zawartość tekstową to możesz też użyć właściwości word-break:
https://www.w3schools.com/cssref/tryit.asp?...css3_word-break
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: 18.10.2019 - 07:51