Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Wyśrodkowanie strony inaczej
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
organista18
3.09.2010, 07:36:01
Witam, wszystkich. Na początku obrazek:


Problem niby banalny, ale walczę już z tym prawie przez całą noc. Chodzi o wyśrodkowanie Div'ów o nr:2-8, 11,14,17,20. Mianowicie chodzi mi o to, aby przy zmianach okna przeglądarki, te divy były cały czas na środku, a div'y po bokach się w miarę pomniejszania okna kurczyły...

Poniżej kod CSS:
#Tabela_01 to div w którym są umieszczone wszystkie inne divy...
[PHP] pobierz, plaintext 
  1. body {
  2. 	text-align: center;
  3. 	margin: 0;
  4. 	padding: 0 0 15px 0;
  5. 	font-family: "Times New Roman", Times, serif trebuchet ms, arial, helvetica, sans-serif;
  6. 	background-color: #000020;
  7. 	background-repeat: repeat;
  8. 	color:#FFFFFF;
  9.   }
  10.  
  11. #Tabela_01 {
  12. 	margin: 0px auto;
  13. 	background-image:url(images/Content.jpg);
  14. 	background-repeat:repeat;
  15. 	width:1600px;
  16. 	position:fixed;
  17. }
  18.  
  19. #header-left {
  20. 	left:0px;
  21. 	top:0px;
  22. 	float: left;
  23. 	background-image:url(images/header_left.jpg);
  24. 	width:260px;
  25. 	height:124px;
  26. }
  27.  
  28. #header-logo {
  29. 	float: left;
  30. 	left:260px;
  31. 	top:0px;
  32. 	background-image:url(images/header_logo.jpg);
  33. 	width:533px;
  34. 	height:124px;
  35. }
  36.  
  37. #blog {
  38. 	float: left;
  39. 	left:793px;
  40. 	top:0px;
  41. 	background-image:url(images/blog.jpg);
  42. 	width:95px;
  43. 	height:124px;
  44. }
  45.  
  46. #porady {
  47. 	float: left;
  48. 	left:888px;
  49. 	top:0px;
  50. 	background-image:url(images/porady.jpg);
  51. 	width:95px;
  52. 	height:124px;
  53. }
  54.  
  55. #astrologia {
  56. 	float: left;
  57. 	left:983px;
  58. 	top:0px;
  59. 	background-image:url(images/astrologia.jpg);
  60. 	width:96px;
  61. 	height:124px;
  62. }
  63.  
  64. #kulinaria {
  65. 	float: left;
  66. 	left:1079px;
  67. 	top:0px;
  68. 	background-image:url(images/kulinaria.jpg);
  69. 	width:96px;
  70. 	height:124px;
  71. }
  72.  
  73. #kontakt {
  74. 	float: left;
  75. 	left:1175px;
  76. 	top:0px;
  77. 	background-image:url(images/kontakt.jpg);
  78. 	width:96px;
  79. 	height:124px;
  80. }
  81.  
  82. #header-bar {
  83. 	float: left;
  84. 	left:1271px;
  85. 	top:0px;
  86. 	background-image:url(images/header_bar.jpg);
  87. 	width:30px;
  88. 	height:124px;
  89. }
  90.  
  91. #header-right {
  92. 	float: left;
  93. 	left:1301px;
  94. 	top:0px;
  95. 	background-image:url(images/header_right.jpg);
  96. 	width:299px;
  97. 	height:124px;
  98. }
  99.  
  100. #szablon4-plasterki-10 {
  101. 	float: left;
  102. 	left:0px;
  103. 	top:124px;
  104. 	background-image:url(images/szablon4_plasterki_10.jpg);
  105. 	width:260px;
  106. 	height:136px;
  107. }
  108.  
  109. #cytaty-center {
  110. 	float: left;
  111. 	left:260px;
  112. 	top:124px;
  113. 	background-image:url(images/cytaty_center.jpg);
  114. 	width:1041px;
  115. 	height:136px;
  116. }
  117.  
  118. #cytaty-right {
  119. 	float: left;
  120. 	left:1301px;
  121. 	top:124px;
  122. 	background-image:url(images/cytaty_right.jpg);
  123. 	width:299px;
  124. 	height:136px;
  125. }
  126.  
  127. #content-left {
  128. 	float: left;
  129. 	left:0px;
  130. 	top:260px;
  131. 	background-image:url(images/content_left.jpg);
  132. 	width:260px;
  133. 	height:299px;
  134. }
  135.  
  136. #content-main {
  137. 	float: left;
  138. 	left:260px;
  139. 	top:260px;
  140. 	background-image:url(images/content_main.jpg);
  141. 	width:1041px;
  142. 	height:299px;
  143. }
  144.  
  145. #content-right {
  146. 	float: left;
  147. 	left:1301px;
  148. 	top:260px;
  149. 	background-image:url(images/content_right.jpg);
  150. 	width:299px;
  151. 	height:299px;
  152. }
  153.  
  154. #bottom-left {
  155. 	float: left;
  156. 	left:0px;
  157. 	top:1282px;
  158. 	background-image:url(images/bottom_left.jpg);
  159. 	width:260px;
  160. 	height:118px;
  161. }
  162.  
  163. #bottom-bar {
  164. 	float: left;
  165. 	left:260px;
  166. 	top:1282px;
  167. 	background-image:url(images/bottom_bar.jpg);
  168. 	width:1041px;
  169. 	height:118px;
  170. }
  171.  
  172. #bottom-right {
  173. 	float: left;
  174. 	left:1301px;
  175. 	top:1282px;
  176. 	background-image:url(images/bottom_right.jpg);
  177. 	width:299px;
  178. 	height:118px;
  179. }
