Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Dziwnie mi się lista układa
Forum PHP.pl > Forum > Przedszkole
AboutMe
Siemandero,

Weźcie odpalcie w swojej przeglądarce ten kod i powiedzcie czemu ta lista tak dziwnie się układa

  1. <style type="text/css">
  2. #subcategories {width:590px;}
  3. br.clear {clear: both;line-height: 0;font-size: 0;height: 0}
  4. ul.inline_list { list-style-type: none; margin-top: 10px; }
  5. ul.inline_list li { float: left; text-align: center; margin-bottom: 40px; margin-left: 20px; width:87px; border:1px solid #000000; }
  6. ul.inline_list li img { display: block; padding:2px; border:1px solid #b3b3b3; }
  7.  
  8.  
  9. <div id="subcategories">
  10. <ul class="inline_list">
  11. <li>
  12. <a href="66-bat-house" title="Bat House">
  13. <img height="80px" width="80px" src="bat-house.jpg" alt="" />
  14.  
  15. </a>
  16. <br />
  17. <a href="66-bat-house">Bat House</a>
  18. </li>
  19. <li>
  20. <a href="56-canopies" title="Canopies">
  21. <img height="80px" width="80px" src="canopies.jpg" alt="" />
  22. </a>
  23.  
  24. <br />
  25. <a href="56-canopies">Canopies</a>
  26. </li>
  27. <li>
  28. <a href="68-electric-snow-thrower" title="Electric Snow Thrower">
  29. <img height="80px" width="80px" src="electric-snow-thrower.jpg" alt="" />
  30. </a>
  31. <br />
  32.  
  33. <a href="68-electric-snow-thrower">Electric Snow Thrower</a>
  34. </li>
  35. <li>
  36. <a href="59-mailboxes" title="Mailboxes">
  37. <img height="80px" width="80px" src="mailboxes.jpg" alt="" />
  38. </a>
  39. <br />
  40. <a href="59-mailboxes">Mailboxes</a>
  41.  
  42. </li>
  43. <li>
  44. <a href="65-mosquito-control" title="Mosquito Control">
  45. <img height="80px" width="80px" src="mosquito-control.jpg" alt="" />
  46. </a>
  47. <br />
  48. <a href="65-mosquito-control">Mosquito Control</a>
  49. </li>
  50.  
  51. <li>
  52. <a href="57-samplex-fireplaces" title="samplex Fireplaces">
  53. <img height="80px" width="80px" src="samplex-fireplaces.jpg" alt="" />
  54. </a>
  55. <br />
  56. <a href="57-samplex-fireplaces">samplex Fireplaces</a>
  57. </li>
  58. <li>
  59.  
  60. <a href="54-samplex-furniture" title="samplex Furniture">
  61. <img height="80px" width="80px" src="samplex-furniture.jpg" alt="" />
  62. </a>
  63. <br />
  64. <a href="54-samplex-furniture">samplex Furniture</a>
  65. </li>
  66. <li>
  67. <a href="60-samplex-kitchen-grills-barbecues" title="samplex Kitchen, Grills Barbecues">
  68.  
  69. <img height="80px" width="80px" src="samplex-kitchen-grills-barbecues.jpg" alt="" />
  70. </a>
  71. <br />
  72. <a href="60-samplex-kitchen-grills-barbecues">samplex Kitchen, Grills Barbecues</a>
  73. </li>
  74. <li>
  75. <a href="58-samplex-pest-control" title="samplex Pest Control">
  76.  
  77. <img height="80px" width="80px" src="samplex-pest-control.jpg" alt="" />
  78. </a>
  79. <br />
  80. <a href="58-samplex-pest-control">samplex Pest Control</a>
  81. </li>
  82. <li>
  83. <a href="69-samplex-shower" title="samplex Shower">
  84. <img height="80px" width="80px" src="samplex-shower.jpg" alt="" />
  85.  
  86. </a>
  87. <br />
  88. <a href="69-samplex-shower">samplex Shower</a>
  89. </li>
  90. <li>
  91. <a href="67-samplex-sports" title="samplex Sports">
  92. <img height="80px" width="80px" src="samplex-sports.jpg" alt="" />
  93. </a>
  94.  
  95. <br />
  96. <a href="67-samplex-sports">samplex Sports</a>
  97. </li>
  98. <li>
  99. <a href="63-picnic" title="Picnic">
  100. <img height="80px" width="80px" src="picnic.jpg" alt="" />
  101. </a>
  102. <br />
  103.  
  104. <a href="63-picnic">Picnic</a>
  105. </li>
  106. <li>
  107. <a href="55-screenhouses" title="Screenhouses">
  108. <img height="80px" width="80px" src="screenhouses.jpg" alt="" />
  109. </a>
  110. <br />
  111. <a href="55-screenhouses">Screenhouses</a>
  112.  
  113. </li>
  114. <li>
  115. <a href="61-swimming-pool" title="Swimming Pool">
  116. <img height="80px" width="80px" src="swimming-pool.jpg" alt="" />
  117. </a>
  118. <br />
  119. <a href="61-swimming-pool">Swimming Pool</a>
  120. </li>
  121.  
  122. <li>
  123. <a href="64-water-guard-doormat" title="Water Guard Doormat">
  124. <img height="80px" width="80px" src="water-guard-doormat.jpg" alt="" />
  125. </a>
  126. <br />
  127. <a href="64-water-guard-doormat">Water Guard Doormat</a>
  128. </li>
  129. <li>
  130.  
  131. <a href="62-wind-spinners" title="Wind Spinners">
  132. <img height="80px" width="80px" src="wind-spinners.jpg" alt="" />
  133. </a>
  134. <br />
  135. <a href="62-wind-spinners">Wind Spinners</a>
  136. </li>
  137. </ul>
  138. <br class="clear"/>
  139.  
  140. </div>
krispak
Cytat
Weźcie odpalcie w swojej przeglądarce ten kod i powiedzcie czemu ta lista tak dziwnie się układa

Nic nie musimy odpalac ani mowic bo takie rzeczy to tylko w ... Co to znaczy dla Ciebie dziwnie uklada? Napisz co chcesz osiagnac bo dla nas moze byc to np dobrze..
tehaha
pokaż online, a nie "weźcie odpalcie sobie"....poza tym już chyba po samym kolorowaniu składni w wklejonym kodzie widzisz, że znak & stanowi problem, zamień go na encje
Damonsson
  1. <li>
  2. <a href="60-samplex-kitchen-grills-barbecues" title="samplex Kitchen, Grills Barbecues">
  3.  
  4. <img height="80px" width="80px" src="samplex-kitchen-grills-barbecues.jpg" alt="" />
  5. </a>
  6. <br />
  7. <a href="60-samplex-kitchen-grills-barbecues">samplex Kitchen, Grills Barbecues</a>
  8. </li>


Jak skrócisz tę nazwę z: "samplex Kitchen, Grills Barbecues" do przykładowo: "samplex Kitchen" to wszystko jest ok. Po prostu tekst wystaję i elementy kolejne układają się za tym tekstem.

Jak rozwiązać Ci nie powiem, bo o to nie pytałeś winksmiley.jpg
AboutMe
O czcigodny Panie wyjaw mi rozwiązanie tejże zagadki a obsypię Cię klejnotami hairysmiley.png
Damonsson
Zrobisz mi herbatkę i będziemy kwita winksmiley.jpg

Rozwiązanie numer 1: Skróć nazwy

Rozwiązanie numer 2: Dodawaj do każdego co szóstego <li> "clear: both". By nie robić tego manualnie z pomocą przyjdzie pewnie JS.

Rozwiązanie numer 3: Zmień wysokość każdego <li> na stałą, zaiste ładniej będą wyglądać wszystkie o tej samej wysokości, niż o różnych jak będziesz miał opis 100 znakowy.
AboutMe
O 100-krotne dzięki!

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.