Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Dopasowanie do przeglądarki
Forum PHP.pl > Forum > Przedszkole
Otto
3.04.2010, 19:46:30
Witam mam taki problem mianowicie od wczoraj układam szablon na divach i gdy już go ułożyłem okazało okazało sie że mozilla czyta kod całkiem inaczej niż opera tongue.gif Niby oczywiste ale każdemu może się zdarzyć haha.gif No to zaczołem od nowa pisać pod opere i mozille i natrafiłem na taki problem z którym nie mogę sobie poradzić:

Na operze wygląda tak jak ma wyglądać:

http://img87.imageshack.us/img87/3254/operauw.jpg

a tu widok z mozilli (chodzi mi o drugi news)

http://img96.imageshack.us/img96/4498/mozzila.jpg

Nie wiem czemu tak się dzieje choć drugi news ma taki sam kod jak pierwszy co widać działa w operze

Oto kod css newsów:

[HTML] pobierz, plaintext 
  1. #blok23 {
  2. 	background-image: url(Obrazki/pociete_23.jpg);
  3. 	width: 680px;
  4. 	height: 6px;
  5.  
  6. }
  7.  
  8. #blok25 {
  9. 	background-image: url(Obrazki/pociete_25.jpg);
  10. 	width: 12px;
  11. 	height: 53px;
  12. 	float: left;
  13. }
  14.  
  15. #avatar {
  16. 	width: 50px;
  17. 	height: 50px;
  18. 	float: left;
  19. }
  20.  
  21. #blok27 {
  22. 	background-color: #1d1d1d;
  23. 	width: 438px;
  24. 	height: 17px;
  25. 	font-family: Arial;
  26. 	font-size: 16px;
  27. 	color: #818181;
  28. 	padding-top: 8px;
  29. 	padding-left: 6px;
  30. }
  31.  
  32. #blok27 a {
  33. 	color: #818181;
  34. 	text-decoration: none; 
  35. }
  36.  
  37. #blok27 a:hover {
  38. 	color: #c00000;
  39. 	text-decoration: none; 
  40. }
  41.  
  42. #blok34 {
  43. 	background-color: #1d1d1d;
  44. 	width: 423px;
  45. 	height: 18px;
  46. 	font-family: Arial;
  47. 	font-size: 12px;
  48. 	color: #4a4a4a;
  49. 	padding-top: 6px;
  50. 	padding-left: 21px;
  51. }
  52.  
  53. #blok34 a {
  54. 	color: #4a4a4a;
  55. 	text-decoration: none; 
  56. }
  57.  
  58. #blok34 a:hover {
  59. 	color: #c00000;
  60. 	text-decoration: none; 
  61. }
  62.  
  63. #blok28 {
  64. 	background-image: url(Obrazki/pociete_28.jpg);
  65. 	width: 38px;
  66. 	height: 50px;
  67. 	float: left;
  68. }
  69.  
  70. #news_head_3 {
  71. 	float: left;
  72. }
  73.  
  74. #news_head_4 {
  75. 	float: left;
  76.  
  77. }
  78.  
  79. #komentarze {
  80. 	background-image: url(Obrazki/komentarze.jpg);
  81. 	width: 120px;
  82. 	height: 19px;
  83. 	font-family: Arial;
  84. 	font-size: 12px;
  85. 	color: #818181;
  86. 	padding-top: 5px;
  87. 	padding-left: 10px;
  88.  
  89. }
  90.  
  91. #komentarze a {
  92. 	color: #818181;
  93. 	text-decoration: none;
  94. }
  95.  
  96. #komentarze a:hover {
  97. 	color: #c00000;
  98. 	text-decoration: none;
  99. }
  100.  
  101. #blok33 {
  102. 	background-image: url(Obrazki/pociete_33.jpg);
  103. 	width: 130px;
  104. 	height: 2px;
  105.  
  106. }
  107.  
  108. #czytaj {
  109. 	background-image: url(Obrazki/czytaj.jpg);
  110. 	width: 120px;
  111. 	height: 20px;
  112. 	font-family: Arial;
  113. 	font-size: 12px;
  114. 	color: #818181;
  115. 	padding-top: 4px;
  116. 	padding-left: 10px;
  117.  
  118. }
  119.  
  120. #czytaj a {
  121. 	color: #818181;
  122. 	text-decoration: none;
  123. }
  124.  
  125. #czytaj a:hover {
  126. 	color: #c00000;
  127. 	text-decoration: none;
  128. }
  129.  
  130. #blok30 {
  131. 	background-image: url(Obrazki/pociete_30.jpg);
  132. 	width: 6px;
  133. 	height: 50px;
  134. 	float: left;
  135. }
  136.  
  137. #blok36 {
  138. 	background-image: url(Obrazki/pociete_36.jpg);
  139. 	width: 668px;
  140. 	height: 3px;
  141. 	float: left;
  142. }
  143.  
  144. #news_body {
  145. 	background-color: #141414;
  146. 	width: 675px;
  147. 	font-family: Arial;
  148. 	font-size: 12px;
  149. 	color: #818181;
  150. 	padding-left: 5px;
  151. }
  152.  
  153. #news_body a {
  154. 	color: #818181;
  155. 	font-weight: bold; 
  156. 	text-decoration: none; 
  157. }
  158.  
  159. #news_body a:hover {
  160. 	color: #c00000;
  161. 	font-weight: bold; 
  162. 	text-decoration: none; 
  163. }
  164.  
  165. #news_end {
  166. 	background-image: url(Obrazki/news_end.jpg);
  167. 	width: 680px;
  168. 	height: 15px;
  169. 	float: left;
  170. }
  171.  
  172. #news {
  173. 	margin-left: 247px;
  174. }
