Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Tabele Divy Wyśrodkowanie
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
dawid112233
23.09.2010, 17:53:42
Mam problem mam 4 tabele i włożyłem je w divy no na razie jest spox bo 4 tabele są w jednej linii a były jedna po drugiej no ale chce je wyśrodkować aby te 4 tabele były wyśrodkowane a no i jeszcze jeden problem: Jeśli pisze tekst na koniec linii taki: Polityka Prywatności | Kontakt | Dotacje itd. to zaczyna się na końcu linii w linii gdzie są umieszczone tabelę a jak wezmę wstawię je w (br) to się przesuwają i jak wezmę parę razy wpisze br to się przesuną na te samo miejsce ale pod tabelami pod końcem tabeli a jak wklepie tekst w center to się nic nie dzieje.

Podsumujmy w tagach xP: Tabele divy wyśrodkowanie tekst osobna-linia wyśrodkowanie

O to kod html do tabel (nie wściekajcie się na mnie nie umiem wstawić w cytat lub coś takiego):


[HTML] pobierz, plaintext 
  1. <div style="float:left"><table border="0" align="center">
  2. <tr>
  3. <td height="100%" valign="top" bgcolor="#6699cc"><b><table border="1" cellpadding="0" rules="groups">
  4. <colgroup span="1"></colgroup>
  5. <colgroup span="3"></colgroup>
  6. <tbody>
  7. <tr>
  8.  
  9. <td bgcolor="white"><img src="http://img217.imageshack.us/img217/9226/gryakcji.png" alt="" /></td>
  10. </tr>
  11. </tbody>
  12. <tbody>
  13. <tr>
  14.  
  15. <td bgcolor="#6699cc">Gra1
  16.             <br>Gra2</br>
  17.             Gra3
  18.             <br>Gra4</br></td>
  19.  
  20. </tr>
  21.  
  22. </tbody>
  23. </table></b><br /><br /></td>
  24. 		</tr>
  25. 		</table>
  26. 	</td>
  27.  
  28. </tr></div>
  29.  
  30.  
  31. <div style="float:left"><table border="0" align="center">
  32. <tr>
  33. <td height="100%" valign="top" bgcolor="#6699cc"><b><table border="1" cellpadding="0" rules="groups">
  34. <colgroup span="1"></colgroup>
  35. <colgroup span="3"></colgroup>
  36. <tbody>
  37. <tr>
  38.  
  39. <td bgcolor="white"><img src="http://img217.imageshack.us/img217/9226/gryakcji.png" alt="" /></td>
  40. </tr>
  41. </tbody>
  42. <tbody>
  43. <tr>
  44.  
  45. <td bgcolor="#6699cc">Gra1
  46.             <br>Gra2</br>
  47.             Gra3
  48.             <br>Gra4</br></td>
  49.  
  50. </tr>
  51.  
  52. </tbody>
  53. </table></b><br /><br /></td>
  54. 		</tr>
  55. 		</table>
  56. 	</td>
  57.  
  58. </tr></div>
  59.  
  60. <div style="float:left"><table border="0" align="center">
  61. <tr>
  62. <td height="100%" valign="top" bgcolor="#6699cc"><b><table border="1" cellpadding="0" rules="groups">
  63. <colgroup span="1"></colgroup>
  64. <colgroup span="3"></colgroup>
  65. <tbody>
  66. <tr>
  67.  
  68. <td bgcolor="white"><img src="http://img217.imageshack.us/img217/9226/gryakcji.png" alt="" /></td>
  69. </tr>
  70. </tbody>
  71. <tbody>
  72. <tr>
  73.  
  74. <td bgcolor="#6699cc">Gra1
  75.             <br>Gra2</br>
  76.             Gra3
  77.             <br>Gra4</br></td>
  78.  
  79. </tr>
  80.  
  81. </tbody>
  82. </table></b><br /><br /></td>
  83. 		</tr>
  84. 		</table>
  85. 	</td>
  86.  
  87. </tr></div>
  88.  
  89. <div style="float:left"><table border="0" align="center">
  90. <tr>
  91. <td height="100%" valign="top" bgcolor="#6699cc"><b><table border="1" cellpadding="0" rules="groups">
  92. <colgroup span="1"></colgroup>
  93. <colgroup span="3"></colgroup>
  94. <tbody>
  95. <tr>
  96.  
  97. <td bgcolor="white"><img src="http://img217.imageshack.us/img217/9226/gryakcji.png" alt="" /></td>
  98. </tr>
  99. </tbody>
  100. <tbody>
  101. <tr>
  102.  
  103. <td bgcolor="#6699cc">Gra1
  104.             <br>Gra2</br>
  105.             Gra3
  106.             <br>Gra4</br></td>
  107.  
  108. </tr>
  109.  
  110. </tbody>
  111. </table></b><br /><br /></td>
  112. 		</tr>
  113. 		</table>
  114. 	</td>
  115.  
  116. </tr></div>
