Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css;html]Wysrodkowanie calej strony
Forum PHP.pl > Forum > Przedszkole
goped
24.01.2008, 15:22:13
Hello smile.gif Wiem, wiem, temat poruszany multum razy, jednak wierzcie mi, przeczytalem pelno stron na ten temat, lacznie z forami, pelno metod, ale kurcze zadna nie chce dzialac i nie wiem czemu. Strona www.gimnazjum3.centrum.gliwice.pl/cb
Layout pociety i zapisany przez phtoshopa. Odrazu powiem, ze wiem jak zrobic sobie zeby po tym pisac itp., jedynie problem jest w ustawieniu tego na srodku strony.
kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <HTML>
  3. <HEAD>
  4. <TITLE>glownainne</TITLE>
  5. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
  6. <!-- ImageReady Styles (glownainne.psd) -->
  7. <STYLE TYPE="text/css">
  8. <!--
  9. #center {
  10. width:1000px;
  11. margin: 0 auto;
  12. }
  13.  
  14. #glownainne-01 {
  15. 	position:absolute;
  16. 	left:0px;
  17. 	top:0px;
  18. 	width:1000px;
  19. 	height:211px;
  20. }
  21.  
  22. #glownainne-02 {
  23. 	position:absolute;
  24. 	left:0px;
  25. 	top:211px;
  26. 	width:52px;
  27. 	height:688px;
  28. }
  29.  
  30. #glownainne-03 {
  31. 	position:absolute;
  32. 	left:52px;
  33. 	top:211px;
  34. 	width:897px;
  35. 	height:29px;
  36. }
  37.  
  38. #glownainne-04 {
  39. 	position:absolute;
  40. 	left:949px;
  41. 	top:211px;
  42. 	width:51px;
  43. 	height:660px;
  44. }
  45.  
  46. #glownainne-05 {
  47. 	position:absolute;
  48. 	left:52px;
  49. 	top:240px;
  50. 	width:897px;
  51. 	height:88px;
  52. }
  53.  
  54. #glownainne-06 {
  55. 	position:absolute;
  56. 	left:52px;
  57. 	top:328px;
  58. 	width:15px;
  59. 	height:571px;
  60. }
  61.  
  62. #glownainne-07 {
  63. 	position:absolute;
  64. 	left:67px;
  65. 	top:328px;
  66. 	width:134px;
  67. 	height:394px;
  68. }
  69.  
  70. #glownainne-08 {
  71. 	position:absolute;
  72. 	left:201px;
  73. 	top:328px;
  74. 	width:81px;
  75. 	height:543px;
  76. }
  77.  
  78. #glownainne-09 {
  79. 	position:absolute;
  80. 	left:282px;
  81. 	top:328px;
  82. 	width:596px;
  83. 	height:543px;
  84. }
  85.  
  86. #glownainne-10 {
  87. 	position:absolute;
  88. 	left:878px;
  89. 	top:328px;
  90. 	width:71px;
  91. 	height:543px;
  92. }
  93.  
  94. #glownainne-11 {
  95. 	position:absolute;
  96. 	left:67px;
  97. 	top:722px;
  98. 	width:134px;
  99. 	height:40px;
  100. }
  101.  
  102. #glownainne-12 {
  103. 	position:absolute;
  104. 	left:67px;
  105. 	top:762px;
  106. 	width:134px;
  107. 	height:137px;
  108. }
  109.  
  110. #glownainne-13 {
  111. 	position:absolute;
  112. 	left:201px;
  113. 	top:871px;
  114. 	width:81px;
  115. 	height:28px;
  116. }
  117.  
  118. #glownainne-14 {
  119. 	position:absolute;
  120. 	left:282px;
  121. 	top:871px;
  122. 	width:596px;
  123. 	height:28px;
  124. }
  125.  
  126. #glownainne-15 {
  127. 	position:absolute;
  128. 	left:878px;
  129. 	top:871px;
  130. 	width:122px;
  131. 	height:28px;
  132. }
  133.  
  134. #glownainne-16 {
  135. 	position:absolute;
  136. 	left:0px;
  137. 	top:899px;
  138. 	width:1000px;
  139. 	height:51px;
  140. }
  141.  
  142. -->
  143. </STYLE>
  144. <!-- End ImageReady Styles -->
  145. </HEAD>
  146. <BODY STYLE="background-color:#4c4c4c;">
  147. <!-- ImageReady Slices (glownainne.psd) -->
  148. <DIV ID="center">
  149. <DIV ID="glownainne-01">
  150. 	<IMG SRC="images/glownainne_01.jpg" WIDTH=1000 HEIGHT=211 ALT="">
  151. </DIV>
  152. <DIV ID="glownainne-02">
  153. 	<IMG SRC="images/glownainne_02.jpg" WIDTH=52 HEIGHT=688 ALT="">
  154. </DIV>
  155. <DIV ID="glownainne-03">
  156. 	<IMG SRC="images/glownainne_03.jpg" WIDTH=897 HEIGHT=29 ALT="">
  157. </DIV>
  158. <DIV ID="glownainne-04">
  159. 	<IMG SRC="images/glownainne_04.jpg" WIDTH=51 HEIGHT=660 ALT="">
  160. </DIV>
  161. <DIV ID="glownainne-05">
  162. 	<IMG SRC="images/glownainne_05.jpg" WIDTH=897 HEIGHT=88 ALT="">
  163. </DIV>
  164. <DIV ID="glownainne-06">
  165. 	<IMG SRC="images/glownainne_06.jpg" WIDTH=15 HEIGHT=571 ALT="">
  166. </DIV>
  167. <DIV ID="glownainne-07">
  168. 	<IMG SRC="images/glownainne_07.jpg" WIDTH=134 HEIGHT=394 ALT="">
  169. </DIV>
  170. <DIV ID="glownainne-08">
  171. 	<IMG SRC="images/glownainne_08.jpg" WIDTH=81 HEIGHT=543 ALT="">
  172. </DIV>
  173. <DIV ID="glownainne-09">
  174. 	<IMG SRC="images/glownainne_09.jpg" WIDTH=596 HEIGHT=543 ALT="">
  175. </DIV>
  176. <DIV ID="glownainne-10">
  177. 	<IMG SRC="images/glownainne_10.jpg" WIDTH=71 HEIGHT=543 ALT="">
  178. </DIV>
  179. <DIV ID="glownainne-11">
  180. 	<IMG SRC="images/glownainne_11.jpg" WIDTH=134 HEIGHT=40 ALT="">
  181. </DIV>
  182. <DIV ID="glownainne-12">
  183. 	<IMG SRC="images/glownainne_12.jpg" WIDTH=134 HEIGHT=137 ALT="">
  184. </DIV>
  185. <DIV ID="glownainne-13">
  186. 	<IMG SRC="images/glownainne_13.jpg" WIDTH=81 HEIGHT=28 ALT="">
  187. </DIV>
  188. <DIV ID="glownainne-14">
  189. 	<IMG SRC="images/glownainne_14.jpg" WIDTH=596 HEIGHT=28 ALT="">
  190. </DIV>
  191. <DIV ID="glownainne-15">
  192. 	<IMG SRC="images/glownainne_15.jpg" WIDTH=122 HEIGHT=28 ALT="">
  193. </DIV>
  194. <DIV ID="glownainne-16">
  195. 	<IMG SRC="images/glownainne_16.jpg" WIDTH=1000 HEIGHT=51 ALT="">
  196. </DIV>
  197. </DIV>
  198. <!-- End ImageReady Slices -->
  199. </BODY>
  200. </HTML>
[HTML] pobierz, plaintext


thx, pozdrawiam
Sebastian003
24.01.2008, 16:03:14
Poco między div wstawiasz img wstaw do css za pomocą

background-image: url('nazwa_pliku');

wtedy się wyśrodkuje

Pozdrawiam
goped
24.01.2008, 16:26:59
Niestety, nie dziala:( Nowy kod wyglada tak:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <HTML>
  3. <HEAD>
  4. <TITLE>glownainne</TITLE>
  5. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
  6. <!-- ImageReady Styles (glownainne.psd) -->
  7. <STYLE TYPE="text/css">
  8. <!--
  9. #center {
  10. width:1000px;
  11. margin: 0 auto;
  12. }
  13.  
  14. #glownainne-01 {
  15. 	background-image: url("images/glownainne_01.jpg");
  16. 	position:absolute;
  17. 	left:0px;
  18. 	top:0px;
  19. 	width:1000px;
  20. 	height:211px;
  21. }
  22.  
  23. #glownainne-02 {
  24. 	background-image: url("images/glownainne_02.jpg");
  25. 	position:absolute;
  26. 	left:0px;
  27. 	top:211px;
  28. 	width:52px;
  29. 	height:688px;
  30. }
  31.  
  32. #glownainne-03 {
  33. 	background-image: url("images/glownainne_03.jpg");
  34. 	position:absolute;
  35. 	left:52px;
  36. 	top:211px;
  37. 	width:897px;
  38. 	height:29px;
  39. }
  40.  
  41. #glownainne-04 {
  42. 	background-image: url("images/glownainne_04.jpg");
  43. 	position:absolute;
  44. 	left:949px;
  45. 	top:211px;
  46. 	width:51px;
  47. 	height:660px;
  48. }
  49.  
  50. #glownainne-05 {
  51. 	background-image: url("images/glownainne_05.jpg");
  52. 	position:absolute;
  53. 	left:52px;
  54. 	top:240px;
  55. 	width:897px;
  56. 	height:88px;
  57. }
  58.  
  59. #glownainne-06 {
  60. 	background-image: url("images/glownainne_06.jpg");
  61. 	position:absolute;
  62. 	left:52px;
  63. 	top:328px;
  64. 	width:15px;
  65. 	height:571px;
  66. }
  67.  
  68. #glownainne-07 {
  69. 	background-image: url("images/glownainne_07.jpg");
  70. 	position:absolute;
  71. 	left:67px;
  72. 	top:328px;
  73. 	width:134px;
  74. 	height:394px;
  75. }
  76.  
  77. #glownainne-08 {
  78. 	background-image: url("images/glownainne_08.jpg");
  79. 	position:absolute;
  80. 	left:201px;
  81. 	top:328px;
  82. 	width:81px;
  83. 	height:543px;
  84. }
  85.  
  86. #glownainne-09 {
  87. 	background-image: url("images/glownainne_09.jpg");
  88. 	position:absolute;
  89. 	left:282px;
  90. 	top:328px;
  91. 	width:596px;
  92. 	height:543px;
  93. }
  94.  
  95. #glownainne-10 {
  96. 	background-image: url("images/glownainne_10.jpg");
  97. 	position:absolute;
  98. 	left:878px;
  99. 	top:328px;
  100. 	width:71px;
  101. 	height:543px;
  102. }
  103.  
  104. #glownainne-11 {
  105. 	background-image: url("images/glownainne_11.jpg");
  106. 	position:absolute;
  107. 	left:67px;
  108. 	top:722px;
  109. 	width:134px;
  110. 	height:40px;
  111. }
  112.  
  113. #glownainne-12 {
  114. 	background-image: url("images/glownainne_12.jpg");
  115. 	position:absolute;
  116. 	left:67px;
  117. 	top:762px;
  118. 	width:134px;
  119. 	height:137px;
  120. }
  121.  
  122. #glownainne-13 {
  123. 	background-image: url("images/glownainne_13.jpg");
  124. 	position:absolute;
  125. 	left:201px;
  126. 	top:871px;
  127. 	width:81px;
  128. 	height:28px;
  129. }
  130.  
  131. #glownainne-14 {
  132. 	background-image: url("images/glownainne_14.jpg");
  133. 	position:absolute;
  134. 	left:282px;
  135. 	top:871px;
  136. 	width:596px;
  137. 	height:28px;
  138. }
  139.  
  140. #glownainne-15 {
  141. 	background-image: url("images/glownainne_15.jpg");
  142. 	position:absolute;
  143. 	left:878px;
  144. 	top:871px;
  145. 	width:122px;
  146. 	height:28px;
  147. }
  148.  
  149. #glownainne-16 {
  150. 	background-image: url("images/glownainne_16.jpg");
  151. 	position:absolute;
  152. 	left:0px;
  153. 	top:899px;
  154. 	width:1000px;
  155. 	height:51px;
  156. }
  157.  
  158. -->
  159. </STYLE>
  160. <!-- End ImageReady Styles -->
  161. </HEAD>
  162. <BODY STYLE="background-color:#4c4c4c;">
  163. <!-- ImageReady Slices (glownainne.psd) -->
  164. <DIV ID="center">
  165. <DIV ID="glownainne-01">
  166. </DIV>
  167. <DIV ID="glownainne-02">
  168. </DIV>
  169. <DIV ID="glownainne-03">
  170. </DIV>
  171. <DIV ID="glownainne-04">
  172. </DIV>
  173. <DIV ID="glownainne-05">
  174. </DIV>
  175. <DIV ID="glownainne-06">
  176. </DIV>
  177. <DIV ID="glownainne-07">
  178. </DIV>
  179. <DIV ID="glownainne-08">
  180. </DIV>
  181. <DIV ID="glownainne-09">
  182. </DIV>
  183. <DIV ID="glownainne-10">
  184. </DIV>
  185. <DIV ID="glownainne-11">
  186. </DIV>
  187. <DIV ID="glownainne-12">
  188. </DIV>
  189. <DIV ID="glownainne-13">
  190. </DIV>
  191. <DIV ID="glownainne-14">
  192. </DIV>
  193. <DIV ID="glownainne-15">
  194. </DIV>
  195. <DIV ID="glownainne-16">
  196. </DIV>
  197. </DIV>
  198. <!-- End ImageReady Slices -->
  199. </BODY>
  200. </HTML>
[HTML] pobierz, plaintext
Sebastian003
24.01.2008, 16:32:07
Usuń z każdego wiersza to: na pewno pomoże.

Kod
position:absolute;
left:x px;
top:x px;
goped
24.01.2008, 16:37:26
Niestety, dalej nic, totalnie sie rozpadlo sad.gif, ehh, daje ostatni wklejony kod. Jeszcze jakies pomysly?snitch.gif
Sebastian003
24.01.2008, 16:43:33
To usun z kazdego wiersza to :

Kod
position:absolute;


może będzie działać
goped
24.01.2008, 16:48:32
No, w koncu zrobilem to. Bardzo pomocna okazala sie strona [ur;]http://kurs.browsehappy.pl/CSS/Position[/url], na ktorej jest napisane laczenie position:absolute i relative. Relative jest dla kontenerow i wtedy pozycjonowanie odbrywa sie od krawedzi kontenera. Dzieki za probe pomocy smile.gif

Milego dnia, pozdrawiam
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.