Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] div'y się rozjeżdżają
Forum PHP.pl > Forum > Przedszkole
kociupk
28.11.2010, 21:00:56
chce zrobic tabelke na divach i troche mi to nie wychodzi bo sie cala rozjechala i juz mi nic do glowy nie przychodzi jak to naprawic


kod html
[HTML] pobierz, plaintext 
  1. <div id="table_large">
  2. <div id="div_table">
  3. <div class="div_table_title_name"><div class="table_title_text">Nazwa produktu / usługi</div></div>
  4. <div class="div_table_title_center"><div class="table_title_text">Zdjęcie</div></div>
  5. <div class="div_table_title_edit_delete"><div class="table_title_text">Edytuj</div></div>
  6. <div class="div_table_title_edit_delete"><div class="table_title_text">Usuń</div></div>
  7. </div>
  8. <div id="div_table">
  9. <div class="div_table_name"><div class="table_text">sdg</div></div>
  10. <div class="div_table_center"><div class="table_text"><img src="http://m.onet.pl/_m/209b4569f6c0fac1276c9e889812bc8a,2,1.jpg"></div></div>
  11. <div class="div_table_edit_delete"><div class="table_text"><a href=""><img src="/images/icon_edit.png" alt="icon edit" /></a></div></div>
  12. <div class="div_table_edit_delete"><div class="table_text"><a href=""><img src="/images/icon_delete.png" alt="icon delete" /></a></div></div>
  13. </div>
  14. <div id="div_table">
  15. <div class="div_table_name"><div class="table_text">sdg</div></div>
  16. <div class="div_table_center"><div class="table_text">sdag</div></div>
  17. <div class="div_table_edit_delete"><div class="table_text"><a href=""><img src="/images/icon_edit.png" alt="icon edit" /></a></div></div>
  18. <div class="div_table_edit_delete"><div class="table_text"><a href=""><img src="/images/icon_delete.png" alt="icon delete" /></a></div></div>
  19. </div>
  20. </div>
[HTML] pobierz, plaintext


css
[HTML] pobierz, plaintext 
  1. #table_large {
  2. margin: 0 auto; 
  3. margin-top: 10px; 
  4. width: 565px;
  5. }
  6. #div_table {
  7. overflow: hidden;
  8. position: relative;
  9. }
  10. .div_table_title_name {
  11. background: #efefef;
  12. border-top: #ccc 1px solid;
  13. border-left: #ccc 1px solid;
  14. border-right: #ccc 1px solid;
  15. border-bottom: #ccc 1px solid;
  16. width: 250px;
  17. float: left;
  18. }
  19. .div_table_title_center {
  20. background: #efefef;
  21. border-top: #ccc 1px solid;
  22. border-right: #ccc 1px solid;
  23. border-bottom: #ccc 1px solid;
  24. width: 150px;
  25. float: left;
  26. }
  27. .div_table_title_edit_delete {
  28. background: #efefef;
  29. border-top: #ccc 1px solid;
  30. border-right: #ccc 1px solid;
  31. border-bottom: #ccc 1px solid;
  32. width: 80px;
  33. float: left;
  34. }
  35. .div_table_name {
  36. border-left: #ccc 1px solid;
  37. border-right: #ccc 1px solid;
  38. border-bottom: #ccc 1px solid;
  39. width: 250px;
  40. float: left;
  41. }
  42. .div_table_center {
  43. border-right: #ccc 1px solid;
  44. border-bottom: #ccc 1px solid;
  45. width: 150px;
  46. float: left;
  47. }
  48. .div_table_edit_delete {
  49. width: 150px;
  50. border-right: #ccc 1px solid;
  51. border-bottom: #ccc 1px solid;
  52. width: 80px;
  53. float: left;
  54. }
  55. .table_title_text {
  56. text-align: center;
  57. font-size: 12px;
  58. font-weight: bold;
  59. padding: 10px;
  60. }
  61. .table_text {
  62. text-align: center;
  63. font-size: 12px;
  64. padding: 5px;
  65. }
[HTML] pobierz, plaintext
wookieb
28.11.2010, 21:02:32
Tabelki robi się za pomocą "<table>" a nie divów...
kociupk
28.11.2010, 21:19:45
wiem ale chce byc ponad czasowy i zrobic na divach smile.gif
wookieb
28.11.2010, 21:22:27
No to nie będziesz ponadczasowy. Do tego celu służą po prostu tabelki.
kociupk
28.11.2010, 21:31:46
ok dzieki niepotrzebnie zycie sobie komplikuje
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.