[HTML] pobierz, plaintext


A tu kod strony:

[HTML] pobierz, plaintext 
  1. <div id="news">
  2. 			<div id="news_head">
  3. 				<div id="blok23"></div>
  4. 				<div id="blok25"></div>
  5. 					<div id="news_head_1">
  6. 						<div id="news_head_2">
  7. 							<div id="avatar"><a href="#"><img border="0" src="obrazki/avatar.jpg"></a></div>
  8. 								<div id="news_head_3">
  9. 									<div id="blok27"><a href="#">Tytuł wiadomości</a></div>
  10. 									<div id="blok34">Napisał <a href="#">Otto</a> dnia 02 Kwietnia 2010 w kategorii Portal</div>
  11. 								</div>
  12. 																	<div id="blok28"></div>
  13. 								<div id="news_head_4">
  14.  
  15. 									<div id="komentarze"><a href="#">Komentarze: 23</a></div>
  16. 									<div id="blok33"></div>
  17. 									<div id="czytaj"><a href="#">Czytaj dalej...</a></div>
  18. 								</div>
  19. 									<div id="blok30"></div>
  20. 						</div>
  21. 							<div id="blok36"></div>
  22. 					</div>
  23. 			</div>
  24. 			<div id="news_body">TREŚĆ</div>
  25. 			<div id="news_end"></div>
  26.  
  27. </div>
[HTML] pobierz, plaintext
Pawel_W
3.04.2010, 19:53:31
nie możesz powtarzać id dla wielu elementów... używaj klas!
Otto
3.04.2010, 20:23:52
To nie działa i nie wydaje mi się żeby oto tu chodziło...

[HTML] pobierz, plaintext 
  1. /* Newsy  */
  2.  
  3. #blok23 {
  4. 	background-image: url(Obrazki/pociete_23.jpg);
  5. 	width: 680px;
  6. 	height: 6px;
  7.  
  8. }
  9.  
  10. #blok25 {
  11. 	background-image: url(Obrazki/pociete_25.jpg);
  12. 	width: 12px;
  13. 	height: 53px;
  14. 	float: left;
  15. }
  16.  
  17. #avatar {
  18. 	width: 50px;
  19. 	height: 50px;
  20. 	float: left;
  21. }
  22.  
  23. #blok27 {
  24. 	background-color: #1d1d1d;
  25. 	width: 438px;
  26. 	height: 17px;
  27. 	font-family: Arial;
  28. 	font-size: 16px;
  29. 	color: #818181;
  30. 	padding-top: 8px;
  31. 	padding-left: 6px;
  32. }
  33.  
  34. #blok34 {
  35. 	background-color: #1d1d1d;
  36. 	width: 423px;
  37. 	height: 18px;
  38. 	font-family: Arial;
  39. 	font-size: 12px;
  40. 	color: #4a4a4a;
  41. 	padding-top: 6px;
  42. 	padding-left: 21px;
  43. }
  44.  
  45. #blok28 {
  46. 	background-image: url(Obrazki/pociete_28.jpg);
  47. 	width: 38px;
  48. 	height: 50px;
  49. 	float: left;
  50. }
  51.  
  52. #news_head_3 {
  53. 	float: left;
  54. }
  55.  
  56. #news_head_4 {
  57. 	float: left;
  58.  
  59. }
  60.  
  61. #komentarze {
  62. 	background-image: url(Obrazki/komentarze.jpg);
  63. 	width: 120px;
  64. 	height: 19px;
  65. 	font-family: Arial;
  66. 	font-size: 12px;
  67. 	color: #818181;
  68. 	padding-top: 5px;
  69. 	padding-left: 10px;
  70.  
  71. }
  72.  
  73.  
  74. #blok33 {
  75. 	background-image: url(Obrazki/pociete_33.jpg);
  76. 	width: 130px;
  77. 	height: 2px;
  78.  
  79. }
  80.  
  81. #czytaj {
  82. 	background-image: url(Obrazki/czytaj.jpg);
  83. 	width: 120px;
  84. 	height: 20px;
  85. 	font-family: Arial;
  86. 	font-size: 12px;
  87. 	color: #818181;
  88. 	padding-top: 4px;
  89. 	padding-left: 10px;
  90.  
  91. }
  92.  
  93. #blok30 {
  94. 	background-image: url(Obrazki/pociete_30.jpg);
  95. 	width: 6px;
  96. 	height: 50px;
  97. 	float: left;
  98. }
  99.  
  100. #blok36 {
  101. 	background-image: url(Obrazki/pociete_36.jpg);
  102. 	width: 668px;
  103. 	height: 3px;
  104. 	float: left;
  105. }
  106.  
  107. #news_body {
  108. 	background-color: #141414;
  109. 	width: 675px;
  110. 	font-family: Arial;
  111. 	font-size: 12px;
  112. 	color: #818181;
  113. 	padding-left: 5px;
  114. }
  115.  
  116. #news_end {
  117. 	background-image: url(Obrazki/news_end.jpg);
  118. 	width: 680px;
  119. 	height: 15px;
  120. 	float: left;
  121. }
  122.  
  123. #news {
  124. 	margin-left: 247px;
  125. }
[HTML] pobierz, plaintext
pedro84
3.04.2010, 20:27:18
1. Stosuj składnię skróconą, na przykład
Kod
padding/margin/border-width:top right bottom left


2. Jak przedmówca powiedział, używaj klas!

3. Poza tym, to powinna być lista, a nie zupa div'owa

Daj URL bo tak to nie jest żadne analizowanie kodu.
mortus
3.04.2010, 21:08:43
Przykład:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.         <style type="text/css">
  6.             body {
  7.                 text-align: center;
  8.             }
  9.             #content {
  10.                 margin: 0 auto;
  11.                 width: 970px;
  12.                 text-align: left;
  13.             }
  14.             .post {
  15.                 margin: 10px;
  16.                 border: 1px solid #ccc;
  17. 				padding: 5px;
  18.                 width: 938px;
  19.             }
  20.             .author {
  21.                 border: 1px dotted #ccc;
  22.                 padding: 5px;
  23.                 width: 188px;
  24. 				min-height: 200px;
  25.                 float: left;
  26.             }
  27.             .body {
  28.                 border: 1px dotted #ccc;
  29.                 padding: 5px;
  30.                 width: 720px;
  31. 				min-height: 200px;
  32.                 float: right;
  33.             }
  34.            .clear {
  35.                 clear: both;
  36.             }
  37.         </style>
  38.     </head>
  39.     <body>
  40.         <div id="content">
  41.              <div class="post">
  42.                  <div class="author">Informacje o autorze</div>
  43.                  <div class="body">Właściwa treść posta</div>
  44.                  <div class="clear"></div>
  45.              </div>
  46.         </div>
  47.     </body>
  48. </html>
[HTML] pobierz, plaintext
Po pierwsze zastosuj się do rad kolegów, ponieważ nie możesz mieć wielu elementów o takim samym id. Strona nie przejdzie walidacji (X)HTML. Po drugie, jeżeli umieszczasz obok siebie dwa elementy <div>, to musisz im ustawić atrybut float (opływanie). Aby wstawić kolejny div poniżej, należy opływanie wyczyścić. Możesz do tego użyć specjalnego div-a, który ma klasę clear (zobacz przykład powyżej). Taki div "czyściciel" powinien się znaleźć po każdym zbiorze div-ów float-owanych równorzędznie (czyli również w zagnieżdżeniach, jakie masz w kodzie).
Otto
3.04.2010, 21:09:15
http://testdesign.cba.pl/
mortus
3.04.2010, 21:20:56
Przejrzałem Twój kod i ogólnie panuje w nim wielki chaos, ciężko będzie to naprawić.
krzysztof_kf
3.04.2010, 21:24:58
co to jest ? news_head_2 questionmark.gif gdzie jego zawartość ?
Otto
3.04.2010, 21:29:55
Kiedyś coś tam było tongue.gifP

Co do kodu to wiem że jest strasznie chaotyczny ale to jest mój pierwszy raz bez żadnego większego kursu. Da rade to jakoś naprawić bez tracenia kolejnej połowy dnia?
krzysztof_kf
3.04.2010, 21:30:05
Zapraszam Kurs CSS
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.