Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Zrobienie tła
Forum PHP.pl > Forum > Przedszkole
Drizzt
7.02.2011, 12:45:02
Witam,

Potrzebuje pomocy przy :

literkate.za.pl/grosz/

Jak zrobić aby w tym projekcie pojawiło się takie tło jak na obrakzu poniżej.
Chodzi o dwie te czarne kreski które oddzielają srodek strony i potem na tym czarnym zamalowanym polu mój własny obrazek jako tło.

http://img220.imageshack.us/img220/3331/tlop.png


Proszę o pomoc, poniżej daje plik index i css.

index.html
[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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Green Web</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. 	<!-- top navigation start -->
  11. 	<div id="topNav">	
  12. 		<ul>
  13. 			<li><a href="index.html" title="Home" class="hover">home</a></li>
  14. 			<li><a href="#" title="Aobut Me">about me</a></li>
  15. 			<li><a href="#" title="Price List">tariff</a></li>
  16. 			<li><a href="#" title="Make offer">make offer</a></li>
  17. 			<li><a href="#" title="Offers">offers</a></li>
  18. 			<li><a href="#" title="Contact">contact</a></li>
  19. 		</ul>
  20. 	</div>
  21. 	<!-- top navigation start -->
  22. 	<!-- body start -->
  23. 	<div id="body">
  24.     <h1></h1>
  25. <div class="bodyText">
  26. 			<h2><span>Who</span> are we?</h2>
  27. 			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  28. 	  </div><div class="catagory">
  29. 			<div class="pink">
  30. 				<h3 class="floatLeft">News</h3><h4 class="floatLeft">12.02.07</h4><br class="spacer" />
  31. 				<p>sodales quam vel diam. Aenen diam risus, commodo nec, cuus id, mattis id, sem</p>
  32. 				<h5 class="floatLeft">ante. Nunc quis dui</h5><a href="#" title="more" class="more">more</a>
  33. 			</div>
  34. 			<div class="green">
  35. 				<h3 >Where now ?</h3>
  36. 				<p>sodales quam vel diam. Aenen diam risus, commodo nec, cuus id, mattis id, sem</p>
  37. 				<h5 class="floatLeft">ante. Nunc quis dui</h5><a href="#" title="more" class="more">more</a>
  38. 			</div>
  39. 			<div class="blue">
  40. 				<h3>Support</h3>
  41. 				<p><strong>sodales quam vel diam.</strong> Aen diam risus, commodo nec, cuus id, mattis id, sem</p>
  42. 				<h5 class="floatLeft">aliquet bibendum</h5><a href="#" title="more" class="more">more</a>
  43. 	      </div>
  44. 		<br class="spacer" /></div>
  45. 		<br class="spacer" />
  46. </div>	
  47. <!-- body end -->	
  48. 	<!-- footer start -->
  49. 	<div id="footer">
  50. 		<div class="footer">
  51. 			<ul>
  52. 				<li><a href="#" title="Home">home</a>|</li>
  53. 				<li><a href="#" title="About Me">about me</a>|</li>
  54. 				<li><a href="#" title="Price list">tariff</a>|</li>
  55. 				<li><a href="#" title="Make Offer">make offer</a>|</li>
  56. 				<li><a href="#" title="Offers">offers</a>|</li>
  57. 				<li><a href="#" title="Contact">contact</a></li>
  58. 			</ul>  <br /><br />
  59. 			<p>&copy;  all rights reserved.</p>
  60.  
  61. 	    <br class="spacer" /></div>
  62. 	</div>
  63. 	<!-- footer end -->		
  64. </body>
  65. </html>
[HTML] pobierz, plaintext







oraz css:
[PHP] pobierz, plaintext 
  1. /* CSS Document */
  2. body{
  3. 	background:url(images/bg.gif) repeat-x 0 0 #F7F7F7; color:#171717;
  4. 	font:normal 13px/20px Georgia, "Times New Roman", Times, serif;
  5. 	margin:0; padding:0;}
  6.  
  7. div, h1, h2, h3, h4, h5, h6, form, label, input, span, ul, li, p, a{
  8. 	margin:0;
  9. 	padding:0;
  10. 	text-align: justify;
  11. }
  12. ul{
  13. 	list-style:none;}
  14. .spacer{
  15. 	font-size:0; line-height:0; clear:both;}
  16.  
  17.  
  18. /* -- top navigation start -- */
  19. #topNav{
  20. 	width:683px; margin:0 auto; height:37px;}
  21. #topNav ul{
  22. 	width:540px; margin:0 auto;}
  23. #topNav ul li{
  24. 	height:37px; float:left;
  25. 	background:url(images/bg.gif) repeat-x 0 0 #292929; color:#C1C1C1;
  26. 	font:bold 12px/37px Arial, Helvetica, sans-serif;}
  27. #topNav ul li a{
  28. 	padding:0 18px; height:37px; float:left; text-decoration:none; display:block;
  29. 	background:url(images/bg.gif) repeat-x 0 0 #292929; color:#C1C1C1;
  30. 	font:bold 12px/37px Arial, Helvetica, sans-serif;}
  31. #topNav ul li a:hover{
  32. 	background:url(images/top_btn_h.gif) no-repeat center bottom;}
  33. #topNav ul li a.hover{
  34. 	padding:0 18px; height:37px; float:left; text-decoration:none; display:block;
  35. 	background:url(images/top_btn_h.gif) no-repeat center bottom; color:#C1C1C1;
  36. 	font:bold 12px/37px Arial, Helvetica, sans-serif;}
  37. /* -- top navigation start -- */
  38.  
  39. /* -- body start -- */
  40. #body{
  41. 	width:683px; margin:0 auto; padding:0 0 60px 0; 
  42. 	background:url(images/logo.png) no-repeat right top #F7F7F7;  color:#171717;}
  43. #body h1{
  44. 	background;
  45. 	width:100x; height:255px; text-indent:-20000px;}
  46. #body div.bodyText{
  47. 	padding:50px 0 0 0; }
  48. #body div.bodyText h2{
  49. 	font:bold italic 24px/34px Georgia, "Times New Roman", Times, serif; color:#d3a109;}
  50. #body div.bodyText h2 span{
  51. 	color:#000000; background-color:#F7F7F7;}
  52. #body div.bodyText h3{
  53. 	font:bold 20px/24px Georgia, "Times New Roman", Times, serif; color:#d3a109;
  54. 	background:url(images/folder_icon.gif) no-repeat 0 5px #F7F7F7; padding:0 2px 0 25px;}
  55. #body div.bodyText h4{
  56. 	font:normal 20px/24px Georgia, "Times New Roman", Times, serif; color:#000000;
  57. 	background-color:#FFF7DE; padding:0 0 0 10px;}
  58. #body div.bodyText p{
  59. 	font:normal 13px/20px Georgia, "Times New Roman", Times, serif; color:#171717;
  60. 	padding:10px 0; background-color:#F7F7F7;}
  61. #body div.bodyText p a{
  62. 	color:#003E6A; background-color:#F7F7F7; text-decoration:underline;}
  63. #body div.bodyText p a:hover{
  64. 	text-decoration:none;}
  65. #body div.catagory{
  66. 	padding:25px 0 0 0;}
  67. .pink{
  68. 	width:182px; padding:7px 15px 50px; float:left;
  69. 	background:url(images/pink_bg.gif) no-repeat 0 0 #F7F7F7; color:#4B2B3E;}
  70. .pink h3{
  71. 	background:url(images/news_icon.gif) no-repeat 2px 13px; color:#850049;
  72. 	font:bold 20px/38px Georgia, "Times New Roman", Times, serif; padding:0 9px 0 22px;}
  73. .pink h4{
  74. 	background:url(images/date_bg.gif) no-repeat 0 13px; color:#384B06;
  75. 	width:56px; text-align:center;
  76. 	font:bold 12px/39px Arial, Helvetica, sans-serif;}
  77. .pink h5{
  78. 	color:#000000; text-transform:uppercase;
  79. 	font:bold 10px/11px Georgia, "Times New Roman", Times, serif;}
  80. .pink p{
  81. 	color:#4B2B3E; padding:3px 0 10px 0;
  82. 	font:normal 11px/17px Georgia, "Times New Roman", Times, serif;}
  83. .pink a.more{
  84. 	background:url(images/pink_more_btn.gif) no-repeat 0 0 #FFFFFF; color:#000000;
  85. 	width:46px; height:11px; display:block; float:right;
  86. 	text-decoration:none; text-indent:-2000px;
  87. 	padding:0; line-height:0;}
  88. .pink a.more:hover{
  89. 	background:url(images/pink_more_btn_h.gif) no-repeat 0 0 #FFFFFF; color:#000000;}
  90.  
  91. .green{
  92. 	width:182px; padding:7px 15px 50px; float:left;
  93. 	background:url(images/green_bg.gif) no-repeat 0 0 #F7F7F7; color:#4B2B3E;}
  94. .green h3{
  95. 	background:url(images/solution_icon.gif) no-repeat 2px 13px; color:#516D0A;
  96. 	font:bold 20px/38px Georgia, "Times New Roman", Times, serif; padding:0 9px 0 22px;}
  97. .green h5{
  98. 	color:#000000; text-transform:uppercase;
  99. 	font:bold 10px/11px Georgia, "Times New Roman", Times, serif;}
  100. .green p{
  101. 	color:#3D5C32; padding:3px 0 10px 0;
  102. 	font:normal 11px/17px Georgia, "Times New Roman", Times, serif;}
  103. .green p a.line{
  104. 	color:#3D5C32; padding:0;  text-decoration:underline;
  105. 	font:normal 11px/17px Georgia, "Times New Roman", Times, serif;}
  106. .green p a.line:hover{
  107. 	color:#3D5C32; padding:0;  text-decoration:none;
  108. 	font:normal 11px/17px Georgia, "Times New Roman", Times, serif;}
  109. .green a.more{
  110. 	background:url(images/green_more_btn.gif) no-repeat 0 0 #FFFFFF; color:#000000;
  111. 	width:46px; height:11px; display:block; float:right;
  112. 	text-decoration:none; text-indent:-2000px;
  113. 	padding:0; line-height:0;}
  114. .green a.more:hover{
  115. 	background:url(images/green_more_btn_h.gif) no-repeat 0 0 #FFFFFF; color:#000000;}
  116.  
  117. .blue{
  118. 	width:182px; padding:7px 15px 50px; float:left;
  119. 	background:url(images/blue_bg.gif) no-repeat 0 0 #F7F7F7; color:#4B2B3E;}
  120. .blue h3{
  121. 	background:url(images/support_icon.gif) no-repeat 2px 11px; color:#364A5B;
  122. 	font:bold 20px/38px Georgia, "Times New Roman", Times, serif; padding:0 9px 0 22px;}
  123. .blue h5{
  124. 	color:#000000; text-transform:uppercase;
  125. 	font:bold 10px/11px Georgia, "Times New Roman", Times, serif;}
  126. .blue p{
  127. 	color:#364A5B; padding:3px 0 10px 0;
  128. 	font:normal 11px/17px Georgia, "Times New Roman", Times, serif;}
  129. .blue a.more{
  130. 	background:url(images/blue_more_btn.gif) no-repeat 0 0 #FFFFFF; color:#000000;
  131. 	width:46px; height:11px; display:block; float:right;
  132. 	text-decoration:none; text-indent:-2000px;
  133. 	padding:0; line-height:0;}
  134. .blue a.more:hover{
  135. 	background:url(images/blue_more_btn_h.gif) no-repeat 0 0 #FFFFFF; color:#000000;}
  136.  
  137. .floatLeft{
  138. 	float:left;}
  139. /* -- body end -- */
  140.  
  141. /* footer start -- */
  142. #footer{
  143. 	background-color:#292929;  color:#FFFFFF;}
  144. .footer{
  145. 	width:410px;
  146. 	height:117px;
  147. 	margin:0 auto;
  148. 	padding:10px 0 0 0;
  149. 	text-align: center;
  150. }
  151. .footer ul{
  152. 	width:445px;  margin:0 auto;}
  153. .footer ul li{
  154. 	font:bold 12px/20px Arial, Helvetica, sans-serif;
  155. 	color:#FAFAFA;
  156. 	float:left;
  157. 	background-color:#292929;
  158. }
  159. .footer ul li a{
  160. 	 font:bold 12px/20px Arial, Helvetica, sans-serif; text-decoration:none;
  161. 	color:#FAFAFA;  background-color:#292929; padding:0 8px;}
  162. .footer ul li a:hover{
  163. 	 font:bold 12px/20px Arial, Helvetica, sans-serif; text-decoration:none;
  164. 	color:#FAFAFA; background-color:#484848; padding:0 8px;}
  165. .footer p{
  166. 	margin:0 auto; width:175px; color:#EDE3C0; background-color:#292929;
  167. 	font:normal 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;}
  168. .footer p.valid{
  169. 	margin:0 auto; width:120px;}
  170. .footer p.valid a.xhtml{
  171. 	background:url(images/xhtml_btn.gif) no-repeat 0 0 #292929; color:#FFFFFF; margin:5px 0 8px 0px;
  172. 	text-decoration:none; text-indent:-2000px; width:62px; height:13px; display:block; float:left;}
  173. .footer p.valid a.xhtml:hover{
  174. 	background:url(images/xhtml_btn_h.gif) no-repeat 0 0 #292929; color:#FFFFFF; margin:5px 0 8px 0px;
  175. 	text-decoration:none; text-indent:-2000px; width:62px; height:13px; display:block; float:left;}
  176. .footer p.valid a.css{
  177. 	background:url(images/css_btn.gif) no-repeat 0 0 #292929; color:#FFFFFF; margin:5px 0 8px 4px;
  178. 	text-decoration:none; text-indent:-2000px; width:62px; height:13px; display:block; float:left;}
  179. .footer p.valid a.css:hover{
  180. 	background:url(images/css_btn_h.gif) no-repeat 0 0 #292929; color:#FFFFFF; margin:5px 0 8px 4px;
  181. 	text-decoration:none; text-indent:-2000px; width:62px; height:13px; display:block; float:left;}
  182. .footer p.tworld{
  183. 	margin:0 auto; width:170px; height:17px; padding:0 3px;
  184. 	font:normal 12px/16px Arial, Helvetica, sans-serif; color:#414141;
  185. 	background-color:#FFFFFF; text-align:center;}
  186. .footer p.tworld a{
  187. 	font:bold 12px/16px Arial, Helvetica, sans-serif; color:#000000;
  188. 	background-color:#FFFFFF; text-align:center; text-decoration:none;}
  189. .footer p.tworld a:hover{
  190. 	font:bold 12px/16px Arial, Helvetica, sans-serif; color:#404040;
  191. 	background-color:#FFFFFF; text-align:center; text-decoration:none;}
  192. /* footer end -- */
[PHP] pobierz, plaintext

Ulysess
7.02.2011, 12:56:45
robisz główny kontener z width 100% a w środku 3 inne (które łącznie też mają 100% szerokości). dodatkowo dla każdego z tych DIVow daj float: left;
Drizzt
7.02.2011, 13:14:12
Nie będzie to koligowało z tłami na dole i gorze strony ? Ponieważ chce na stronie po prawej i lewej chce dać tło ze wzorem.

Moglby ktoś pomóc z tymi kontenerami ? Pomagam w stronie dla szwagra i nie za bardzo wiem jak to zrobić.
jaworr
7.02.2011, 13:34:18
a nie lepiej zrobić jeden div główny na szerokość 80% z atrybutem margin:0 auto; a dla body przypisać background?
Drizzt
7.02.2011, 14:45:38
Nie ponieważ chce aby czarne tło na górze i dole strony było inne niż środkowe.

up
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.