[PHP] pobierz, plaintext


Pozdrawiam i z góry dziekuję za pomoc.
nospor
3.09.2010, 07:49:33
Piszesz temat o css a walisz w php.... Patrz proszę gdzie piszesz - przenosze
JJack
3.09.2010, 10:25:03
Mam dokładnie ten sam problem.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title> new document </title>
  5. </head>
  6.  
  7.  <body style="margin:0; padding:0;">
  8.   <table width="100%" style="width:100%;">
  9. 	<tr>
  10. 		<td style="width:50%; border:1px solid red;">1</td>
  11. 		<td style="widrh:980px; border:1px solid red;"><div style="width:980px;"></div></td>
  12. 		<td style="width:50%; border:1px solid red;">3</td>
  13. 	</tr>
  14.   </table>
  15.  </body>
  16. </html>
[HTML] pobierz, plaintext



Takie coś działa ale jest oparte na tabelkach ;(

Także szukam rozwiązania w CSS.
organista18
3.09.2010, 10:35:39
Problem rozwiązałem przy pomocy JQuery:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. 	$(document).ready(function() 
  3. 	{
  4. 		//var screenw = screen.width;
  5. 		var screenw = $(window).width();
  6. 		var div = screenw - 1041;
  7. 		var divl = Math.round(div/2)-1;
  8. 		$("#Tabela_01").width(screenw);
  9. 		$("#header_left").width(divl);
  10. 		$("#header_right").width(divl);
  11. 		$("#szablon4_plasterki_10").width(divl);
  12. 		$("#cytaty_right").width(divl);
  13. 		$("#content_left").width(divl);
  14. 		$("#content_right").width(divl);
  15. 		$("#bottom_left").width(divl);
  16. 		$("#bottom_right").width(divl);
  17. 	});
  18. </script>
[HTML] pobierz, plaintext


Problem rozwiązałem w ten sposób, że pobieram szerokość okna przeglądarki. Środkowa część strony musi mieć szerokość 1041pikseli. Więc wykonuję proste działanie: [szerokość okna] - 1041 pikseli, ten wynik dzielę przez 2 i w ten sposób otrzymuję, ile mi zostało pikseli jeszcze po prawej i po lewej stronie centralnej części strony, która musi mieć szerokość stałą (1041pikseli), a potem nadaję tym div'om po lewej i prawej stronie szerokość wg powyższych obliczeń.

Działa bardzo pięknie. W swoim skrypcie dodałem jeszcze zmianę rozmiaru przy zmianie wielkości okna. Fragment poniżej:
[HTML] pobierz, plaintext 
  1. $(window).resize(function() 
  2. 	{
  3. 		var screenw = $(window).width();
  4. 		var div = screenw - 1041;
  5. 		var divl = Math.round(div/2)-1;
  6. 		$("#Tabela_01").width(screenw);
  7. 		$("#header_left").width(divl);
  8. 		$("#header_right").width(divl);
  9. 		$("#szablon4_plasterki_10").width(divl);
  10. 		$("#cytaty_right").width(divl);
  11. 		$("#content_left").width(divl);
  12. 		$("#content_right").width(divl);
  13. 		$("#bottom_left").width(divl);
  14. 		$("#bottom_right").width(divl);
  15. 	});
[HTML] pobierz, plaintext


Pozdrawiam!


---
@ JJack

Musisz zamienić znaczniki <td> na <div> i w stylu każdego div'a, aby był jeden za drugim trzeba ustawić regułę css: float:left. Poniżej przykład (piszę z pamięci, więc proszę o wyrozumiałość winksmiley.jpg):
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title> new document </title>
  5. </head>
  6.  
  7.  <body style="margin:0; padding:0;">
  8.   <div id="Table" style="width:100%;">
  9. 		<div id="left" style="width:50%; border:1px solid red; float:left;">Lewy</div>
  10. 		<div id="center" style="width:980px; border:1px solid red; float:left;">Środek</div>
  11. 		<div id="right" style="width:50%; border:1px solid red; float:left;">3</div>
  12.   </div>
  13.  </body>
  14. </html>
[HTML] pobierz, plaintext


Pownno działać winksmiley.jpg
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.