Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][HTML] Źle wyświetlające się komórki z danymi
Forum PHP.pl > Forum > Przedszkole
Lethys
Witam,

Tworzę panel administracyjny, w którym będzie można akceptować bądź usuwać przesłane przez użytkowników poradniki do bazy danych.

Wszystko działa ok opórcz wyświetlania zgłoszonych poradników.


Komórka przedstawiająca dany poradnik wygląda tak:

  1. echo ("<a class=\"mws-poradniki2\" href=\"#\">
  2. <span class=\"mws-poradniki2-icon mws-ic ic-book\"></span>
  3. <span class=\"mws-poradniki2-content\">
  4. <span class=\"mws-poradniki2-title\">$record[nazwa]</span>
  5. <p><span class=\"mws-poradniki2-value\">$record[opis]</span></p>
  6. <p><span class=\"mws-poradniki2-value2\">Dodano: $record[data_dodania]</span></p>
  7. </span>
  8. </a>");
  9.  


W ten sposób wyświetlanie działa bez błędnie, kiedy natomiast dodam do komórki link z akceptacją bądź odrzucoeniem komórki czyli:

  1. echo ("<a class=\"mws-poradniki2\" href=\"#\">
  2. <span class=\"mws-poradniki2-icon mws-ic ic-book\"></span>
  3. <span class=\"mws-poradniki2-content\">
  4. <span class=\"mws-poradniki2-title\">$record[nazwa]</span>
  5. <p><span class=\"mws-poradniki2-value\">$record[opis]</span></p>
  6. <p><span class=\"mws-poradniki2-value2\">Dodano: $record[data_dodania], <a href='admin_poradniki.php?akceptuj=$record[id]'><b>Akceptuj</b></a> bądź <A href=admin_poradniki.php?usun=$record[id]>Usuń</a></span></p>
  7. </span>
  8. </a>");
  9.  


Pojawia się problem, bo ostatni span, czyli data dodania + link do akceptacji, odrzucenia pojawiają się w innych komórkach tak jakgdyby to był już kolejny poradnik.


Tak wygląda css.

  1. /* Report Buttons */
  2.  
  3. .mws-poradniki2-container
  4. {
  5. width:100%;
  6. margin-bottom:24px;
  7. }
  8.  
  9. .mws-poradniki2
  10. {
  11. width:100% !important;
  12. min-width:170px;
  13. margin:8px 1%;
  14. height:150px;
  15. float:left;
  16. cursor:pointer;
  17. display:block;
  18. text-decoration:none;
  19. color:#323232;
  20.  
  21. -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  22. -moz-box-sizing: border-box; /* Firefox, other Gecko */
  23. box-sizing: border-box; /* Opera/IE 8+ */
  24.  
  25. background:#ffffff url(../../images/core/mws-report-bg.png) repeat-x;
  26. border:1px solid #cccccc;
  27.  
  28. /* CSS 3 */
  29.  
  30. -webkit-border-radius:6px;
  31. -o-border-radius:6px;
  32. -moz-border-radius:6px;
  33. -khtml-border-radius:6px;
  34. border-radius:6px;
  35. }
  36.  
  37. .mws-poradniki2:hover
  38. {
  39. background-color:#fafafa;
  40. }
  41.  
  42. .mws-poradniki2:active
  43. {
  44. background-image:none;
  45.  
  46.  
  47. /* CSS 3 */
  48.  
  49. -webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
  50. -o-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
  51. -moz-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
  52. -khtml-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
  53. box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
  54. }
  55.  
  56. .mws-poradniki2 .mws-poradniki2-icon
  57. {
  58. width:48px;
  59. height:100%;
  60. float:left;
  61. display:block;
  62. border-right:1px solid #cccccc;
  63.  
  64. background-position:center center;
  65. }
  66.  
  67. .mws-poradniki2 .mws-poradniki2-content
  68. {
  69. margin-left:49px;
  70. display:block;
  71. padding:8px 10px;
  72. }
  73.  
  74. .mws-poradniki2 .mws-poradniki2-content .mws-poradniki2-title
  75. {
  76. white-space:nowrap;
  77. font-size:32px;
  78. display:inline-block;
  79.  
  80.  
  81.  
  82. }
  83.  
  84. .mws-poradniki2 .mws-poradniki2-content .mws-poradniki2-poradnik
  85. {
  86. font-size:16px;
  87. display:inline-block;
  88. }
  89.  
  90.  
  91. .mws-poradniki2 .mws-poradniki2-content .mws-poradniki2-value
  92. {
  93. font-size:19px;
  94. display:inline-block;
  95.  
  96. }
  97.  
  98. .mws-poradniki2 .mws-poradniki2-content .mws-poradniki2-value2
  99. {
  100. font-size:12px;
  101. display:inline-block;
  102.  
  103. }
  104.  
  105. .mws-poradniki2 .mws-poradniki2-content .mws-poradniki2-value.up
  106. {
  107. background:url(../../images/core/report-up.png) no-repeat right center;
  108. padding-right:24px;
  109. }
  110.  
  111. .mws-poradniki2 .mws-poradniki2-content .mws-poradniki2-value.down
  112. {
  113. background:url(../../images/core/report-down.png) no-repeat right center;
  114. padding-right:24px;
  115. }
mortus
Nie wolno zamieszczać elementów blokowych wewnątrz elementów liniowych, a Ty masz <p> wewnątrz <a>. To najprawdopodobniej jest przyczyną problemu. Rozumiem, że chcesz uczynić pewien spory obszar "klilkalnym", ale tutaj powinieneś się posłużyć JavaScriptem. Zamień zewnętrzne znaczniki <a> na np. <div> i zobacz, czy przyniesie to oczekiwany rezultat.

EDIT:
Z <div>-ami działa, jak trzeba.
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.