Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Szablon na divach - nie wyswietla panelu
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
M4rUd41
5.01.2011, 22:16:22
Witam,
jestem w trakcie kodowania szablonu na divach i napotkałem problem. Szablon ma dwa panele, ale prawy panel nie jest w ogóle wyświetlany. Co więcej, jeżeli wpiszę jakiś tekst do lewego panelu, to nie pokaże się on w panelu, tylko na prawo od niego. Oto kod:
HTML:
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  5. <head>
  6.   <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  7.   <meta name="Author" content="Kacper -Signe- Łabędź e-mail: maruda41@gmail.com" />
  8.   <meta name="Generator" content="kED" />
  9.  
  10.   <title>Gry-Newsy.pl</title>
  11.  
  12.   <link rel="stylesheet" href="style.css" type="text/css" />
  13. </head>
  14. <body>
  15. <div id="content">
  16. 	<div id="belka_g">
  17. 		<div id="nawi">
  18. 		<a href="#" class="nawi_button"><img src="images/nawi_1.png" alt="Strona Główna" /></a>
  19. 		<a href="#" class="nawi_button"><img src="images/nawi_2.png" alt="Kontakt" /></a>
  20. 		<a href="#" class="nawi_button"><img src="images/nawi_3.png" alt="Kategorie" /></a>
  21. 		<a href="#" class="nawi_button"><img src="images/nawi_4.png" alt="Galeria" /></a>
  22. 		<a href="#" class="nawi_button"><img src="images/nawi_5.png" alt="Artykuły" /></a>
  23. 		<a href="#" class="nawi_button"><img src="images/nawi_6.png" alt="Logowanie" /></a>
  24. 		<a href="#" class="nawi_button"><img src="images/nawi_7.png" alt="Rejestracja" /></a>
  25. 		<a href="#" class="nawi_button"><img src="images/nawi_8.png" alt="Profil" /></a>
  26. 		</div>
  27. 		<div id="luk"><img src="images/luk_t.png" alt="gry-newsy.pl" /></div>
  28. 	</div>
  29. 	<div id="logo"></div>
  30. 	<div id="cont">
  31. 		<div id="belka_cont">
  32. 			<div id="social">
  33. 				<a href="http://youtube.com/user/GryNewsypl" class="social"><img src="images/social_1.png" alt="YouTube" /></a>
  34. 				<a href="http://www.facebook.com/pages/Gry-Newsypl/135557193134013" class="social"><img src="images/social_2.png" alt="Facebook" /></a>
  35. 				<a href="http://gry-newsy.pl/index.php?format=feed&type=rss" class="social"><img src="images/social_3.png" alt="RSS" /></a>
  36. 			</div>
  37. 			<div id="szukajka">
  38.  
  39. 			</div>
  40. 		</div>
  41. 		<div id="kontener">
  42. 			<div id="bok">
  43. 				<div class="bok_top"></div>
  44. 				<div class="bok_kont"></div>
  45. 				<div class="bok_end"></div>
  46. 			</div>
  47. 			<div id="srodek">
  48. 				</div class="srodek_top"></div>
  49. 				</div class="srodek_data"></div>
  50. 				</div class="srodek_kont"></div>
  51. 				</div class="srodek_end"></div>
  52. 			</div>
  53. 		</div>
  54. 	</div>
  55. 	<div></div>
  56. </div>
  57.  
  58. </body>
  59. </html>
[HTML] pobierz, plaintext

CSS:
[CSS] pobierz, plaintext 
  1. html, body  
  2. 	{background-color: #0b7dbf; 
  3. 	 background-image: url(images/bg.jpg);
  4. 	 text-align: left; 
  5. 	 background-repeat: repeat-x;
  6. 	 font-size: 12px; 
  7. 	 font-family: verdana, tahoma, arial, helvetica, sans-serif;
  8. 	 color: #fff;
  9. 	 width: 950px;
  10. 	 margin: 0 auto;
  11. 	 padding: 0;
  12. 	}
  13. img 
  14.   {border: 0px;
  15. 	}
  16. h1 
  17. 	{font-size: 1.4em; 
  18. 	 font-weight: bold;
  19. 	}
  20. h2 
  21. 	{font-size: 1.2em;
  22. 	}
  23. h3
  24. 	{font-size: 1em; 
  25. 	 font-weight: bold;
  26. 	}
  27. a 
  28. 	{color: #d9d9d9; 
  29. 	}
  30. a:visited 
  31. 	{color: #d9d9d9;
  32. 	}
  33. a:hover 
  34. 	{color: #09539c;
  35. 	}
  36. #content
  37. 	{width: 950px;
  38. 	 margin: auto;
  39. 	 }
  40. #belka_g
  41. 	{background-image: url(images/belka_t.png);
  42. 	 background-repeat:no-repeat;
  43. 	 text-align:left;
  44. 	 width: 950px;
  45. 	 height: 41px;
  46. 	}
  47. #nawi
  48. 	{width:810px;
  49. 	 padding-left: 15px;
  50. 	}
  51. #luk{
  52. 	 float:right;
  53. 	 width: 125px;
  54. 	 height: 40px;
  55. 	}
  56. #logo{
  57. 	 background-image: url('images/logo.png');
  58. 	 background-repeat: no-repeat;
  59. 	 background-position: 20px;
  60. 	 height:181px;
  61. 	 width:950px;
  62. 	 }
  63. #cont{
  64.    width:950px;
  65. 	 height:auto;
  66. 	 text-align: center;
  67. 	 }
  68. #belka_cont{
  69. 	 width:950px;
  70. 	 height: 41px;
  71. 	 text-align: left;
  72. 	 background-image: url('images/belka_kont.png');
  73. 	 background-repeat: no-repeat;
  74. 	 margin: 0;}
  75. #social{
  76. 	 float: left;
  77. 	 padding-left: 15px;
  78. 	 height: 30px;
  79. 	 padding-top: 11px;}
  80. #szukajka{
  81. 	 float: right;
  82. 	 height: 41px;
  83. 	 margin-left: 0;
  84. 	}
  85. #kontener{
  86. 	 background-color: #08499b;
  87. 	 width:930px;
  88. 	 height: auto;
  89. 	 padding: 10px;
  90. 	 margin:0;
  91. 	 margin-top: -1px;
  92. 	 }
  93. #bok{
  94. 	 width: 265px;
  95. 	 height: auto;
  96. 	 float: left;
  97. 	 padding: 0;
  98. 	 }
  99. #srodek{
  100. 	 width: 655px;
  101. 	 height: auto;
  102. 	 float: right;
  103. 	 padding:0;
  104. 	 }
  105. .bok_top{
  106. 	 width: 655px;
  107. 	 height: 40px;
  108. 	 min-height: 40px;
  109. 	 background-image: url('images/belka_b.png');
  110. 	 background-repeat: no-repeat;
  111. 	 text-transform: uppercase;
  112. 	 }
  113. .bok_kont{
  114. 	 width: 655px;
  115. 	 height:auto;
  116. 	 min-height: 20px;
  117. 	 background-image: url('images/tlo_b.png');
  118. 	 background-repeat: repeat-y;
  119. 	 }
  120. .bok_end{
  121. 	 width: 655px;
  122. 	 height: 6px;
  123. 	 min-height: 6px;
  124. 	 max-height: 6px;
  125. 	 background-image: url('images/tlo_b_d.png');
  126. 	 background-repeat: no-repeat;}
  127. .srodek_top{
  128. 	 width: 655px;
  129. 	 height: 40px;
  130. 	 min-height: 40px;
  131. 	 background-image: url('images/belka_s.png');
  132. 	 background-repeat: no-repeat;}
  133. .srodek_data{
  134. 	 width: 655px;
  135. 	 height: 23px;
  136. 	 min-height: 23px;
  137. 	 max-height: 23px;
  138. 	 background-image: url(images/tlo_s_g.png);
  139. 	 background-repeat: no-repeat;}
  140. .srodek-kont{
  141. 	 width: 655px;
  142. 	 height: auto;
  143. 	 min-height: 20px;
  144. 	 background-color: #373737;}
  145. .srodek_end{
  146. 	 width: 655px;
  147. 	 height: 11px;
  148. 	 min-height: 11px;
  149. 	 max-height: 11px;
  150. 	 background-image:url('images/tlo_s_d.png');}
  151. .social{
  152. 	 height: 21px;
  153. 	 display:block;
  154. 	 overflow: hidden;
  155. 	 float: left;
  156. 	 padding-left:5px;
  157. 	 }
  158. .social :hover{
  159. 	 margin-top: -21px;}
  160. .nawi_button{
  161.    height: 41px;
  162. 	 display:block;
  163. 	 overflow: hidden;
  164. 	 float:left;
  165. 	 }
  166. .nawi_button :hover{
  167. 	 margin-top:-41px;}
  168. .szukajka{
  169. 	 background-image: url('images/search.png');
  170. 	 width: 133px;
  171. 	 height: 20px;
  172. 	 border: 0;
  173. 	}
  174. .szukaj {
  175. 	 background-image: url('images/search_go.png');
  176. 	 width:29px;
  177. 	 height: 21px;
  178. 	 border: 0;
  179. 	}
[CSS] pobierz, plaintext

Proszę o pomoc sad.gif Siedzę nad tym już z godzinę, przewaliłem kod kilkadziesiąt razy ale dalej nie widzę problemu. sad.gif
lejs
6.01.2011, 00:35:17
Drobne błędy w kodzie, szerokość bok_top , bok_... . i błąd typu </div class=".."></div>

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  5. <head>
  6.   <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  7.   <meta name="Author" content="Kacper -Signe- Łabędź e-mail: maruda41@gmail.com" />
  8.   <meta name="Generator" content="kED" />
  9.  
  10.   <title>Gry-Newsy.pl</title>
  11.  
  12.   <link rel="stylesheet" href="style2.css" type="text/css" />
  13. </head>
  14. <body>
  15. <div id="content">
  16. 	<div id="belka_g">
  17. 		<div id="nawi">
  18. 		<a href="#" class="nawi_button"><img src="images/nawi_1.png" alt="Strona Główna" /></a>
  19. 		<a href="#" class="nawi_button"><img src="images/nawi_2.png" alt="Kontakt" /></a>
  20. 		<a href="#" class="nawi_button"><img src="images/nawi_3.png" alt="Kategorie" /></a>
  21. 		<a href="#" class="nawi_button"><img src="images/nawi_4.png" alt="Galeria" /></a>
  22. 		<a href="#" class="nawi_button"><img src="images/nawi_5.png" alt="Artykuły" /></a>
  23. 		<a href="#" class="nawi_button"><img src="images/nawi_6.png" alt="Logowanie" /></a>
  24. 		<a href="#" class="nawi_button"><img src="images/nawi_7.png" alt="Rejestracja" /></a>
  25. 		<a href="#" class="nawi_button"><img src="images/nawi_8.png" alt="Profil" /></a>
  26. 		</div>
  27. 		<div id="luk"><img src="images/luk_t.png" alt="gry-newsy.pl" /></div>
  28. 	</div>
  29. 	<div id="logo"></div>
  30. 	<div id="cont">
  31. 		<div id="belka_cont">
  32. 			<div id="social">
  33. 				<a href="http://youtube.com/user/GryNewsypl" class="social"><img src="images/social_1.png" alt="YouTube" /></a>
  34. 				<a href="http://www.facebook.com/pages/Gry-Newsypl/135557193134013" class="social"><img src="images/social_2.png" alt="Facebook" /></a>
  35. 				<a href="http://gry-newsy.pl/index.php?format=feed&type=rss" class="social"><img src="images/social_3.png" alt="RSS" /></a>
  36. 			</div>
  37. 			<div id="szukajka">
  38.  
  39. 			</div>
  40. 		</div>
  41. 		<div id="kontener">
  42. 			<div id="bok">
  43. 				<div class="bok_top"></div>
  44. 				<div class="bok_kont"></div>
  45. 				<div class="bok_end"></div>
  46. 			</div>
  47. 			<div id="srodek">
  48. 				<div class="srodek_top"></div>
  49. 				<div class="srodek_data"></div>
  50. 				<div class="srodek_kont"></div>
  51. 				<div class="srodek_end"></div>
  52. 			</div>
  53. 			<div style="clear:both; float:none;"> </div>
  54. 		</div>
  55. 	</div>
  56. 	<div></div>
  57. </div>
  58.  
  59. </body>
  60. </html>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. html, body  
  2. 	{background-color: #0b7dbf; 
  3. 	 background-image: url(images/bg.jpg);
  4. 	 text-align: left; 
  5. 	 background-repeat: repeat-x;
  6. 	 font-size: 12px; 
  7. 	 font-family: verdana, tahoma, arial, helvetica, sans-serif;
  8. 	 color: #fff;
  9. 	 width: 950px;
  10. 	 margin: 0 auto;
  11. 	 padding: 0;
  12. 	}
  13. img 
  14.   {border: 0px;
  15. 	}
  16. h1 
  17. 	{font-size: 1.4em; 
  18. 	 font-weight: bold;
  19. 	}
  20. h2 
  21. 	{font-size: 1.2em;
  22. 	}
  23. h3
  24. 	{font-size: 1em; 
  25. 	 font-weight: bold;
  26. 	}
  27. a 
  28. 	{color: #d9d9d9; 
  29. 	}
  30. a:visited 
  31. 	{color: #d9d9d9;
  32. 	}
  33. a:hover 
  34. 	{color: #09539c;
  35. 	}
  36. #content
  37. 	{width: 950px;
  38. 	 margin: auto;
  39. 	 }
  40. #belka_g
  41. 	{background-image: url(images/belka_t.png);
  42. 	 background-repeat:no-repeat;
  43. 	 text-align:left;
  44. 	 width: 950px;
  45. 	 height: 41px;
  46. 	}
  47. #nawi
  48. 	{width:810px;
  49. 	 padding-left: 15px;
  50. 	}
  51. #luk{
  52. 	 float:right;
  53. 	 width: 125px;
  54. 	 height: 40px;
  55. 	}
  56. #logo{
  57. 	 background-image: url('images/logo.png');
  58. 	 background-repeat: no-repeat;
  59. 	 background-position: 20px;
  60. 	 height:181px;
  61. 	 width:950px;
  62. 	 }
  63. #cont{
  64.    width:950px;
  65. 	 height:auto;
  66. 	 text-align: center;
  67. 	 }
  68. #belka_cont{
  69. 	 width:950px;
  70. 	 height: 41px;
  71. 	 text-align: left;
  72. 	 background-image: url('images/belka_kont.png');
  73. 	 background-repeat: no-repeat;
  74. 	 margin: 0;}
  75. #social{
  76. 	 float: left;
  77. 	 padding-left: 15px;
  78. 	 height: 30px;
  79. 	 padding-top: 11px;}
  80. #szukajka{
  81. 	 float: right;
  82. 	 height: 41px;
  83. 	 margin-left: 0;
  84. 	}
  85. #kontener{
  86. 	 background-color: #08499b;
  87. 	 width:930px;
  88. 	 height: auto;
  89. 	 padding: 10px;
  90. 	 margin:0;
  91. 	 margin-top: -1px;
  92.  
  93. 	 }
  94. #bok{
  95.  
  96. 	 width: 265px;
  97. 	 height: auto;
  98. 	 float: left;
  99. 	 padding: 0;
  100. 	 }
  101. #srodek{
  102. 	 width: 655px;
  103. 	 height: auto;
  104. 	 float: right;
  105. 	 padding:0;
  106.  
  107. 	 }
  108. .bok_top{
  109. 	 width: 265px;
  110. 	 height: 40px;
  111. 	 min-height: 40px;
  112. 	 background-image: url('images/belka_b.png');
  113. 	 background-repeat: no-repeat;
  114. 	 text-transform: uppercase;
  115. 	 }
  116. .bok_kont{
  117. 	 width: 265px;
  118. 	 height:auto;
  119. 	 min-height: 20px;
  120. 	 background-image: url('images/tlo_b.png');
  121. 	 background-repeat: repeat-y;
  122. 	 }
  123. .bok_end{
  124. 	 width: 265px;
  125. 	 height: 6px;
  126. 	 min-height: 6px;
  127. 	 max-height: 6px;
  128. 	 background-image: url('images/tlo_b_d.png');
  129. 	 background-repeat: no-repeat;}
  130. .srodek_top{
  131. 	 width: 655px;
  132. 	 height: 40px;
  133. 	 min-height: 40px;
  134. 	 background-image: url('images/belka_s.png');
  135. 	 background-repeat: no-repeat;}
  136. .srodek_data{
  137. 	 width: 655px;
  138. 	 height: 23px;
  139. 	 min-height: 23px;
  140. 	 max-height: 23px;
  141. 	 background-image: url(images/tlo_s_g.png);
  142. 	 background-repeat: no-repeat;}
  143. .srodek-kont{
  144. 	 width: 655px;
  145. 	 height: auto;
  146. 	 min-height: 20px;
  147. 	 background-color: #373737;}
  148. .srodek_end{
  149. 	 width: 655px;
  150. 	 height: 11px;
  151. 	 min-height: 11px;
  152. 	 max-height: 11px;
  153. 	 background-image:url('images/tlo_s_d.png');}
  154. .social{
  155. 	 height: 21px;
  156. 	 display:block;
  157. 	 overflow: hidden;
  158. 	 float: left;
  159. 	 padding-left:5px;
  160. 	 }
  161. .social :hover{
  162. 	 margin-top: -21px;}
  163. .nawi_button{
  164.    height: 41px;
  165. 	 display:block;
  166. 	 overflow: hidden;
  167. 	 float:left;
  168. 	 }
  169. .nawi_button :hover{
  170. 	 margin-top:-41px;}
  171. .szukajka{
  172. 	 background-image: url('images/search.png');
  173. 	 width: 133px;
  174. 	 height: 20px;
  175. 	 border: 0;
  176. 	}
  177. .szukaj {
  178. 	 background-image: url('images/search_go.png');
  179. 	 width:29px;
  180. 	 height: 21px;
  181. 	 border: 0;
  182. 	}
[HTML] pobierz, plaintext
M4rUd41
7.01.2011, 00:11:20
Tak banalne błędy, i tyle problemu. Mocno mnie musiało przyćmić skoro tego nie zauważyłem tongue.gif Tak czy owak, wielkie dzięki smile.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.