Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [XHTML/CSS] Powtarzanie tła
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
marcin86s
5.10.2010, 00:21:52
http://www.error-esport.pl/index.php?site=news

Może mi ktoś powiedzieć dlaczego tło (images/con_bg.jpg) ustawione w divie #content nie powtarza się za divem news?
essey
5.10.2010, 09:55:08
Wstaw na końcu diva #content:

[HTML] pobierz, plaintext 
  1. <div id="content">
  2.  
  3.   <div style="clear:both;"></div>
  4. </div>
[HTML] pobierz, plaintext
marcin86s
5.10.2010, 10:23:01
Brak reakcji, dalej to samo... mellow.gif
Vercio
12.10.2010, 17:26:51
Ponieważ div z którym jest obrazek jest po prostu za mały, zwiększ szerokość div'a a problem zniknie.
marcin86s
20.10.2010, 15:38:43
Link w pierwszym poście nieaktualny. W zaznaczonych miejscach tło się nie powtarza, choć niby powinno bo całość znajduje się w divie #content

[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" xml:lang="en" lang="en"> 
  3. <head> 
  4. <title>webSPELL v4 - News</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  6. <script type="text/javascript" src="js/bbcode.js"></script> 
  7. <script type="text/javascript" src="js/jquery.js"></script> 
  8. <script type="text/javascript" src="js/jquery.corner.js"></script> 
  9. <script type="text/javascript" src="js/jquery.idTabs.js"></script> 
  10. <script type="text/javascript" src="js/jquery.imagebox.js"></script> 
  11. <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> 
  12. <link rel="stylesheet" href="_style.css" type="text/css" /> 
  13. <link rel="stylesheet" href="_imagebox.css" type="text/css" /> 
  14. </head> 
  15. <body> 
  16.  
  17. <script type="text/javascript"> 
  18. $.fn.corner.defaults.useNative = false;
  19.  
  20. $(document).ready(function(){
  21.         $(".header").corner("bevelfold tr 15px");
  22. 		$(".login").corner("bevelfold tr 15px");
  23.     });
  24. </script> 
  25.  
  26. <script type="text/javascript"> 
  27.  
  28.   var _gaq = _gaq || [];
  29.   _gaq.push(['_setAccount', 'UA-12462415-1']);
  30.   _gaq.push(['_trackPageview']);
  31.  
  32.   (function() {
  33.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  34.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  35.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  36.   })();
  37.  
  38. </script> 
  39.  
  40. <div id="container"> 
  41. <a href="index.php"><img style="height: 64px" src="images/top.jpg" alt="" /></a> 
  42.  
  43. 	<div class="menu"> 
  44. 	<img style="float: left;" src="images/nav_left.gif" alt="" /> 
  45. 	<ul class="idTabs"> 
  46. 		<li><a href="#idTab1" class="selected">Główna</a></li> 
  47. 		<li><a href="#idTab2">Drużyna</a></li> 
  48. 		<li><a href="#idTab3">Media</a></li> 
  49. 		<li><a href="index.php?site=forum">Forum</a></li> 
  50. 		<li><a href="index.php?site=contact">Kontakt</a></li> 
  51. 	<img style="float: right;" src="images/nav_right.gif" alt="" /> 
  52. 	</ul> 
  53. 	</div> 
  54. <div class="submenu"> 
  55. 	<div id="idTab1"> 
  56. 		<a href="index.php?site=news">Aktualności</a> &bull; 
  57. 		<a href="index.php?site=articles">Artykuły</a> &bull; 
  58. 		<a href="">Wywiady</a> &bull; 
  59. 		<a href="index.php?site=registered_users">Użytkownicy</a> 
  60. 	</div> 
  61. 	<div id="idTab2"> 
  62. 		<a href="index.php?site=members">Skład</a> &bull;
  63. 		<a href="index.php?site=clanwars">Mecze</a> &bull;
  64. 		<a href="index.php?site=awards">Osiągnięcia</a> &bull;
  65. 		<a href="index.php?site=history">Historia</a> &bull;
  66. 		<a href="index.php?site=sponsors">Sponsorzy</a> &bull;
  67. 		<a href="index.php?site=about">O nas w mediach</a> &bull;
  68. 		<a href="index.php?site=server">Serwery</a> 
  69. 	</div> 
  70. 	<div id="idTab3"> 
  71. 		<a href="index.php?site=gallery">Galeria</a> &bull;
  72. 		<a href="index.php?site=demos">Wideo</a> &bull;
  73. 		<a href="index.php?site=files">Pliki</a> 
  74. 	</div> 
  75. </div>	
  76. <div id="content"> 
  77.  
  78. 	<div class="left"> 
  79. <div style="width: 600px;"> 
  80. 	<div class="header"><img src="images/icons/news/news.gif" alt="Testowy " /> <a href="index.php?site=news_comments&amp;newsID=1">Testowy </a></div> 
  81. 	<div class="newscontent">jfeosnfonseofno Poland suffered its greatest peacetime tragedy yesterday when its president and dozens of other leading figures were killed in a plane crash in Russia after their pilot ignored warnings not to land in thick fog.<br /> 
  82. <br /> 
  83. President Lech Kaczynski, 60, his wife Maria, an economist, and 95 others died on their way to commemorate the massacre of 22,000 Polish prisoners at Katyn in 1940 by Stalin?s secret police.<br /> 
  84. <br /> 
  85. Instead of diverting, as advised, the pilot of the 20- year-old plane tried and failed to land at least once, before clipping trees and plunging into a forest.<br /> 
  86. <br /> 
  87. Air traffic controllers watched their screens with growing unease as the Soviet-era Tupolev descended into the fog that hung like a shroud over the military airfield at Smolensk in western Russia</div> 
  88. 	<div style="text-align: right"><a href="#" onclick="MM_goToURL('parent','news.php?quickactiontype=unpublish&amp;newsID=1');return document.MM_returnValue;"><img src="images/icons/news/hide.gif" alt="Ukryj"/></a> <a href="#" onclick="MM_openBrWindow('news.php?action=edit&amp;newsID=1','News','toolbar=no,status=no,scrollbars=yes,width=800,height=600');"><img src="images/icons/news/edit.gif" alt="edytuj"/></a> 
  89. 		  <a href="#" onclick="MM_confirm('czy napewno wykasować tego newsa?', 'news.php?action=delete&amp;id=1')"><img src="images/icons/news/delete.gif" alt="usuń"/></div> 
  90. 	<div style="text-align: right"><a href="index.php?site=news_comments&amp;newsID=1">[0] komentarzy</a></div> 
  91. </div> 
  92. <input type="button" onclick="MM_openBrWindow('news.php?action=new','News','toolbar=no,status=no,scrollbars=yes,width=800,height=600');" value="Napisz" /> <input type="button" onclick="MM_goToURL('parent','index.php?site=news&amp;action=unpublished');return document.MM_returnValue;" value="1 Nieopublikowny" /> <input type="button" onclick="MM_goToURL('parent','index.php?site=news&amp;action=archive');return document.MM_returnValue;" value="Archiwum" /></div><div class="right"><div class="login"> 
  93. <div style="float: left; with: 70px;"> 
  94. <img src="images/avatars/noavatar.gif" alt="Avatar" /><br /></div> 
  95. <div style="float: left"> 
  96. Witaj: <a href="index.php?site=profile&amp;id=1"><b>admin</b></a><br /> 
  97.  <a href="index.php?site=loginoverview">Przeglądaj</a><br /> 
  98.  <a href="index.php?site=myprofile">Edytuj profil</a><br /> 
  99.  <a href="index.php?site=messenger">Wiadomości</a><br /> 
  100. </div> 
  101. <div style="float: left"> 
  102. &nbsp; <a href="logout.php">(Wyloguj)</a><br /> 
  103. &nbsp; <a href="index.php?site=usergallery">Galeria</a><br /> 
  104. &nbsp; <a href="index.php?site=buddys">Przyjaciele</a><br /> 
  105. &nbsp; <a href="index.php?site=cash_box">Płatności</a><br /> 
  106. </div> 
  107. </div> 
  108. <br> 
  109. </div> 
  110. </div> 
  111.  
  112. <div class="end"> 
  113. 	<img style="float: left;" src="images/end_left.gif" alt="" /> 
  114. 	<img style="float: right;" src="images/end_right.gif" alt="" /> 
  115. </div> 
  116.  
  117. <div class="bottom">Copyright by <b>Clanname</b>&nbsp; | &nbsp;CMS powered by <a href="http://www.webspell.org" target="_blank"><b>webSPELL.org</b></a>&nbsp; | &nbsp; Layout by <b>Marcin Stasiak</b> 
  118. </div> 
  119.  
  120. </div> 
  121.  
  122. </body> 
  123. </html> 
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. html, body { 
  2. margin: 0px; 
  3. padding: 0px; 
  4. font: 12px Verdana, Arial, Tahoma, Helvetica, sans-serif;
  5. background-image: url('images/bg.gif');
  6. background-color: #000000;
  7. }
  8. img {
  9. border: 0px;
  10. }
  11. a {
  12. color: #81090A;
  13. text-decoration: none;
  14. }
  15. .header { 
  16. width: 580px;
  17. height: 20px;
  18. background-image: url('images/bg2.gif');
  19. background-color: #000000;
  20. padding: 10px;
  21. }
  22. .header a {
  23. color: #FFFFFF;
  24. vertical-align: top;
  25. font: bold 16px Georgia, Times New Roman, Times, serif;
  26. }
  27. .newscontent {
  28. margin-top: 5px;
  29. padding: 5px;
  30. border: 1px solid #7A7A7A;
  31. }
  32. .forum td {
  33. border: 1px solid #81090A;
  34. }
  35. td.title {
  36. color: #FFFFFF;
  37. }
  38. #container {
  39. position: relative;
  40. width: 980px;
  41. background-color:#FFFFFF;
  42. text-align: left;
  43. clear: both;
  44. margin-left: auto;
  45. margin-right: auto;
  46. margin-top: 0px;
  47. margin-bottom: 0px;
  48. }
  49. .login {
  50. background-image: url('images/bg2.gif');
  51. background-color: #000000;
  52. color: #FFFFFF;
  53. height: 60px;
  54. vertical-align: middle;
  55. }
  56. .login img {
  57. height: 45px;
  58. width: 45px;
  59. border-color: #81090A;
  60. border-style: solid;
  61. border-width: 1px;
  62. margin: 5px;
  63. }
  64. .login input {
  65. border-color: #81090A;
  66. background-color: #FFFFFF;
  67. border-style: solid;
  68. }
  69. .login a {
  70. font-size: 9px;
  71. color: #FFFFFF;
  72. }
  73. .menu {
  74. background-image: url('images/nav_bg.gif');
  75. height: 37px;
  76. width: 980px;
  77. margin-top: -20px;
  78. }
  79. .menu li {
  80. list-style: none;
  81. float: left;
  82. }
  83. .menu ul a {
  84. height: 25px;
  85. width: 82px;
  86. display: block;
  87. font-weight: bold;
  88. font-size: 12px;
  89. text-decoration: none;
  90. color: #FFFFFF;
  91. text-align: center;
  92. padding-top: 12px;
  93. }
  94. .menu ul a:hover {
  95. color: #FFFFFF;
  96. }
  97. .menu ul a.selected {
  98. color: #000000;
  99. background-image: url('images/nav_tab.gif');
  100. cursor: default;
  101. }
  102. .submenu {
  103. background-image: url('images/con_bg.jpg');
  104. color: #7A7A7A;
  105. height: 20px;
  106. width: 920px;
  107. padding-left: 30px;
  108. padding-right: 30px;
  109. }
  110. .submenu a { 
  111. color: #000000;
  112. text-decoration: none;
  113. font-size: 12px;
  114. }
  115. #content {
  116. width: 930px;
  117. padding-left: 25px;
  118. padding-right: 25px;
  119. background-image: url('images/con_bg.jpg');
  120. }
  121. .left {
  122. float: left;
  123. width: 600px;
  124. }
  125. .right {
  126. float: right;
  127. width: 320px;
  128. }
  129. .end {
  130. background-image: url('images/end_bg.gif');
  131. clear: both;
  132. height: 20px;
  133. width: 980px;
  134. }
  135. .bottom {
  136. padding-top: 25px;
  137. padding-right: 30px;
  138. color: #FFFFFF;
  139. text-align: right;
  140. height: 25px;
  141. width: 950px;
  142. background-image: url('images/bottom.jpg');
  143. }
  144. .bottom a {
  145. color: #FFFFFF;
  146. }
[HTML] pobierz, plaintext


Pod IE pomogło dodanie do #content parametru display: table; niestety pod Chrome rozjechała się od tego kolumna. HLP?
erix
20.10.2010, 16:40:01
Też chcielibyśmy używać debuggerów.
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.