Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Dopasowanie do przeglądarki
Otto
post
Post #1





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/tongue.gif) Niby oczywiste ale każdemu może się zdarzyć (IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
Pawel_W
post
Post #2





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

Ostrzeżenie: (0%)
-----

nie możesz powtarzać id dla wielu elementów... używaj klas!
Go to the top of the page
+Quote Post
Otto
post
Post #3





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
pedro84
post
Post #4





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
mortus
post
Post #5





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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).
Go to the top of the page
+Quote Post
Otto
post
Post #6





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

Ostrzeżenie: (0%)
-----

http://testdesign.cba.pl/
Go to the top of the page
+Quote Post
mortus
post
Post #7





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

Przejrzałem Twój kod i ogólnie panuje w nim wielki chaos, ciężko będzie to naprawić.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #8





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

co to jest ? news_head_2 (IMG:style_emoticons/default/questionmark.gif) gdzie jego zawartość ?
Go to the top of the page
+Quote Post
Otto
post
Post #9





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

Ostrzeżenie: (0%)
-----

Kiedyś coś tam było (IMG:style_emoticons/default/tongue.gif) P

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?
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #10





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Zapraszam Kurs CSS
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 17.09.2025 - 09:14
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn