Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyśrodkowanie strony
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
lapek
Mam problem z wyśrodkowaniem strony.
Szukałem już, zrobiłem co było napisane i dalej nic.

style.css
  1. html, body {
  2. background: url('images/bg.gif') repeat-x;
  3. border:0;
  4. font-family: Arial, Helvetica, Verdana, sans-serif;
  5. color: #000;
  6. text-align: center;
  7. margin: 0px auto;
  8.  
  9. }
  10.  
  11.  
  12. #table {
  13. margin: 0px auto;
  14. text-align: left;
  15. width:800px;
  16. height:600px;
  17. }
  18.  
  19.  
  20. #id01 {
  21. position:absolute;
  22. left:0px;
  23. top:0px;
  24. width:800px;
  25. height:29px;
  26. }
  27.  
  28. #id02 {
  29. position:absolute;
  30. left:0px;
  31. top:29px;
  32. width:655px;
  33. height:51px;
  34. }
  35.  
  36. #id03 {
  37. position:absolute;
  38. left:655px;
  39. top:29px;
  40. width:141px;
  41. height:141px;
  42. }
  43.  
  44. #id04 {
  45. position:absolute;
  46. left:796px;
  47. top:29px;
  48. width:4px;
  49. height:571px;
  50. }
  51.  
  52. #id05 {
  53. position:absolute;
  54. left:0px;
  55. top:80px;
  56. width:211px;
  57. height:117px;
  58. }
  59.  
  60. #tresc {
  61. text-align:justify;
  62. background: url('images/06.png') no-repeat;
  63. color: #0B0B3B;
  64. position:absolute;
  65. left:211px;
  66. top:80px;
  67. width:348px;
  68. height:322px;
  69.  
  70. }
  71.  
  72. #id07 {
  73. position:absolute;
  74. left:559px;
  75. top:80px;
  76. width:96px;
  77. height:338px;
  78. }
  79.  
  80. #id08 {
  81. position:absolute;
  82. left:655px;
  83. top:170px;
  84. width:141px;
  85. height:92px;
  86. }
  87.  
  88. #id09 {
  89. position:absolute;
  90. left:0px;
  91. top:197px;
  92. width:35px;
  93. height:403px;
  94. }
  95.  
  96. #id10 {
  97. padding-top: 40;
  98. background: url('images/10.png') no-repeat;
  99. position:absolute;
  100. left:35px;
  101. top:197px;
  102. width:106px;
  103. height:106px;
  104. }
  105.  
  106. #id11 {
  107. position:absolute;
  108. left:141px;
  109. top:197px;
  110. width:70px;
  111. height:194px;
  112. }
  113.  
  114. #id12 {
  115. position:absolute;
  116. left:655px;
  117. top:262px;
  118. width:129px;
  119. height:129px;
  120. }
  121.  
  122. #id13 {
  123. position:absolute;
  124. left:784px;
  125. top:262px;
  126. width:12px;
  127. height:338px;
  128. }
  129.  
  130. #id14 {
  131. position:absolute;
  132. left:35px;
  133. top:303px;
  134. width:106px;
  135. height:88px;
  136. }
  137.  
  138. #id15 {
  139. position:absolute;
  140. left:35px;
  141. top:391px;
  142. width:68px;
  143. height:209px;
  144. }
  145.  
  146. #id16 {
  147. position:absolute;
  148. left:103px;
  149. top:391px;
  150. width:108px;
  151. height:108px;
  152. }
  153.  
  154. #id17 {
  155. position:absolute;
  156. left:655px;
  157. top:391px;
  158. width:129px;
  159. height:27px;
  160. }
  161.  
  162. #id18 {
  163. position:absolute;
  164. left:211px;
  165. top:402px;
  166. width:348px;
  167. height:85px;
  168. }
  169.  
  170. #id19 {
  171. position:absolute;
  172. left:559px;
  173. top:418px;
  174. width:120px;
  175. height:120px;
  176. }
  177.  
  178. #id20 {
  179. position:absolute;
  180. left:679px;
  181. top:418px;
  182. width:105px;
  183. height:182px;
  184. }
  185.  
  186. #id21 {
  187. position:absolute;
  188. left:211px;
  189. top:487px;
  190. width:118px;
  191. height:113px;
  192. }
  193.  
  194. #id22 {
  195. position:absolute;
  196. left:329px;
  197. top:487px;
  198. width:112px;
  199. height:112px;
  200. }
  201.  
  202. #id23 {
  203. position:absolute;
  204. left:441px;
  205. top:487px;
  206. width:118px;
  207. height:113px;
  208. }
  209.  
  210. #id24 {
  211. position:absolute;
  212. left:103px;
  213. top:499px;
  214. width:108px;
  215. height:101px;
  216. }
  217.  
  218. #id25 {
  219. position:absolute;
  220. left:559px;
  221. top:538px;
  222. width:120px;
  223. height:62px;
  224. }
  225.  
  226. #id26 {
  227. position:absolute;
  228. left:329px;
  229. top:599px;
  230. width:112px;
  231. height:1px;
  232. }
  233.  
  234.  
  235.  
  236.  
  237.  
  238.  
  239.  
  240. a.link1
  241. {
  242. font-weight:bold;
  243. color:white;
  244. text-decoration:none;
  245. }


adres strony: testing-blog.yoyo.pl

Pozdrawiam
thek
Jeśli się używa pozycjonowania absolutnego to się nie ma co dziwi. Position:absolute ustawia element pozycjonowany zawsze względem najbliższego przodka, który ma pozycjonowanie inne niż static, a jeśli nie ma takowego, to ustawia względem body. I to ostatnie nastąpiło w tym wypadku. Jak to poprawić? Do #table dopisz jeszcze position:relative; a wszystko będzie cacy wink.gif
Rid
Układ strony CSS flexible nie należy do najlepszych,nie wiem czy sprawdzał Pan na różnych rozdzielczościach ekranu.
Radziłbym poczytać o fluid layout-wydaje mi się że jest lepszym rozwiązaniem.
lapek
Dziękuje bardzo za porady biggrin.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.