[HTML] pobierz, plaintext
Vercio
12.10.2010, 17:52:21
jeżeli użyłeś znacznika float: left to automatycznie centrowanie nie wchodzi w grę.
W takim wypadku musisz cały kod oblać div'em o konkretnych rozmiarach i nadac mu: margin: 0px auto;
Co do elementów oblewanych (float) pamiętaj aby zaraz pod nimi dadawać div'a z funkcją "wyzerowania" 
[CSS] pobierz, plaintext 
  1. clear: both;
[CSS] pobierz, plaintext

Taka mała sugestia ode mnie staraj się zamieszczać kod css w osobnym pliku, to bardzo ułatwia pracę z kodem, kod staję się o wiele czytelniejszy.

Oto kod poniżej:

[HTML] pobierz, plaintext 
  1. <div style="margin: 0px auto; width: 745px">
  2.  
  3.  
  4. <div style="float:left"><table border="0" align="center">
  5. <tr>
  6. <td height="100%" valign="top" bgcolor="#6699cc"><b><table border="1" cellpadding="0" rules="groups">
  7. <colgroup span="1"></colgroup>
  8. <colgroup span="3"></colgroup>
  9. <tbody>
  10. <tr>
  11.  
  12. <td bgcolor="white"><img src="http://img217.imageshack.us/img217/9226/gryakcji.png" alt="" /></td>
  13. </tr>
  14. </tbody>
  15. <tbody>
  16. <tr>
  17.  
  18. <td bgcolor="#6699cc">Gra1
  19. <br>Gra2</br>
  20. Gra3
  21. <br>Gra4</br></td>
  22.  
  23. </tr>
  24.  
  25. </tbody>
  26. </table></b><br /><br /></td>
  27. </tr>
  28. </table>
  29. </td>
  30.  
  31. </tr></div>
  32.  
  33.  
  34. <div style="float:left"><table border="0" align="center">
  35. <tr>
  36. <td height="100%" valign="top" bgcolor="#6699cc"><b><table border="1" cellpadding="0" rules="groups">
  37. <colgroup span="1"></colgroup>
  38. <colgroup span="3"></colgroup>
  39. <tbody>
  40. <tr>
  41.  
  42. <td bgcolor="white"><img src="http://img217.imageshack.us/img217/9226/gryakcji.png" alt="" /></td>
  43. </tr>
  44. </tbody>
  45. <tbody>
  46. <tr>
  47.  
  48. <td bgcolor="#6699cc">Gra1
  49. <br>Gra2</br>
  50. Gra3
  51. <br>Gra4</br></td>
  52.  
  53. </tr>
  54.  
  55. </tbody>
  56. </table></b><br /><br /></td>
  57. </tr>
  58. </table>
  59. </td>
  60.  
  61. </tr></div>
  62.  
  63. <div style="float:left"><table border="0" align="center">
  64. <tr>
  65. <td height="100%" valign="top" bgcolor="#6699cc"><b><table border="1" cellpadding="0" rules="groups">
  66. <colgroup span="1"></colgroup>
  67. <colgroup span="3"></colgroup>
  68. <tbody>
  69. <tr>
  70.  
  71. <td bgcolor="white"><img src="http://img217.imageshack.us/img217/9226/gryakcji.png" alt="" /></td>
  72. </tr>
  73. </tbody>
  74. <tbody>
  75. <tr>
  76.  
  77. <td bgcolor="#6699cc">Gra1
  78. <br>Gra2</br>
  79. Gra3
  80. <br>Gra4</br></td>
  81.  
  82. </tr>
  83.  
  84. </tbody>
  85. </table></b><br /><br /></td>
  86. </tr>
  87. </table>
  88. </td>
  89.  
  90. </tr></div>
  91.  
  92. <div style="float:left"><table border="0" align="center">
  93. <tr>
  94. <td height="100%" valign="top" bgcolor="#6699cc"><b><table border="1" cellpadding="0" rules="groups">
  95. <colgroup span="1"></colgroup>
  96. <colgroup span="3"></colgroup>
  97. <tbody>
  98. <tr>
  99.  
  100. <td bgcolor="white"><img src="http://img217.imageshack.us/img217/9226/gryakcji.png" alt="" /></td>
  101. </tr>
  102. </tbody>
  103. <tbody>
  104. <tr>
  105.  
  106. <td bgcolor="#6699cc">Gra1
  107. <br>Gra2</br>
  108. Gra3
  109. <br>Gra4</br></td>
  110.  
  111. </tr>
  112.  
  113. </tbody>
  114. </table></b><br /><br /></td>
  115. </tr>
  116. </table>
  117. </td>
  118.  
  119. </tr></div>
  120.  
  121. <div style="clear: both;"></div>
  122.  
  123. <div style="text-align: center;">
  124. Polityka Prywatności | Kontakt | Dotacje
  125. </div>
  126.  
  127. </div>
[HTML] pobierz, plaintext
MarcinKostrzewa2
14.11.2010, 10:01:10
Rozumiem że chcesz mieć na środku wszystko, także to co chcesz mieć na środku wstaw między <center></center>. Obecnie odchodzi się od stosowania tabel, tylko same divy.
webdice
15.11.2010, 09:23:31
Od <center> już się dawno "odeszło".
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.