Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Dynamiczne treści wystają poza DIV.
Forum PHP.pl > Forum > Przedszkole
Robert3d
Witam
Mam taki zakręcony problem który sam mnie zdziwił więc wydzieliłem sobie kod i zacząłem pisać go w oddzielnym pliku by mieć pewność że nic odgórnie nie psuje mi zabawy.

Problem polega na tym żę treści wychodzą poza DIV a jak powielę treści x2 to nie mogę za chiny ich paddingiem od siebie odessać.

  1.  
  2. <style>
  3. #kontener{
  4. border: 1px red solid;
  5. width: 190px;
  6. }
  7. h1{
  8. font-family: Arial;
  9. font-weight: bold;
  10. margin: 0;
  11. font-size: 0.75em;
  12. padding: 8px 5px;
  13. }
  14. li{
  15. margin: 0;
  16. font-family: arial;
  17. font-size: 0.8em;
  18. padding:0;
  19. width: 180px;
  20. list-style: none;
  21.  
  22. }
  23. ul{
  24. margin: 0;
  25. padding:5px;
  26. width: 190px;
  27. list-style: none;
  28. }
  29. </style>
  30. <div id="kontener">
  31. <div id="menu"><h1>Nazwa Menu</h1>
  32. <form>
  33.  
  34. <ul>
  35. <?php
  36. while($row = mysqli_fetch_assoc($dane)){
  37. ?>
  38. <li>
  39. <div style="float: left;height: 23px; width: 20px;"><input type="checkbox" name="###" /></div>
  40. <div style="float: right; height: 23px; width: 150px; background: url(image/szarakropka.png) repeat-x; background-position: bottom; "><?php echo $row['rodzaj']; ?><img src="<?php echo $row['obrazek']; ?>" width="19" height="15" alt="1"/>
  41. </div>
  42. </li>
  43. <?php } ?>
  44. </ul>
  45. </form>
  46. </div>
  47.  
  48. <div id="menu"><h1>Nazwa Menu</h1>
  49. <form>
  50.  
  51. <ul>
  52. <?php
  53. while($row = mysqli_fetch_assoc($dane)){
  54. ?>
  55. <li>
  56. <div style="float: left;height: 23px; width: 20px;"><input type="checkbox" name="###" /></div>
  57. <div style="float: right; height: 23px; width: 150px; background: url(image/szarakropka.png) repeat-x; background-position: bottom; "><?php echo $row['rodzaj']; ?><img src="<?php echo $row['obrazek']; ?>" width="19" height="15" alt="1"/>
  58. </div>
  59. </li>
  60. <?php } ?>
  61. </ul>
  62. </form>
  63. </div>
  64. </div>
  65.  
mortus
W linii 42 i 59 przed </li> wstaw:
  1. <div class="clear"></div>

a klasie clear nadaj styl:
  1. .clear{
  2. clear: both;
  3. }

Taki dodatkowy <div> służy do usunięcia opływania (float).

Powinno pomóc.
ShadowD
Zamiennie można użyć overfloaw:auto na element obejmujący całość.
Robert3d
dziękuję biggrin.gif od tego gapienia się całymi dniami w literki przeoczyłem... Często mi się to zdarza hmm wstydnis.gif
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.